Real-Time Updates with Socket.io

In this lesson, we will learn how to implement real-time updates in our To-Do List application using Socket.io. By the end of the lesson, you will be able to set up Socket.io and understand how to send and receive real-time updates. This will allow multiple users to see changes to the to-do list instantly.

In this lesson, you'll learn:

• What Socket.io is and why it's useful
• How to install Socket.io
• Setting up a basic Socket.io server
• Connecting to the Socket.io server from the client
• Sending and receiving real-time updates

Imagine you and your friends are using a shared to-do list, and each time someone adds or removes a task, everyone else can see the changes immediately. This is possible through real-time updates using Socket.io.

Socket.io is a JavaScript library that enables real-time, bidirectional communication between web clients and servers. It consists of two parts: a server-side library for Node.js and a client-side library that runs in the browser. Socket.io allows for event-driven communication and can handle various transport protocols, including WebSockets, to ensure reliable and low-latency updates. This is particularly useful for applications like collaborative tools, real-time analytics, and multiplayer games.

First, we need to install Socket.io on our server. This step is essential because it sets the foundation for all real-time communication.

Open your terminal and run the following command to install Socket.io:

npm install socket.io

Note: For this course, Socket.io is already installed for you.

Next, let's set up the server using Express.js and integrate Socket.io.

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

const PORT = 3000;
const SOCKET_PORT = 3001;

app.use(express.json());

io.on('connection', (socket) => {
    console.log('A user connected');
    
    // We handle disconnections to clean up resources.
    socket.on('disconnect', () => {
        console.log('User disconnected');
    });
});

server.listen(SOCKET_PORT, () => {
    console.log(`Socket.io server running on http://localhost:${SOCKET_PORT}`);
});

app.listen(PORT, () => {
    console.log(`Server running on http://localhost:${PORT}`);
});

In this code:

• We import the necessary modules: express for handling web server operations, http to create an HTTP server that works with Socket.io, and socket.io for enabling real-time communication.
• We create an HTTP server and attach Socket.io to it.
• We use io.on('connection', callback) to handle when users connect. This is important because we need to initialize communication when someone joins.
• We handle disconnections using socket.on('disconnect', callback) to clean up resources when users leave.