Check out a free preview of the full Full Stack for Front-End Engineers, v2 course:
The "Chat Bot: Exercise" Lesson is part of the full, Full Stack for Front-End Engineers, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Jem instructs the students to build a chat bot using websockets.

Get Unlimited Access Now

Transcript from the "Chat Bot: Exercise" Lesson

[00:00:00]
>> Jem: For the final project I want you to create a chat bot using websockets, that's it. One of my favorite show was the Great British Baking Show and the technical challenge, where it's just like make a pie. And there's no other instructions. You just have to know how to do it or look it up.

[00:00:20] Fortunately, because I'm nice, I wrote hotelroom.js, which is a chat bot I wrote last night in my hotel room. So, go ahead and clone this repo. And if you run node app, I'll give you example of what it looks like when it's running. I didn't fully flush it out because I wanna leave some mystery for you.

[00:00:39] But I can run node app.js like we did before. We're running on port 3000. And I can say local hosts 3000. Hey, and how are you? Smart, awesome. That's actually all it responds. Hi, awesome. That's all it does so far, I'll let you build up the rest of that.

[00:01:02] But right now I'm streaming over a websocket, so the connection stays open, the server is pinging constantly. Just keeping this connection alive. We'll check out the network. First, this page. See that we get the welcome payload and about every five seconds or so, we should get a ping coming through, just keeping that connection alive.

[00:01:23] If not, I'll take a look at my code and see what I did wrong. But you say we're using on the client, we're just using pure websockets. We're not using a library or anything like that. We're not using socket.io. On the server side, I'm using the WS library.

[00:01:36] So make sure your NPM install after you clone that repo. And, to make websockets work in EngineX, we have to use what is known as an upgrade request. So in your location block, you have to add the header upgrade HD upgrade, and the connection type upgrade. Because web sockets are better than regular connection.

[00:01:59] So it's an upgrade, if you will. And that will allow the websockets to stream through to your node application. The rest I will leave up to you for now. Is there any questions before we break fully? Some of you look confused.
>> Speaker 2: What's the goal? What's the overarching goal?

[00:02:19]
>> Jem: To build a websocket connection streaming through to your server.
>> Speaker 3: To what, say it again.
>> Jem: We're building a chat bot. Well, I say chat bot but, chat bot. It's pretty dumb. But we're using a websocket connection rather than just a pure TCP connection. So we're not doing that back and forth.

[00:02:42] It's just one single connection. So that means you need to connect it in the client, you need to route it through to your server into your EngineX configuration. From EngineX it needs a route that websocket to your Express application. And the Express application needs to handle that websocket and then respond back all the way back through the tunnel.

[00:03:02] See, I wasn't making it hard, I was gonna make this all on a subdomain, but I didn't wanna push you too hard. For bonus points you can do on a subdomain.
>> Speaker 3: We're just gonna blow away what we've got so far and easier.
>> Jem: If you like. Another option is you can add a different location block and route your traffic to just a different node application.

[00:03:21] Cuz with PMC, we can run 50 node applications if we want to. Totally up to you. This is like the technical portion of the free form so you can get it working. And if you want a few hints, clone the repo to your local machine, run node app.js.

[00:03:39] And then go to local host 3000 on your local machine, and it'll help you debug before you put on the server.