Socket.IO Tutorial - What it's for and how to use

Socket.IO Tutorial

Welcome to this Socket.IO tutorial, which will teach you how to use the library.

Why it's useful

Socket.IO is a JavaScript library for communication between web clients and servers in real time. It can be used to make multiplayer games. My chat project, connect 4 game, video conferencing app, and multiplayer pong game all used Socket.IO.

Content

Sending a message in client and server
Recieving a message in client and server
Socket IDs
Rooms
Different ways to send messages

We'll be using Express for the server. I'll be explaining a lot of the code with comments.

Sending/recieving a message in client and server

Let's start by creating a Node.js repl. Then insert the following code:


const express = require("express"); // use express
const app = express(); // create instance of express
const server = require("http").Server(app); // create server
const io = require("socket.io")(server); // create instance of socketio

app.use(express.static("public")); // use "public" directory for static files

io.on("connection", socket => {
  socket.on("joined", () => { // when server recieves the "joined" message
    io.emit("joined"); // send message to client
  });
  socket.on("disconnect", () => { // when someone closes the tab
    io.emit("leave");
  });
});

server.listen(3000); // run server

Once you run the code, Replit will install packages. Then you'll see a page that says Cannot GET /, because we haven't added any pages yet.

Remember, you use socket.on to recieve a message, and socket.emit to send a message.

Next, create a new folder called public, and in the folder, create a file called index.html and a file called script.js.

In public/index.html add this:


<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <script src="/socket.io/socket.io.js"></script> <!-- use the library -->
    <script src="/script.js"></script> <!-- use "script.js" file --> 
  </body>
</html>

And in public/script.js add this code:


const socket = io(); // create new instance
socket.emit("joined"); // tell server that someone opened the page

socket.on("joined", () => { // when server tells client that someone has opened the page
  alert("someone joined");
});
socket.on("leave", () => {
  alert("someone left"); // when server tells client that someone has closed the page
});

Now, to test it, open the website. It should show a popup saying someone joined. Then open the website again in another tab to make sure that the socket.on works in the first tab. In both tabs, it should say someone joined. When you close one of the tabs, the other tab should say someone left.

Yay! We've made a really simple multiplayer website!

But what if we wanted to pass in values, and the client that recieved the message also recieves the value? Well, lucky for us, it's super easy in Socket.IO. If we wanted to use socket.emit or io.emit to pass in a variable, you could just pass in more arguments:


socket.emit("number", 10);


io.emit("number", 10);

And to recieve the message, you would do:


socket.on("number", number => {
  // do something here
});

You can add as many arguments as you would like:


// send message
socket.emit("numbers", 1, 2, 3);
// recieve message
socket.on("numbers", (number1, number2, number3) => {
  // do something with the variables
});

Socket IDs

A socket ID is a identifier of 20 random characters, for example 7CFGPYjHt_Qk7JMBAAAL. Socket IDs are useful if you wanted to keep track of users online, or if you wanted to send a message to just one user.

To get the ID, you would do something like this:


var id = socket.id;

If you used socket.id in the client, it would return their Socket ID. If you used socket.id in the server, it would return the Socket ID of the client that sent a message.

To send a message from the server to just one client, you would do this:


io.to("SOCKETID").emit("message", "value");

Rooms

Socket.IO rooms make it easy for you implement rooms in a website. All of my projects mentioned at the start of this tutorial had rooms.

To join a room, you would use this code in the server:


socket.join("ROOM")

And to leave a room:


socket.leave("ROOM");

To send a message to all clients in a room you would do this:


io.to("ROOM").emit("message", "value");

Let's try making our repl allow people to enter their names and join rooms.

In index.js:


const express = require("express"); // use express
const app = express(); // create instance of express
const server = require("http").Server(app); // create server
const io = require("socket.io")(server); // create instance of socketio

app.use(express.static("public")); // use "public" directory for static files
const users = {}; // create dictionary of users and their socket ids

io.on("connection", socket => {
  socket.on("joined", (username, room) => { // when server recieves the "joined" message
    socket.join(room); // join the room
    io.to(room).emit("joined", username); // tell the clients in the room that someone has joined
    users[socket.id] = {username:username,room:room}; // add user to dictionary
    console.log(users);
  });
  socket.on("disconnect", () => { // when someone closes the tab
    let username = users[socket.id]["username"]; // get username of user
    let room = users[socket.id]["room"] // get room the user was in
    io.to(room).emit("leave", username); // tell the clients in the room that someone has left
    delete users[socket.id]; // remove user from dictionary
    console.log(users);
  });
});

server.listen(3000); // run server

In public/index.html, it's the same as before. And in
public/script.js:


const socket = io(); // create new instance
const username = prompt("enter name:"); // ask for the user's name
const room = prompt("enter the room:"); // ask for what room the user wants to go

socket.emit("joined", username, room); // tell server the username and room of the person who joined

