Day 18: How to Send Real-Time Notifications in Node.js Using Socket.IO

This article provides a step-by-step guide on building a real-time notification system in Node.js using WebSockets with Socket.IO. It is perfect for adding live updates, alerts, and interactive features to your web applications.

Introduction

Real-time notifications enhance user experience by providing immediate updates. Using Node.js and Socket.IO, developers can easily implement such features. This tutorial guides you through the process of setting up a basic real-time notification system.

Setting Up Your Project

First, initialize a new Node.js project and install the necessary dependencies:

Create a new directory for your project: mkdir real-time-notifications
Navigate into the directory: cd real-time-notifications
Initialize a new Node.js project: npm init -y
Install Socket.IO and Express: npm install socket.io express

Implementing the Server-Side Code

Create an index.js file to set up your server:

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

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

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

  socket.on('notification', (data) => {
    io.emit('new_notification', data);
  });
});

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

Implementing the Client-Side Code

Create an HTML file (e.g., index.html) to handle client-side interactions:

<!DOCTYPE html>
<html>
<head>
  <title>Real-Time Notifications</title>
</head>
<body>
  <h1>Real-Time Notifications</h1>
  <div id="notifications"></div>
  <script src="https://cdn.socket.io/4.7.0/socket.io.min.js"></script>
  <script>
    const socket = io();

    socket.on('new_notification', (data) => {
      const notificationsDiv = document.getElementById('notifications');
      const notification = document.createElement('p');
      notification.textContent = data.message;
      notificationsDiv.appendChild(notification);
    });

    // Example: Sending a notification after 5 seconds
    setTimeout(() => {
      socket.emit('notification', { message: 'Hello! This is a real-time notification.' });
    }, 5000);
  </script>
</body>
</html>

Testing the Application

Open index.html in your browser. The server should send a notification after 5 seconds, which will then appear on the page.

Conclusion

This tutorial demonstrated how to set up a basic real-time notification system using Node.js and Socket.IO. You can expand this foundation to build more complex and interactive web applications.