Today, I started working on a chat application in Node.js. The point is to explore WebSockets, the npm ecosystem, and node. It's meatier than the Github widget that I built earlier, so it's going to take a few episodes to get there.
Nevertheless, I did get something working by the end of this video!
Topics covered in this video:
- Making a Node app from scratch, using NPM
- Using a WebSocket to communicate w/ JSON messages
- Using express.js and the express-ws library
- Using the networking pane in the Chrome debugger
If you want to skip to a specific part, I have links to all the different parts here:
00:00 Intro
00:45 A diagram showing browser/browser communication
03:35 Setting up a new node project from scratch
05:01 Running npm init
to create a project; package.json
07:07 Doing some planning, talking about the first "vertical slice"
08:20 Creating an express.js
endpoint
10:45 Brief explanation of CORS, see wikipedia for more info
11:59 Making a basic frontend
14:35 Hooking up a WebSocket between frontend and backend
16:44 Setting up the express-ws
library
18:41 Initiating the WebSocket connection from the frontend
23:40 A few words on prototyping
24:35 The Network pane in Chrome debugging tools
26:23 Creating an input box so the user can type a message
34:09 Displaying the message that comes back from the server
37:38 Sending a JSON message over a WebSocket instead of raw text
41:47 Broadcasting messages from the server to all clients, so clients can chat with eachother
52:08 Outro
Enjoy, and let me know what you thought of it!