Imagine you're having a conversation with a friend through text messages on your phone. Normally, when you send a message, your friend receives it and then sends a reply back. This is how regular web communication works too, like when you load a webpage and it sends a request to a server, which then sends back the webpage you requested.

Now, think of web sockets as a way for your phone and your friend's phone to stay connected constantly, like a phone call that never ends. With web sockets, instead of sending a message and waiting for a reply each time, your phone and your friend's phone are always connected, so you can send messages back and forth instantly, without having to wait for a reply every time.

This constant connection allows for real-time communication between your browser (or any other client) and a server. It's like a continuous, two-way street where data can flow freely, making it perfect for things like live chat on websites, online gaming, or any other application where real-time updates are needed.

Why WEBSOCKETS?

Real-time Updates: Web sockets allow for real-time communication between a web browser (or any other client) and a server. This means you can instantly receive updates or messages without needing to refresh the webpage. It's great for applications like live chat, real-time collaboration tools, or online gaming where immediate updates are important.
Reduced Latency: Compared to traditional HTTP requests where the client needs to send a request and wait for a response, web sockets keep a persistent connection open. This reduces the latency (the delay between sending a request and receiving a response), resulting in faster communication between the client and server.
Efficient Communication: Web sockets use a lightweight protocol, which means they have less overhead compared to other methods of real-time communication like long-polling or server-sent events. This makes them more efficient for sending and receiving small amounts of data quickly.
Bi-Directional Communication: Unlike HTTP, which is mainly client-initiated (the client sends a request and the server responds), web sockets allow for bi-directional communication. This means both the client and server can send messages to each other at any time, enabling more interactive and dynamic applications.
Scalability: Web sockets are designed to handle a large number of concurrent connections efficiently. This makes them suitable for building scalable applications that need to support many users simultaneously.

SIMPLE CHAT APPLICATION

//Server.js
const WebSocket = require("ws");
const express = require("express");

const app = express();

const wss = new WebSocket.Server({ port: 3001 });

wss.on('connection', client => {
    client.on('message', message => {
        wss.clients.forEach(ws => {
            if (ws !== client && ws.readyState === WebSocket.OPEN) {
                ws.send(message);
            }
        });
    });
});

const server = app.listen(3002, () => {
    console.log('Server started on port 3002.');
    console.log('WebSocket server running on port 3001.');
});

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            font-family: 'Poppins', sans-serif;
        }
        .message-row {
            margin-bottom: 10px;
        }
        .bubble {
            padding: 5px 10px;
            border-radius: 10px;
            display: inline-block;
            max-width: 80%;
        }
        .mine {
            background-color: lightblue;
            align-self: flex-end;
            text-align: right;
        }
        .theirs {
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div id="messages"></div>
    <form id="messageForm">
        <input type="text" id="messageInput" placeholder="Your message...">
        <button type="submit">Send</button>
    </form>

    <script>
        function showMessage(text, isMine = false){
            document.getElementById("messages").innerHTML += `
                <div class="message-row ${isMine ? 'mine' : 'theirs'}">
                    <div class="bubble">${text}</div>
                </div>
            `;
        }

        const ws = new WebSocket('ws://localhost:3001');
        ws.addEventListener('message', ev => {
            ev.data.text().then(text => {
                showMessage(text, false); // assuming received message is not mine
            });
        });

        document.getElementById("messageForm").addEventListener("submit", function(event) {
            event.preventDefault();
            const messageInput = document.getElementById("messageInput");
            const message = messageInput.value;
            showMessage(message, true); // assuming message sent is mine
            ws.send(message);
            messageInput.value = ""; // clear input field after sending message
        });
    </script>
</body>
</html>

Explain WEBSOCKETS to a kid

Why WEBSOCKETS?

SIMPLE CHAT APPLICATION

Did you find this article valuable?