Building a Real-Time Todo Application with Node.js and Socket.IO
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
body { font-family: Arial, sans-serif; }
ul { list-style-type: none; padding: 0; }
li { margin: 5px 0; }
Real-Time Todo App
Add Todo
const socket = io();
const todoInput = document.getElementById('todoInput');
const addTodoButton = document.getElementById('addTodo');
const todoList = document.getElementById('todoList');
addTodoButton.addEventListener('click', () => {
const todo = todoInput.value;
socket.emit('addTodo', todo);
todoInput.value = '';
});
socket.on('updateTodos', (todos) => {
todoList.innerHTML = '';
todos.forEach((todo, index) => {
const li = document.createElement('li');
li.textContent = todo;
const removeButton = document.createElement('button');
removeButton.textContent = 'Remove';
removeButton.onclick = () => socket.emit('removeTodo', index);
li.appendChild(removeButton);
todoList.appendChild(li);
});
});
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!
0 Comments:
Leave a Reply