Receive Real-Time Updates via Server Sent Events in JavaScript

In modern web applications, providing real-time updates to users can greatly enhance their experience. Traditionally, this was done using technologies like WebSockets or polling. However, Server-Sent Events (SSE) offer an efficient way for the server to push updates to the browser, ideal for displaying real-time data such as chat messages or live sports scores.

Server-Sent Events is a standard describing how servers can initiate data transmission towards browser clients once an initial client connection has been established. It uses a persistent HTTP connection and supports automatic reconnection, event IDs, and is easy to implement with JavaScript. Let’s walk through how to set up an SSE connection using JavaScript.

Setting Up a Simple Server

You need a server that can send streaming events to the client. We'll use Node.js for this task, but you can use any server-side language that supports HTTP long polling. Below is a simple Node.js server that sends a random number every 5 seconds:

const http = require('http');

http.createServer((request, response) => {
  // Action to handle requests from the client
  if (request.url === '/events') {
    response.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive'
    });

    // Send a message every 5 seconds
    setInterval(() => {
      const eventString = `data: ${Math.random()}\n\n`;
      response.write(eventString);
    }, 5000);
  }
}).listen(3000, '127.0.0.1');

Connecting with JavaScript

In the client, we will create a connection to this server using JavaScript. This will be straightforward with the EventSource API which makes handling server-sent events simple:

<!DOCTYPE html>
<html>
<head>
  <title>SSE Demo</title>
</head>
<body>
  <div id="updates"></div>

  <script>
    // Creating EventSource instance
    const source = new EventSource('http://127.0.0.1:3000/events');

    // Event listener for messages
    source.onmessage = function(event) {
      const updatesDiv = document.getElementById('updates');
      updatesDiv.innerHTML += 'Update: ' + event.data + '<br>';
    };

    // Optional: error handling
    source.onerror = function() {
      console.error('EventSource failed.');
    };

  </script>
</body>
</html>

In this script:

• We initiate an EventSource connection to our server's endpoint.
• The onmessage event handler captures data sent from the server.
• The message data received from the server is displayed inside the div tag with an id of updates.
• Error handling is provided via the onerror callback, which can log failures.