socket.on("joined", user => { // when server tells client that someone has joined
  alert(user + " joined");
});

socket.on("leave", user => { // when server tells client that someone has left
  alert(user + " left");
});

Different ways to send messages

Here are the ways you can send a message from the server to the client:


// sending to sender only
socket.emit("message", "value");

// sending to all clients, including sender
io.emit("message", "value");

// sending to all clients except sender
socket.broadcast.emit("message", "value");

// sending to all clients in room except sender
socket.broadcast.to("ROOM").emit("message", "value");

// sending to all clients in room including sender
io.to("ROOM").emit("message", "value");

// sending to sender only if they are in the room
socket.to("ROOM").emit("message", "value");

// sending to individual Socket ID
socket.broadcast.to("SOCKETID").emit("message", "value");

This tutorial has come to an end, and I hope you learned something!

Bye!

Voters

49 more...

Comments

hot new top

What’s up with all these high quality tutorials recently on RT? Nice post!

thanks!

Nice!

thanks

What's the deal with all the high-quality tutorials that have been posted recently on RT? Very nice post! https://www.ditrc.com/cms/recruitment-agencies-for-qatar


I recommend you a wonderful site reports that will help you write any written work.

https://www.rapidfs.run/

Nice tutorial!

thanks

This is awesome except for this single part:


const express = require("express");
const app = express();
const server = require("http").Server(app);
const io = require("socket.io")(server);

I don't see any explanations for arguably the most important piece of code in the entire program.

added

yay! ok here's your updoot.

lol thanks

Thanks for sharing this tutorial!

Is this like web socket?

Maybe you can explain some of the code. Otherwise it's pretty good

i did, i explained it in the comments. they start with //

Oh, I see.

Not Bad

lol does that mean it's good or it's okay?

decent

Cool

So you can make multiplayer games with socket.io?

yes

Awesome, I learned a lot!

thx :)

Techies are never bored of using Whatsapp but now are charming the new version of WhatsApp . Lets check the new version of WhatsApp this 2023. It is not possible that you are having a smartphone and you aren’t aware of WhatsApp.As it is the most common chatting & calling app with over 100 million users worldwide. It is a good medium to connect with anyone all over the world. WhatsApp is among those apps we install first on a brand new smartphone because it is a well managed messaging app with a great user interface and fabulous features. (GB WhatsApp) But when it comes to WhatsApp Plus there are some restrictions which can be overcome by using WhatsApp Mods ! GBWhatsApp is the most famous WA Mod loved & trusted by millions of users. GBWhatsApp app, WhatsApp Plus came With most interesting and amazing features, These are the modified version of official whatsapp that comes with extra features, mods, tweaks and much more interesting than before which are necessary for better use. Many whatsapp mods are available online beyond them Whatsapp Plus is always the first choice of users due to its popularity & the exciting features it has. It was launched years ago, but it is still updated monthly by its development team. Most android geeks choose GBWhatsApp over official built & all other whatsapp mods as it is also the most trusted & rated mod seeing the downloads & its massive fan following Get the latest version of Whatsapp mods. download GB WhatsApp & Whatsapp Plus APK from mrbass.org.

It helped me on a current project, thank you!
https://mycardstatement.buzz/

Great

Thank you so much for sharing this info which really helpful to solve my issue...
retro bowl

Thank you for your sharing, It is exactly what I was looking for slope 2

Thanks for taking the time to share your findings - much appreciated!
I would like to recommend a game play solitaire, which is a great game you can enjoy

Excuse me, but could you tell me how to make the repl forever on? I use uptimeRobot to do the ping part, but the code to receive this ping? (server.js or something?) Please add it

It's really not easy to find this information, it's worth a lot of gold, thank you for everything. I would like to recommend the football legends game, which is a great game that I'm playing these days, to you.

This is a great post. I like this topic. I found many interesting things from this site. Thanks for posting this again.https://www.mycardstatement.biz/

I get an error when I run 'const socket = io();' it says it is not a function!! Any help??

cool and good

This is really useful, thanks

Under the same government initiative comes the provision of free government phone stands

I really appreciated this piece. I often think of how much of a time suck and a mental drain diving into comment conversations can be. But sometimes it is worth it. At the end of the day, it's important to assert oneself and to attempt to have discussions about what matters to you.
https://www.rapidfs.org/

Your article content is being very much interested, I am very impressed with your post. I hope to receive more great posts..
https://www.expresshr.me/

what are the value and message parameters? is the message the actual text? and if so what is value for then?

Socket.IO is a library that enables real-time, bidirectional and event-based communication between the browser and the server. It consists of: a Node.

Can you send a message from a client to another client, or can clients only send messages to the server?

You could make a client send a message to the server, and then the server sends it to the other clients. I don't think that you can send a message from a client to another client.

What does socket.emit do? Does it just print the text on the webpage?

lol of course not, it sends a message to the server

Ok.