Server-Sent Events (SSE) 是一种用于实时网络通信的技术，可以让客户端应用程序接收来自服务器的推送式事件流。在 SSE 中，消息编号是非常重要的一个属性，它可以用来实现消息重传、客户端断线重连等功能。本文将介绍 SSE 消息编号处理的技巧，帮助前端开发者更好地应用和理解 SSE 技术。
SSE 消息编号介绍
SSE 消息编号（Event ID）是指每条 SSE 消息的唯一标识符。在 HTTP 响应头中，可以通过 “Last-Event-ID” 字段告诉客户端上一次接收到的消息编号。
-- -------------------- ---- ------- -------- --- -- ------------- ----------------- -------------- -------- ----------- ---------- --- --- ----- ----- ------ --- --- ----- ------- -----
在客户端建立 SSE 连接后，通过监听 “message” 事件来接收消息：
const sse = new EventSource('/events');
sse.addEventListener('message', event => {
console.log(event.id) // 消息编号
console.log(event.data) // 消息内容
})消息重传
在 SSE 中，消息重传可以通过消息编号和服务器的缓存机制来实现。客户端可以在建立 SSE 连接时通过 “Last-Event-ID” 字段告诉服务器上一次接收到的消息编号。服务器可以根据这个编号来判断客户端是否接收到了最新的事件流，并决定是否重传之前的消息。
-- -------------------- ---- ------- -------- --- -- ------------- ----------------- -------------- -------- ----------- ---------- --- --- ----- ----- ------ --- --- ----- ------- ----- --- --- ----- --- --- ---- --- --- ----- --- ----- ----- ----
假如客户端断线两分钟后重新连接，它可以通过 “Last-Event-ID” 字段告诉服务器它上次接收到的是 “124” 号消息。服务器可以从缓存中取出 “125” 和 “126” 号消息并重传给客户端。
-- -------------------- ---- ------- -------- --- -- ------------- ----------------- -------------- -------- ----------- ---------- --- --- ----- --- --- ---- --- --- ----- --- ----- ----- ----
断线重连
在 SSE 中，客户端断线重连是一个非常实用的功能。当客户端网络中断或浏览器关闭时，它可以通过上一次接收到的消息编号来快速恢复与服务器的连接，从而避免数据的重复传输。
假如客户端在接收到 “124” 号消息后网络中断并断线两分钟，它可以通过 “Last-Event-ID” 字段告诉服务器它上次接收到的是 “124” 号消息。服务器可以从这个消息继续发送事件流，并在断线重连时重新建立 SSE 连接。
-- -------------------- ---- ------- -------- --- -- ------------- ----------------- -------------- -------- ----------- ---------- --- --- ----- --- --- ---- --- --- ----- --- ----- ----- ---- --- --- ----- ---- ----- ----
消息编号处理技巧
在实际开发中，如何处理 SSE 消息编号是一个非常关键的问题。下面是一些处理技巧供大家参考：
- 保证消息编号的唯一性。可以使用时间戳、UUID 等方式生成唯一的消息编号，避免出现重复或混淆的情况。
- 使用递增的消息编号。通常情况下，消息编号应该是递增的，这样可以方便客户端判断是否接收到了最新的事件流。在使用时间戳等方式生成消息编号时，需要保证它们是递增的。
- 对于已经过期的消息，可以使用 “retry” 字段设置重试间隔时间。例如，服务器发送一个一分钟前的消息，客户端可以判断它已经过期，并告诉服务器下一次重试的时间。
示例代码
下面是一个使用 Node.js 和 Express 生成 SSE 事件流的示例代码。
-- -------------------- ---- -------
----- ------- - ------------------
----- ---- - ---------------
----- --- - ---------
------------------ ----- ---- -- -
---------
--------------- --------------------
---------------- -----------
------------- ------------
--
--- -- - --
-------------- -- -
----
----- ---- - - --- -------- ------ ----- ------ -
-------------- ----------------
---------------- -----------------------------
-- -----
--
---------------- -- -- ---------------- ------ -- ----------在客户端使用以下代码来接收 SSE 消息：
const sse = new EventSource('/events');
sse.addEventListener('message', event => {
console.log(event.id) // 消息编号
console.log(event.data) // 消息内容
})结论
SSE 技术可以实现实时通信，而消息编号是保证可靠性和稳定性的一个关键因素。在使用 SSE 技术时，我们需要掌握消息编号的处理技巧，为客户端断线重连、消息重传等功能提供支持。希望本文能够帮助前端开发者更好地理解和应用 SSE 技术，并为其实时通信应用打下坚实的基础。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674d1d5ca336082f2548ee03