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

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

Socket.IO Tutorial.css-1q3m8ps{margin-left:var(--space-4);margin-right:var(--space-4);display:none;}

Why it's useful.css-1q3m8ps{margin-left:var(--space-4);margin-right:var(--space-4);display:none;}

Content.css-1q3m8ps{margin-left:var(--space-4);margin-right:var(--space-4);display:none;}

Sending/recieving a message in client and server.css-1q3m8ps{margin-left:var(--space-4);margin-right:var(--space-4);display:none;}

Socket IDs.css-1q3m8ps{margin-left:var(--space-4);margin-right:var(--space-4);display:none;}

Rooms.css-1q3m8ps{margin-left:var(--space-4);margin-right:var(--space-4);display:none;}

Different ways to send messages.css-1q3m8ps{margin-left:var(--space-4);margin-right:var(--space-4);display:none;}

Bye!.css-1q3m8ps{margin-left:var(--space-4);margin-right:var(--space-4);display:none;}

Comments