In this blog, we will build a real-time Todo application using Node.js and Socket.IO. This app will allow multiple users to collaborate on their todo lists in real time. We will cover all the steps from setting up the environment to deploying the application.

Prerequisites

Before we start, make sure you have the following installed:

• Node.js (v12 or higher)
• NPM (comes with Node.js)
• A basic understanding of JavaScript

Step 1: Setting Up Your Project

First, create a new directory for your project:

mkdir realtime-todo-app
cd realtime-todo-app

Next, initialize a new Node.js project:

npm init -y

Step 2: Installing Dependencies

We will need the following packages:

npm install express socket.io

Step 3: Creating the Server

Create a file named server.js in your project directory. This file will contain our server code:

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);

let todos = [];

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
    console.log('A user connected');

    socket.emit('updateTodos', todos);

    socket.on('addTodo', (todo) => {
        todos.push(todo);
        io.emit('updateTodos', todos);
    });

    socket.on('removeTodo', (index) => {
        todos.splice(index, 1);
        io.emit('updateTodos', todos);
    });

    socket.on('disconnect', () => {
        console.log('User disconnected');
    });
});

const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
});

Step 4: Creating the Frontend

Create an index.html file in your project directory. This file will serve as the frontend for our todo app:

    
    
    
    
    


    
Real-Time Todo App
    
    Add Todo
    

    

Step 5: Running the Application

To run your application, use the following command:

node server.js

Open your browser and go to http://localhost:3000. You should see your Todo app. You can open multiple tabs and add todos to see the real-time updates.

Step 6: Conclusion

Congratulations! You have built a real-time Todo application using Node.js and Socket.IO. This app allows users to collaborate on their todo lists in real time. You can further enhance this application by adding user authentication, data persistence with a database, and more features. Happy coding!