How to use server-sent events (SSE) in HTML5?

SSE enables real-time, unidirectional server-to-client updates via HTTP; use EventSource in JavaScript to connect, handle messages with onmessage, set server response type to text/event-stream, format data with "data:" and "\n\n", and optionally include event IDs for reconnection.

Server-Sent Events (SSE) in HTML5 allow a web page to get automatic updates from a server without polling. This is useful when you need real-time data like live feeds, notifications, or stock prices. Unlike WebSockets, SSE is unidirectional—data flows from server to client—and it works over standard HTTP.

Enable SSE in JavaScript

To use SSE, create an EventSource object in your JavaScript code. Pass the URL of the server endpoint that sends event data.

Example:

<code>if (typeof EventSource !== "undefined") {
  const source = new EventSource("/sse-updates");
  
  source.onmessage = function(event) {
    document.getElementById("result").innerHTML  = event.data   "<br>";
  };

  source.onerror = function() {
    console.log("EventSource failed.");
  };
} else {
  document.getElementById("result").innerHTML = "SSE not supported";
}
</code>

Set Up the Server Response

The server must send data using a specific format and set the correct MIME type: text/event-stream.

Example server response (Node.js/Express):

<code>app.get('/sse-updates', (req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });

  setInterval(() => {
    res.write(`data: ${new Date().toISOString()}\n\n`);
  }, 1000);
});
</code>

Handle Connection States and Reconnection

SSE automatically tries to reconnect if the connection drops. The browser uses the last seen event ID to resume from where it left off—if the server supports it.

Example with event ID:

<code>res.write(`id: ${eventId}\ndata: Hello\n\n`);
</code>

Basically, just set up the client with EventSource, configure your server to stream properly formatted events, and handle messages as they arrive. It's simple, built on HTTP, and widely supported.

The above is the detailed content of How to use server-sent events (SSE) in HTML5?. For more information, please follow other related articles on the PHP Chinese website!