Server-sent Events(SSE)是一种基于HTTP协议的服务器推送技术，它允许服务器发送事件流到客户端，从而实现实时更新数据的功能。与其他技术相比，SSE具有更好的可靠性、更低的延迟和更简单的使用。
除了基本的事件流发送，SSE还提供了一些高级特性，本文将介绍这些特性及其应用场景。
1. 重连机制
SSE的重连机制允许客户端在连接断开后自动重新连接服务器，以确保数据的实时更新。在事件流发送过程中，如果连接断开，浏览器会自动尝试重新连接服务器，直到连接成功或者达到最大重试次数。
为了实现重连机制，服务器需要在事件流的HTTP响应头中设置Retry-After字段，指定客户端重连的时间间隔，如下所示：
HTTP/1.1 200 OK Content-Type: text/event-stream Cache-Control: no-cache Retry-After: 5000 data: This is a message\n\n
客户端可以通过EventSource对象的onerror事件来监听连接错误，如下所示：
var source = new EventSource('/sse'); source.onerror = function(event) { if (event.target.readyState == EventSource.CLOSED) { console.log('Connection closed'); } else if (event.target.readyState == EventSource.CONNECTING) { console.log('Reconnecting...'); } };
2. 自定义事件
除了默认的message事件外，SSE还支持自定义事件，允许服务器发送不同类型的事件流数据。客户端可以通过EventSource对象的addEventListener方法来监听自定义事件，如下所示：
var source = new EventSource('/sse'); source.addEventListener('custom-event', function(event) { console.log(event.data); });
服务器可以在事件流的数据中使用event:字段来指定事件类型，如下所示：
HTTP/1.1 200 OK Content-Type: text/event-stream Cache-Control: no-cache event: custom-event data: This is a custom event\n\n
3. ID 字段
SSE还支持在事件流数据中添加ID字段，用于实现数据的去重和恢复。客户端可以通过EventSource对象的lastEventId属性来获取上一次接收到的事件ID，从而避免重复接收数据。
服务器可以在事件流的数据中使用id:字段来指定事件ID，如下所示：
HTTP/1.1 200 OK Content-Type: text/event-stream Cache-Control: no-cache id: 123 data: This is a message\n\n
客户端可以通过EventSource对象的addEventListener方法来监听message事件，并保存上一次接收到的事件ID，如下所示：
var source = new EventSource('/sse'); source.addEventListener('message', function(event) { console.log(event.data); console.log(event.lastEventId); });
应用场景
SSE的高级特性可以应用于以下场景：
- 实时通知：SSE可以用于实时通知用户关注的事件，例如新闻发布、股票变动等。
- 实时监控：SSE可以用于实时监控系统状态、网络流量等，并及时通知管理员发生的变化。
- 实时聊天：SSE可以用于实现实时聊天功能，例如在线客服、社交网络等。
示例代码
以下是一个简单的SSE示例代码，服务器使用Node.js和Express框架实现，客户端使用HTML和JavaScript实现。
服务器代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- --------------- ----- ---- -- - ----------------------------- --------------------- ------------------------------ ------------ --------------------------- -------------- --- -- - -- -------------- -- - ----- -------------- ---------- ---------------- ---- -- - -------------- -- ------ --- ---------------- -- -- - ------------------- ------- -- ---- ------- ---展开代码
客户端代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ---------- --------------- ------- ------ -------- --- ------ - --- -------------------- ---------------------------------- --------------- - ------------------------ ------------------------------- --- --------- ------- -------展开代码
以上代码实现了一个简单的SSE应用，每隔1秒钟向客户端发送一条消息，并添加ID字段。客户端使用EventSource对象监听message事件，并打印消息内容和事件ID。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d25898a941bf71344719c3
