How to Send Data from the Backend to the Frontend Upon Updates?

How do I send updated data from the backend to the frontend when changes occur?

// Example of using WebSockets to update frontend with backend changes
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  console.log('Client connected');

  // Whenever data is updated in the backend
  function sendUpdate(data) {
    ws.send(JSON.stringify(data));
  }

  // Example function to simulate data updates
  setInterval(() => {
    const updatedData = { message: 'Data updated!', timestamp: new Date() };
    sendUpdate(updatedData);
  }, 5000);
});

Sending updated data from the backend to the frontend is critical for maintaining real-time interactions in applications. Various techniques can be employed to accomplish this task, including WebSockets, Server-Sent Events (SSE), or by using frameworks that support reactive programming.

// Utilizing Server-Sent Events
const express = require('express');
const app = express();
const PORT = 3000;

app.get('/updates', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  // Send a message every second
  setInterval(() => {
    res.write(`data: {"message": "Data update!", "timestamp": "${new Date()}"}\n\n`);
  }, 1000);
});

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Causes

• User actions that modify data (e.g., form submissions).
• Scheduled events that alter data in the backend.
• Reactions to external API calls that update server data.

Solutions

• Utilize WebSockets for real-time communication between the client and server.
• Implement Server-Sent Events (SSE) for efficient one-way data updates from the server.
• Use HTTP polling to regularly check for new data updates, although this method may not be as efficient.

Mistake: Not closing the WebSocket connection properly when the client disconnects.

Solution: Implement connection closing logic on both the client and server sides.

Mistake: Sending too much data too frequently may flood the frontend.

Solution: Throttle or debounce the data updates to avoid overwhelming the client.