This course has been updated! We now recommend you take the AWS for Front-End Engineers (ft. S3, Cloudfront & Route 53) course.
Transcript from the "Chat Application Code Demo Part 2" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Kevin Whinnery: Now we're ready to start adding in the Socket.IO pieces. So on the server, we're going to create the Socket.IO object that's gonna allow us to manage incoming web socket connections. So we're gonna create this IO object by requiring a Socket.IO,
>> Kevin Whinnery: And then to that we're gonna pass in the HTTP server that we just created.
[00:00:32] And that's gonna allow Socket.IO serve up our, the client side JavaScript that will be using here in a second in addition to a few other bits. And I, next with that IO object we're going to be listening for a connection event. So whenever a new web socket connects this function is going to be called with that socket.
[00:00:59]
>> Kevin Whinnery: So, for now I'll just console that log,
>> Kevin Whinnery: So I can connect it. And we'll start doing some more interesting stuff with that socket here in a minute. So that is the server side component. Now on the client side because though one of the things Socket.IO provides us is like a dynamic script tag.
[00:01:28] So this route that I'm about to type in the source here is actually gonna be generated by Socket.IO. Cuz this isn't a route that we created, so it's just gonna be socket.io/socket.io.js. That's gonna load up a Socket.IO JavaScript object for us to start working with on the client side.
[00:01:51] And then in my script tag here, this is where we'll write all the logic for our chat application. I'm just gonna create a new instance of Socket.IO here on the client as well. We'll just call that socket and then we'll use the Windows scoped.IO object to initialize it which is what we get when we include that script tag.
[00:02:15] So I'll save that up, and I'll kill my server and I'll actually run the script with nodemon so we don't have to restart it every time.
>> Kevin Whinnery: And if we refresh the page, go back out here, we should have our message, that the socket was connected. So now we have a connection between the client and the server.
[00:02:36] And now we can start doing something some interesting stuff with it. So,
>> Kevin Whinnery: The first bit that I think we'll do, we'll start off on the client side. We can use the client side socket connection to emit events that will be received on the server. So I'm gonna say socket.emit('message').
[00:03:01] And in addition at Socket.IO, maybe I'll just for good measure, grab a version of jQuery to help me grab some stuff out of the dom. So for that message, I'm gonna actually grab the current value of the,
>> Kevin Whinnery: Yeah, the current value of the of the form field.
[00:03:21] So I'm going to emit a message and then, so the message is kind of the event that other sockets can listen for and the server can listen for. And the second argument is essentially the data value that you wanna send along with it. So for the input of the chat,
[00:03:43]
>> Kevin Whinnery: Object, I'm just gonna grab the current value of that. And that's gonna be enough logic to emit the current value of that. We also wanna wrap that in an event handler. So we have that send button, so on a click.
>> Kevin Whinnery: That's when we want to grab the current value of that.
[00:04:13] And we'll emit that value back to the server. And then we'll also reset the value of like our local chat box back to no. So that'll be kind of the send part of the equation here, and then back on the server to actually listen for that incoming event.
[00:04:38] We're gonna listen for an event on that socket object that we get when somebody connects to the server. So when that socket receives a message event,
>> Kevin Whinnery: We are going to execute this logic on the server and for now we'll just acknowledge that we got it by writing that out to the console.
[00:05:11]
>> Kevin Whinnery: And again if everything went according to plan, we'll send some messages. And hopefully out here, no! Missing handler console is not a function. Oops yeah, console.log that would be a more effective thing to try.
>> Kevin Whinnery: So we'll send that.
>> Kevin Whinnery: And then here we go, we have some messages being emitted in real time from the client to the server.
[00:05:48] Now we've implemented one half of this but what we haven't done is send this out to any other connected client. So, what we can do when we want to send a message to every other socket that's currently connected is use the IO object. This guy that we created here and use a method called emit to fire off a message on that object that will be received by every client so.
[00:06:24] It's very similar actually to what we did on the client side emitting that event. So we're going to emit, a message event, and then we'll pass in, I will just relay that message that we just got.
>> Kevin Whinnery: All right so, now after we emit that to every connected socket up here on the client, we're gonna have another event handler here so on that message event.
[00:07:03]
>> Kevin Whinnery: This is going to be fired every time a message event is emitted from the server. And what we wanna do is on that unordered list that we had, just append a list item to it.
>> Kevin Whinnery: So for that, what do we call that messages. We'll actually start by creating an li,
[00:07:32]
>> Kevin Whinnery: Oops li=. Create li item and we'll set the text of that to be the message that we got back from the server. And then we will append that list item to the messages.
>> Kevin Whinnery: So now what should be happening is we'll emit a message from the client, it will be received on the server, and then the server will emit that message back to every other connected client.
[00:08:04] So let's reload and see if that is indeed what we experience.
>> Kevin Whinnery: So looks like we have a very crappy real time chat application running in the browser. And now one other tool that is a constant companion for me, and for many other developers that work with web hooks or have to expose their local development machines to the Internet is a little tool called ngrok.
[00:08:38] And ngrok basically allows my laptop to get a a publicly addressable URL on the Internet. So this'll allow all of you to test my application along with me. So this tool I'll call ngrok http and we'll want to expose port 3,000. And then I'll reserve the subdomain of frontendmasters.
[00:09:11] So now, if you go to frontendmasters.ngrok.io,
>> Kevin Whinnery: We should see that interface that we just saw.
>> Kevin Whinnery: And I'll start sending some messages. And hopefully some of you out there will start sending some messages back to us as well. Try to keep it PG13, this is a family show.
[00:09:38] All right, so we got some folks coming in here. So there we have, again, the magic of Socket.IO for all to see. Certainly that I'm sure folks have seen before. But in just a tiny amount of code, a few lines in the client. A few lines on the server, we are able to create this real time interface for our application.