Basics you need to know to get started with Socket.io!

SOCKET.IO?

Lets get going from the very basic, very start and define socket.io.

It is basically a library that enables,

low-latency: latency means delay, hence low/negligible delay in the communication where data is frequently updating or changing.
bidirectional: communication happens in both direction between 2 or more parties.
event-based communication: everything is controlled and based on events,

between a client and a server.

Screenshot 2022-11-02 083424.jpg

It is built on top of the WebSocket protocol and provides additional guarantees like a fallback to HTTP long-polling or automatic reconnection.

WebSocket is a communication protocol which provides a full-duplex and low-latency channel between the server and the browser.

HOW DOES IT ACTUALLY WORK?

All it is doing here is simply connecting client to the server, but making the connection stay or persist. Lets review the concept through a diagram.

Lets say we want to make several fetch requests or ajax requests to the server, each one will require a new request hit, as shown below.

SS AWT.jpg

So, we use WebSocket to connect with the server. If we make any number of requests through our WebSocket, still it will need to connect only once, since here connection will stay open.
This is really useful when we need to make multiple smaller requests to the server, since we can constantly communicate with the server, without setting up the connection and tearing down again once the request ends.
Setting up connections and tearing them down can be proven very time-consuming when multiple requests/communication to the server is made, which is where WebSockets come into play!

AWT 2.jpg

DEVELOPMENT

There are 2 ends in the development using socket.io, Client and Server.

SERVER API

Inside the function we are using io.emit() to send a message to all the connected clients. This code will notify when a user connects to the server.

FORMAT

io.on("connection", function(socket) {
 io.emit(“user connected”);
});

If you want to broadcast to everyone except the person who connected you can use socket.broadcast.emit().

CLIENT API

<script type="module">
  import { io } from "https://cdn.socket.io/4.4.1/socket.io.esm.min.js";

  const socket = io();
</script>

Lets build a small demo using these concepts:

Dependencies required:

express
socket.io
ejs
nodemon

We use command in terminal:

npm i express socket.io ejs nodemon

Your File structure should look like,

file structure.jpg

home.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Socket.io</title>
    <script src="https://cdn.socket.io/4.5.3/socket.io.min.js" integrity="sha384-WPFUvHkB1aHA5TDSZi6xtDgkF0wXJcIIxXhC6h8OT8EH3fC5PWro5pWJ1THjcfEi" crossorigin="anonymous"></script>
</head>
<body>

    <input type="text" class="message">
    <button onclick="sendMessage()" >Send Message</button>
    <h1></h1>
    <script>

        const socket = io('http://localhost:3000');

        //event
        socket.on('connection');

        socket.on('message', (data)=> {
            document.querySelector('h1').innerHTML = data;
        })

        const sendMessage = () => {
            const messageInput = document.querySelector('.message');
            const message = messageInput.value;
            console.log("this is a message i clicked" + message)
            socket.emit('message', message);
        }

    </script>

</body>
</html>

index.js --> SERVER

const express = require("express");
const app = express();
const server = require('http').createServer(app);
const io = require("socket.io")(server, {cors: {origin: "*"}});

app.set('view engine', 'ejs');

app.get("/home", (req,res)=> {
    res.render('home')
});

server.listen(3000, ()=> {
    console.log("Server running...");
})

//event emmitter
//each socket is a connection with diff id.
io.on('connection', (socket)=> {

console.log("user connected: " + socket.id);

//event for receiving

socket.on("message", (data) => {
    // console.log(data);

    socket.broadcast.emit("message", data)
})


})

Now, to run the server :

nodemon index.js

We get to see the output as follows:

awt output !!.jpg

Now whenever a request is hit on the URL, a new user with unique id is generated(user enters the room.). If we log the ids we can conclude that each user is identified using unique id.

SS AWT.jpg

FUTURE?

We can observe the stats clearly, popularity of socket.io is quite cohesive,while other libraries are growing more rapidly!

AWT DATA GRAPH.jpg

Basics you need to know to get started with Socket.io!

socket.io, web-sockets, related terminologies and everything! 🔥

Table of contents

SOCKET.IO?

HOW DOES IT ACTUALLY WORK?