Real-Time Web with Node.js Real-Time Web with Node.js

Sending Messages

Kyle Simpson
You Don't Know JS
Check out a free preview of the full Real-Time Web with Node.js course:
The "Sending Messages" Lesson is part of the full, Real-Time Web with Node.js course featured in this preview video. Here's what you'd learn in this lesson:

Kyle tasks the audience with adding a setInterval method that will transmit a message to any client connected to the socket. He uses the emit() method to send the message.

Get Unlimited Access Now

Transcript from the "Sending Messages" Lesson

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

[00:00:04]
>> Kyle: We've established ourselves as a socket IO but I wanna do one other thing, because having a socket connection isn't interesting if we're not doing anything with it. So, what I'm going to leave you a couple of minutes to try yourself is, I want you, and there's some hints if you wanted to look at the code, but what I want you to do is set yourself up an interval, calling set interval like I show here.

[00:00:29] Set yourself up an interval on your server that sends an event out to the client every second. And the event that it sends is it's gonna send out a message, okay? So the way that we would do that inside of our connection handler, we can say, set. Let's save our interval so that we can kill it later, setInterval.

[00:00:57] SetInterval is a lot like set timeout, except it keeps going every second. When we disconnect, we wanna clear that interval. So intv, clear that interval. But every second what we wanna do is say, socket.emit. And it doesn't really matter what you call the event name, but I'm gonna call the event name Hello.

[00:01:21] And I'm gonna send out a random number.
>> Kyle: So now your task is, how would you listen for that event on the client and print it out to the DOM page? So notice, there's nothing being printed anymore. You might wanna put yourself a paragraph tag with an [COUGH] ID [COUGH] of hello.

[00:01:56]
>> Kyle: And I want you to wire yourself up a listener here that listens for that event being sent out, and every time it gets that number, it updates it in the paragraph tag.
>> Kyle: So I'll give you about two minutes to try your hand at that.
>> Kyle: Here's how I would do it.

[00:02:18] [COUGH] We need to listen for that hello event. So we're gonna say socket.on, listen for the hello event, call a function. That function is going to receive our random number as its data. Then I can do document.getElementById. And I'm only doing that because I don't have jQuery in here yet.

[00:02:43] But we'll import jQuery pretty soon. So I'm gonna do that paragraph tag that I added. And I'm gonna set its innerText to be Hello World plus the number that you just passed me.
>> Kyle: So everybody see how I did that?
>> Kyle: So now I'm gonna restart my server, 8.server.js.

[00:03:23]
>> Kyle: Oops.
>> Speaker 2: InnerText is [INAUDIBLE]
>> Kyle: That's right, I meant innerHTML, cuz innerText isn't even cross browser.
>> Kyle: Thank you. Don't need to restart the server, just refresh the page. And there we get each second it updates our paragraph time.
>> Kyle: Are you guys seeing something roughly like that?

[00:04:01]
>> Kyle: Now you're writing web socket code. You started out the day never having written any node code at all and now you're writing web socket code. That should be pretty cool. But it's still kind of trivial stuff because we're still only having one way communication. This is the server pushing us messages.

[00:04:18] Wouldn't it be interesting if we could set ourselves up so that we could do two way communications? And not only two way communications, but how about communications between multiple connected clients? So that's where we're headed next.
>> Kyle: I'm gonna stop my server for the moment. And you'll notice when I stop my server, it immediately starts complaining here in the browser.