HTML5 Server-Sent Events（SSE）

Server-Sent Events (SSE) 是一种允许服务器向浏览器推送实时更新的技术。这种技术是单向的，即服务器可以主动发送数据给客户端，但客户端不能通过 SSE 发送数据到服务器。SSE 是基于 HTTP 协议的，因此它比 WebSocket 更加简单易用，同时在支持的浏览器中也更加广泛。

主要特点：

• 简单的API：SSE 使用一个简单的 JavaScript API，使得客户端能够很容易地接收服务器推送的数据。
• 文本格式：SSE 数据是以纯文本形式发送的，通常是一个 JSON 对象。
• 自动重连：当连接断开时，客户端会自动尝试重新连接。
• 数据格式化：服务器发送的数据需要遵循特定的格式，例如使用 data: 前缀来指定数据体。
• 事件类型：可以通过 event: 字段来定义不同的事件类型，客户端可以根据不同的事件类型执行不同的操作。

客户端实现：

在客户端，你可以使用 EventSource 对象来建立与服务器的连接并监听服务器发送的消息。以下是一个简单的示例：

// www.javascriptcn.com code example
if (!!window.EventSource) {
  var source = new EventSource('sse-endpoint');

  source.onmessage = function(event) {
    console.log('New message: ', event.data);
  };

  source.onerror = function(event) {
    if (event.readyState == EventSource.CLOSED) {
      console.log('Connection was closed.');
    } else {
      console.log('Error occurred:', event);
    }
  };
} else {
  console.log('Your browser does not support Server-Sent Events.');
}

服务器端实现：

服务器端需要设置正确的 MIME 类型 text/event-stream，并且以特定的格式发送数据。这里有一个使用 Node.js 和 Express 的简单例子：

// www.javascriptcn.com code example
const express = require('express');
const app = express();

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

  setInterval(() => {
    res.write('data: The server time is: ' + new Date().toLocaleTimeString() + '\n\n');
  }, 1000);

  req.on('close', () => {
    console.log('Client disconnected');
  });
});

app.listen(3000, () => {
  console.log('Listening on port 3000');
});

在这个例子中，服务器每秒向客户端发送一次当前时间。当客户端关闭连接时，服务器也会收到通知。

兼容性：

虽然大多数现代浏览器都支持 SSE，但在一些较旧或不常见的浏览器中可能不被支持。因此，在实际应用中，建议检查 EventSource 是否可用，并提供适当的回退方案。

SSE 是一种非常适合实现实时数据推送的技术，特别是当你只需要从服务器向客户端推送数据时。对于双向通信的需求，则可能需要考虑使用 WebSocket 技术。