Real-Time Web with Node.js Broadcasting Mouse Movement
This course has been updated! We now recommend you take the Complete Intro to Real-Time course.
Transcript from the "Broadcasting Mouse Movement" Lesson
>> Kyle Simpson: Now this next exercise that I'm gonna give you, rather than having you type some stuff. I want you to go ahead and [COUGH] rather than copying 9.html over. [COUGH] I've already provided you in your directory a 10.html. So I want you to open up 10.html.
>> Speaker 2: Kyle.
>> Kyle Simpson: Yes?
>> Speaker 2: There is a question from David W., how well does this scale with hundreds or thousands of concurrent users.
>> Kyle Simpson: Web sockets are designed to scale fantastically well and so is node. But you do not scale them in quite the same way as you scale normal concurrency server with concurrent AJAX types of requests.
[00:00:54] I'm not really a front end ops sort of guy. So I can't really speak to the exact server configurations. But I know that essentially you set up a pool of web socket endpoint servers. Kind of like a load balancing farm, but specifically tuned for web sockets connections. And so you can get somewhere in the neighborhood of 10 to 15,000 concurrent web socket connections on the same box if you have a pretty meaty box.
[00:01:22] So that means if you need to have 100,000 concurrent web socket connections, you're gonna need 10 servers in that farm. And you have a little round robin thing that farms them out to these web sockets. But you establish, when I'm a user and I connect, I establish a persistent connection to one of those web sockets endpoints.
[00:01:42] And then those things usually then turn around to make an internal connection back to your application server either with web sockets or some other communication technology. But that's how, roughly speaking, I understand that we did it when we did it at scale at the game company that I worked at.
[00:01:58] We had about 60 million people on the game at any given time. So they had a server farm of 200 something servers running or something like that. [COUGH]
>> Kyle Simpson: [COUGH] Excuse me. All right, so 10.html, you should notice that it's gonna have a couple of extra things in it.
[00:02:24] I didn't want you to have to write some of this code, but there is here in line 47 some code that you are gonna write. But then let's not deal with 10.html for a moment, let's take 9.server. Go ahead and save that as 10.server.
>> Kyle Simpson: Cuz I do want you to write this part as well.
[00:02:44] [COUGH] And essentially what we're going to do, this is gonna up the creepiness factor of what we've been building which should be kind of fun. What we're gonna build here for looking at the html file, you'll notice I have this little div element here that I call spy_marker.
[00:03:01] And it's a little four by four pixel element that's colored blue. And it's just a div in our page, it's absolutely positioned. So what we've done is we've set ourselves up with the mousemove command. And we're listening, by the way we're gonna pull in jQuery, so I'm going to show you how to load jQuery in just a moment.
[00:03:22] You'll add jQuery by adding in that script tag, but that's already there for you. I'll show you how we enable that on the server side in just a moment. [COUGH] But what we're going to do here is [COUGH] every time the mouse moves, I want for you to wire up.
[00:03:37] Write a line or two of code here for you to send the XY coordinate, the evt.pageX and the evt.pageY coordinate. I want you to send those coordinates off to the server. And then what I want you to do on the server, so you can call that event name whatever you want, you might call it spy.
[00:03:57] But then I want you to come over here to the server and I want you to listen for that event. So, for instance, if you had called it spy, I want you to listen for the spy event. [COUGH] And you might get an x and a y coordinate, or however you do it.
[00:04:14] And I want you to broadcast that back out to the other connected users.
>> Kyle Simpson: The other thing we're gonna do is we need to set ourselves up an exception to our routing roles that allows us to do static file serving of these helper utilities like the jQuery.js. So I'm gonna say else if [COUGH] reg.url === /jquery.js.
[00:04:58] Then I want you to go ahead and do a static file surf.
>> Kyle Simpson: [COUGH]
>> Kyle Simpson: So what you need to do is write this line of code that allows you to listen, all right, allows you to emit the x and y coordinates off to the server.
>> Kyle Simpson: And I'll give you two or three minutes to do that.
>> Kyle Simpson: All right, if we are to attempt to write line 47. You should have come up with something roughly similar to line 47. I'm gonna call socket.emit, my name of my event which I decided to call spy. I'm gonna pass along the page X and the page Y coordinates of the mouse cursor.
[00:06:02] That should already start to feel little bit creepy. [LAUGH] But now if we go to our command line we stop the 9.server instance and we start up 10.server instance.
>> Kyle Simpson: [COUGH] And then we load up 10 in our browsers.
>> Kyle Simpson: Now all of a sudden as I, uh-oh, something must not be working.
>> Kyle Simpson: We double check, what did I do wrong?
>> Kyle Simpson: [COUGH]
>> Kyle Simpson: Did it not load correctly?
>> Kyle Simpson: No, it loaded correctly.
>> Speaker 3: When jQuery was loading.
>> Kyle Simpson: I thought so.
>> Speaker 3: Is it you have a overwriting what you expect to.
>> Kyle Simpson: I'm not listening for the spy event yet, that's the problem.
[00:07:47] I forgot that we had to do that, sorry about that. We have to listen for the spy event from the server obviously and call our spy function. So now when I refresh the page, you should start to see. Come on, what's it not doing right? The beauties of live coding, right?
>> Kyle Simpson: I know what's wrong, okay. We gotta come back to our server, because my HTML was assuming an object with both properties in it. And I was trying to send them as two separate ones. So it's easy to fix, we just send it along as x and y as y, sorry about that.
[00:08:50] [COUGH] So if we stop our server and restart it, hopefully that's the final bug.
>> Kyle Simpson: And now as you can see, as I move my mouse cursor on the right, I'm spying on the person's mouse position in the left. And the same is true over here as I move the mouse cursor around, you can see where it moves the mouse cursor.