This course has been updated! We now recommend you take the Complete Intro to Real-Time course.
Transcript from the "User-Triggered Messaging" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Kyle Simpson: We're gonna do a save as and we're gonna go to 9.server.js
>> Kyle Simpson: And we're gonna go to 9.server.js, and we're going to go to 9.html, make sure to update your headers. Okay. Now what I want you to do is you're going to leave the hello stuff alone.
[00:00:31] Don't touch that plumbing, but I want you to add some additional stuff, and we're gonna see whether or not I can just give you some instructions and see how well you can try to figure this out. What I want you to do is I want you to add input box, text box to your page that somebody could type some text into, and I want you to add a button that you can click to submit that text.
[00:00:58] And I want you to add a div or some paragraph element that can receive messages from the web sockets, okay? So, that's your task for your HTML. And then once you have that added, I want you to wire up some logic that allows you, let me double check and see if this is when we should bring in jQuery, I can't remember which level we brought jQuery into, not yet, still got to do it yourself, but it's not that hard.
[00:01:33] [COUGH] You're gonna wire up the event, so that when somebody clicks that button, that it will submit the text back to the server. So it'll send the web socket event to the server, and then once you have that running, I'll show you how to do the server side of it so that you can broadcast that message back up.
[00:01:56] So, I'll give you guys a couple minutes to work on the HTML side of it, but your goal is to be able to send and receive a WebSocket message that has things that people have typed into that input box.
>> Kyle Simpson: We'll give you maybe seven minutes to try that out.
[00:07:34]
>> Kyle Simpson: [COUGH]
>> Kyle Simpson: All right, again there is many different ways to approach this, but I'm just gonna [COUGH] take a simple little approach to it. So, I'm going to leave my little paragraph that handles my numbers alone, my hello messages alone. I'm going to create an input box which I will give the id of typeit, and then I'll have a button, which I give the ID of send it.
[00:08:29] And, then I'll have a div, which I give the ID of messages. Down here in my script code, I'll say document.getElementById, send it .addEventListener. It's always painful when we have to do this without JavaScript libraries to help us. The click handler [COUGH] and then my function.
>> Kyle Simpson: Okay, we want, whenever you click send it, if, let's pull it, let's figure out what the value is in the type it input box, so equals Document.getElementById type it.value.
[00:09:46] So if we have something that has been typed there, we want to do socket.emit, type it with the value that message that's been sent. We also want to.
>> Kyle Simpson: Get the messages div, and add our message on to it. So, we'll say innerHTML plus equals.
>> Kyle Simpson: And then finally, we wanna say document.getElementById typeit, and set the value to empty in the input box.
[00:10:46] So, that's gonna take care of sending it up to the server.
>> Kyle Simpson: Now, we wanna listen for those messages from other connected clients. So, we wanna listen for the messages event, for instance.
>> Kyle Simpson: And whenever we receive that event, we wanna do something very similar here.
>> Kyle Simpson: [COUGH] Does everybody see how I got that?
[00:11:25] Did you get something roughly similar?
>> Kyle Simpson: I forgot in my little input I need to give it a label, so my value here is send a message for instance. Okay, let's change the server, I'm sorry, what?
>> Student 1: The ID of Davis message, not messages, because that's what you're referring to, right?
[00:11:59]
>> Kyle Simpson: Good point. I mean to call it messages. [BLACK_AUDIO] All right, now on the server, this actually going to turn out to be really kind of stupid, simple to do. All right, so, we need to listen for socket.on, what's our event name? Typeit.
>> Kyle Simpson: Where we're gonna receive a message from the browser.
[00:12:26] Now, we wanna basically send this out to everybody else that's connected, not everybody [COUGH] because the one who wrote it already has their copy of the message. So, we want to send it out to everybody else, and that is called a broadcast. So, if we say socket.broadcast.emit message.
[00:12:51] Did I call it message, or messages? Messages, msg.
>> Kyle Simpson: That's it, that's all it takes to broadcast a message out to everybody else.
>> Student 2: So, socket io knows not to send it to the one?
>> Kyle Simpson: If you say socket.broadcasts like I did there on line 32, it's automatic behavior is that it will send it to everybody else.
[00:13:18] If you want to send a message to everybody, including the current one, you would instead do IO.broadcast.
>> Kyle Simpson: But when we say socket.broadcast, it knows, broadcasts to everybody except for this current connected socket.
>> Kyle Simpson: Okay, let's start up our 9.server.js. When it come to the browser, and I'm gonna shrink my window, cuz now I want to have two windows open at the same time.
[00:14:01]
>> Kyle Simpson: Side by side, and the first one I'm gonna load /9
>> Kyle Simpson: And then I'm going to load up a second connected version of it. So, you notice that these two are getting different messages in terms of their random numbers, and that's on purpose. Because each different connected socket has its own interval running, they're running at different times, and they're getting different messages.
[00:14:34] But when we want to create the synchronicity between two clients, if I say hello and I click send message, if I haven't created an error, we should see hello show up in both places. And then if I'm over here and I type in world, everybody gets that message right away.
[00:14:53]
>> Kyle Simpson: So yeah, we've just created a very simple stupid IRC client. [LAUGH] It's a chat client. Okay. See how easy that was? It was only a couple of lines of code to create a chat client. Now, there's fantastically more complexity to real applications, obviously we're glossing over a lot.
[00:15:10] We're not doing any validation of what you're sending in. You could be sending it in HTML tags to do cross site scripting or whatever. So there's [COUGH] there's more logic to it in terms of actual production apps, but the real core underlying thing is that we've set up real time communications.
[00:15:29] Now, when I type in a message and you see it show up, you see it practically immediately, and it would be easy for you to think well, that's just because on a same machine. If I were to deploy this server out into the real world on a server in a different state, and I were to run this, it would still appear basically instantaneous to you.
[00:15:48] And the reason for that is, in general, web sockets are gonna be anywhere from 50 to 100 milliseconds of latency. And what we know from user experience testing is that most users are not able to distinguish less than 100 milliseconds as a difference between that and instantaneous. Just happens too fast for us to visually process it and understand that it's anything different than instantaneous.
[00:16:13] So, if the update takes 50 milliseconds to update, most users aren't even gonna know that it was any different than immediate, which is pretty cool because that's way faster and way more near the real time than we ever could have gotten with AJAX in the same scenario.