This course has been updated! We now recommend you take the AWS for Front-End Engineers (ft. S3, Cloudfront & Route 53) course.

Check out a free preview of the full Zero to Production Node.js on Amazon Web Services course:
The "Chat Application Code Demo Part 1" Lesson is part of the full, Zero to Production Node.js on Amazon Web Services course featured in this preview video. Here's what you'd learn in this lesson:

To demonstrate how to use Socket.io, Kevin builds a simple chat application from scratch. He begins by creating the basic Express web server as well as a client-side page for adding chat messages and viewing the chat log.

Get Unlimited Access Now

Transcript from the "Chat Application Code Demo Part 1" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Kevin Whinnery: If you want to build something similar, the Socket IO documentation is actually fairly good on this front. If you just go to SOCKET.IO, and click on Getting Started, you can do a pretty much around about to do here by going through this tutorial in setting up a basic basic chat application.

[00:00:30] So what we're gonna need to do to use socket I O. I'll use it in a simple sort of stand alone project first. And then we'll pose a challenge to the group to integrate socket IO in our TODO List application as well. First thing we're gonna do, we already have if memory serves, we have a express module installed in this directory.

[00:00:58] Yep there we go. But we don't yet have socket IO. I'm going to install that now.
>> Kevin Whinnery: And socket.io works alongside pretty much every node web framework. It requires an HTTP server instance to do things like serve up the client side interface JavaScript to the browser and a few other bits.

[00:01:27] And I'll show you how to kind of set that up on the on the server side first. If we open this app this is the simple express example that we looked at yesterday that showed us the basics of creating middleware. And in that application, we let express create an HTTP server for us.

[00:01:49] But in this instance we are actually not gonna be doing that. So let's go ahead and require the HTTP module from core node. And we're also going to require the socket IO module. We're actually just gonna create, I'll require that. We'll actually require that here in a A little bit.

[00:02:19] Now instead of calling this in on our express app, after we create our express app, we're gonna create an HTP server. And then we're gonna have that server listen on port 3,000 and this time we'll pass in a little function that's gonna say there are servers running just so we know that it's working fine.

[00:02:54] All right so we have our have our server there. Now that we have our express application set up, we're also going to serve up some static assets so we can see what's happening on the HTML side of things. So we're going to use the built-in express static server.

[00:03:22] And we're gonna serve up the public directory which has yet to be created from within the current directory. So if there's an HTML, CSS, JavaScript other assets, they'll be loaded from this public folder. Here, let me just pull this up.
>> Kevin Whinnery: Once we get that piece all set up, we have our regular old Express app.

[00:04:00] Now we need to, let's maybe start by creating that HTML application next that we'll be using the socket IO stuff on the client side. So we'll create an indexed HTML and we'll just have some some basic. Some basic markup here. Maybe an owner list, which will have our messages.

[00:04:36] And then we'll have a form or maybe even just an input. Type text
>> Kevin Whinnery: And then this is going to be the way in which users are going to interact with our application, by typing in some chat messages. And then we'll have a button,
>> Kevin Whinnery: To actually send that message out to some folks.

[00:05:11] All right, so we have our basic Express app running here. We actually don't need any of this anymore. And if we've done everything correctly, we should have an Express app running. Yeah we already have one running on port 3,000 over here. We should have a server running on port 3,000 that just has a basic HTML U I here that eventually will become a chat application.