Socket communications in a web browser with node.js and socket.io

ArticlesBlog

Written by:


this is a very quick demo of using
sockets in a web browser using node.js and socket.io. I’m going to demonstrate, server to client messaging client to server messaging and server to client and back again messaging, by seanwasere let’s have a look, at what we’ve got here node.js is already pre-installed and i’ve got 2 files, server.js and and index.html. I’ll just show you how they sit in the folder. I’ve already installed socket.io and they are the two files there The files are server.js is pretty much the default of what you get in most of the tutorials and it’s listening on port 80 and it’s going to serve index.html, when you make a request It has a default function on connection and are all commented out and on the index.html i’ve got the same thing i’ve got the bare minimum. socket.io.js script reference and in the script a socket variable and everything else is just commented out. So in the first demonstration im going to call ping which calls a function called ping on the client and there it is ping, ping, it’s just going to write ping to the screen so i’ll save that, and save that Start that up. Ok the server is running now and now i’ll refresh that Ok, the word ping, document dot write line ping there it is, there’s two Control C on the server, un comment that and uncomment that save, save, start ‘er up node is running i’m going to send ping 100 ping 100, there it is So upon connection the server has sent ping 100 to the client function ping wants some data, and there we show the data now we’re gonna try test 3. now we’re going to send a string that string there we’re going to send it to the client save that, start ‘er up up refresh, ok, this is a string, ping, data this is a string. we’ll stop that and then we’ll do test 4 comment that out test 4, i’m sending an object this time using object notation un comment that if i refresh that nothing there, the server is off, server on refresh, ok, myObjectKey. my object value is a string document dot write line ping data dot, myObjectKey and there it is key value pair, key, value it’s all sending data to a client upon connection. Stop that, let’s do test 5 same them now we’re going to send data from a client to the server so we need to set up an event on the event handler on the server and it’s called pong it’s just going to write the word pong, to the console and when the client connects, it’s just going to send the word pong to the function here save those, start up the server refresh, there we go, got the pong so the client sent the word, called that function, upon connection, start up and called that there, and wrote pong lets stop that and do test 6 we are going to send a parameter this time, i’ll show you what that looks like save, save, start ‘er up there we go, now let’s have a look number, test 7 we’ll send an object this time anotherObjectKey it’s called and we are goingto write out anotherObjectKey, save that, save that start server.js, refresh that there we go, pong 102 anotherObjectKey here equals 102 it’s all pretty good. stop the server comment that out, and now we’re going to play ping pong where, when the service, when when the
client connects it will first send a ping, the client will get the ping write it to the screen, and then increment the value, and send it back to the server, as a pong and the server will get the pong, read the data write the data, increase it by a bit, and send it back as a ping and the cycle continues ping pong, ping pong, ping pong, like that let’s try that out, save that first start the server ping pong ping pong ping pong, there we go, look at that, woh, ping pongs that’s pretty quick. that’s running locally so that’s going to be super fast pretty fast. let’s stop that comment that out now lets use setTimeout. Test 9, setTimeout save, save what it will do, upon client connection, it will send a ping, a ping with a 0 at five seconds. Over here on the client, when we get our ping
they get out paying we will write it to the screen, we’ll increment the value and in another five seconds we send a pong back to the server lets have a look at that lets have a look, so in five seconds we should get a ping on the client, here, yep and in another five seconds we’ll get a pong back here with a number 1, there it is. and that’s all now i can keep that going if i just put another setTimeout in i’m just going to reduce the time frame so it happens a bit quicker so every two seconds, there is a, start that up Ok, pong, ping sorry pong ping pong ping pong Ok, let’s just stop that, let’s increment data aswell and send data there alright start ‘er up, refresh ping pong ping pong ping pong now its just going to go forever stop that, im just going to speed that up a bit so there is 1 seconds between each, start that up refresh, ping, pong, ping pong, ping, pong, ping pong, let’s have a look what happens if I
open another browser 127, now we’re playing ping pong with two browsers wow i reckon we should stop that get onto the next test of setInterval and setInterval just means im going to keep sending the ping every two seconds. It’s just going to keep happening. i’ll just make that so you can see it all. and you can pause the video un comment that again, that’s the corresponding client function run it, and refresh, every two seconds this is a ping from the server, there we go. Excellent

6 Replies to “Socket communications in a web browser with node.js and socket.io”

  1. Sunando Samaddar says:

    This is by far one of the best demos out in the internet when it comes to using Socket.IO to tie up a client and a server. Probably the ONLY helpful one.This video is likely to save a lot of time for those who are confused about how to use Socket.IO. Thanks a lot seanwasere youtube for taking time out to make this video! This video is a TIMESAVER, LIFESAVER…you can call it anything you want.

  2. saif alabachi says:

    Hi Five man, i was searching a lot and just now i saw your demo which is the best!!!!!
    I'm trying to track drone movement and send it to the canvas so it draw the path.
    Thanks a lot

  3. madprofessor says:

    Good job bro. Thanks

  4. Thomas Sieber says:

    i want to use socket.io on client-side in an extra javascript file. is that possible?

  5. artnyoga yoganart says:

    thanks

  6. Ulugbek Ahmedov says:

    Thank you

Leave a Reply

Your email address will not be published. Required fields are marked *