Implementing Real-Time Notifications in Web Applications with WebSockets and Node.js

Real-time notifications enhance the user experience by instantly updating users with relevant information without needing a refresh. WebSockets, combined with Node.js, are commonly used for implementing real-time communication, providing a bi-directional communication channel between the server and client.

1. Introduction to WebSockets

WebSockets enable a persistent, two-way connection between a client and a server, allowing both to send messages at any time. This technology is ideal for real-time features like notifications, chats, and collaborative tools.

2. Setting Up a Basic WebSocket Server with Node.js

We’ll start by creating a WebSocket server in Node.js. For this example, we’ll use the WebSocket library.

2.1 Example Code: Setting Up WebSocket Server

  // server.js
  const WebSocket = require('ws');
  const wss = new WebSocket.Server({ port: 8080 });
  
  wss.on('connection', (ws) => {
    console.log('Client connected');
    
    ws.on('message', (message) => {
      console.log('Received:', message);
      // Broadcasting the message to all connected clients
      wss.clients.forEach((client) => {
        if (client.readyState === WebSocket.OPEN) {
          client.send(message);
        }
      });
    });
    
    ws.on('close', () => {
      console.log('Client disconnected');
    });
  });
  
  console.log('WebSocket server is running on ws://localhost:8080');
      

3. Creating a WebSocket Client

To test our WebSocket server, let’s create a simple client that connects and listens for messages from the server.

3.1 Example Code: WebSocket Client

  // client.js
  const socket = new WebSocket('ws://localhost:8080');
  
  socket.addEventListener('open', () => {
    console.log('Connected to WebSocket server');
    socket.send('Hello Server!');
  });
  
  socket.addEventListener('message', (event) => {
    console.log('Message from server:', event.data);
  });
  
  socket.addEventListener('close', () => {
    console.log('Disconnected from server');
  });
      

4. Integrating Notifications into a Web Application

Now, let’s integrate notifications into a web application. We’ll use WebSockets to alert users when a new notification is received on the server.

4.1 Example Code: Notification System

  // notificationServer.js (server-side)
  const WebSocket = require('ws');
  const wss = new WebSocket.Server({ port: 8080 });
  
  const sendNotification = (data) => {
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(JSON.stringify(data));
      }
    });
  };
  
  wss.on('connection', (ws) => {
    ws.on('message', (message) => {
      console.log('Received:', message);
    });
  });
  
  // Simulate sending a notification every 10 seconds
  setInterval(() => {
    const notification = { title: 'New Message', message: 'You have a new message!' };
    sendNotification(notification);
  }, 10000);
      

  // index.html after body tag (client-side) 
 
    const socket = new WebSocket('ws://localhost:8080');
    const notificationArea = document.getElementById('notification-area');

    socket.addEventListener('message', (event) => {
      const notification = JSON.parse(event.data);
      const notificationItem = document.createElement('div');
      notificationItem.textContent = `${notification.title}: ${notification.message}`;
      notificationArea.appendChild(notificationItem);
    });
  

5. Securing WebSocket Connections

For production applications, securing WebSocket connections is essential. Some best practices include using wss:// for encrypted communication, validating users, and authenticating clients with tokens.

6. Conclusion

WebSockets provide a powerful way to implement real-time notifications in web applications. By setting up a WebSocket server with Node.js and connecting a client, we can build responsive, interactive user experiences.