HTML 服务器发送事件

HTML 服务器发送事件（Server-Sent Events，简称SSE）是一种实现服务器端向客户端实时推送数据的技术。该技术基于HTTP协议，使用简单，适用于多种应用场景。

在使用SSE时，浏览器通过HTTP协议向服务器发送请求，服务器则不断地向浏览器发送数据，直到连接关闭。这种方式可以减少客户端与服务器之间的不必要的轮询操作，并能及时更新数据。

如何使用SSE

使用SSE的具体实现包括以下三个步骤：

1. 在HTML文件中引入SSE脚本

<script src="https://cdn.jsdelivr.net/npm/event-source-polyfill@1.0.6/dist/event-source-polyfill.js"></script>

2. 建立SSE连接

if (!!window.EventSource) {
  var source = new EventSource('/sse');  // SSE连接的URL
  source.onmessage = function(event) {
    var data = JSON.parse(event.data);
    // 处理服务器推送过来的数据
  };
} else {
  // 不支持SSE的浏览器
}

3. 在服务器端发送SSE事件

// 设置SSE响应头
res.writeHead(200, {
  'Content-Type': 'text/event-stream',
  'Cache-Control': 'no-cache',
  'Connection': 'keep-alive',
});

// 发送SSE数据
res.write('event: myEvent\n');
res.write('data: ' + JSON.stringify(data) + '\n');

支持的事件类型

SSE支持以下两种类型的事件：

1. 无类型事件

// 发送无类型事件
res.write('data: ' + JSON.stringify(data) + '\n');

2. 带类型事件

// 发送带类型事件
res.write('event: myEvent\n');
res.write('data: ' + JSON.stringify(data) + '\n');

注意事项

在使用SSE时需要注意以下几点：

1. SSE基于HTTP协议，因此需要使用Web服务器支持SSE功能。

2. SSE连接为长连接，因此需要在服务器端控制连接的超时时间。

3. SSE连接可能会被浏览器和服务器中间的某些代理服务器断开。在这种情况下，需要重新建立SSE连接。

4. SSE对浏览器的兼容性较好，但对一些老版本的浏览器可能存在一些问题。在使用SSE时，需要根据实际情况选择合适的兼容方案。

参考资料

1. Server-sent events - Web APIs

2. EventSource polyfill