背景
SSE（Server-Sent Events）是 HTML5 标准中新增的一种服务器推送技术，可以让服务器端向客户端推送实时事件。
SSE 协议规定每个事件都有一个唯一标识符 eventId，用于保证客户端接收到无重复的事件。但是，在实际开发中我们会遇到 SSE 重复消息的问题。本文将介绍 SSE 中的重复消息问题及解决方法。
问题
当使用 SSE 推送实时事件时，我们可能会遇到以下问题：
- 服务端产生并发送 duplicate 消息；
- 客户端收到消息前，网络中断，进而错误地重新连接，导致重复消息；
- 客户端没有处理完之前的消息，服务端推送新消息，导致重复消息。
这些问题都会导致客户端收到重复的事件消息。
解决方法
为了解决 SSE 中的重复消息问题，我们可以使用以下两种方式：
1. 排重服务器端发送的消息
对于重复的消息，我们可以在服务器端进行排重，只将不同的事件发送给客户端。
以下是服务端发送 SSE 消息时，对于相同数据进行去重的示例代码：
--- --------- -------- -------------- - -- ----- --- --------- ------- -------- - ----- ---------------- -------------- -
2. 再加一个标识符字段 timestamp
因为每个事件都有 eventId，但并不是所有的服务器都支持它。解决这个问题的办法就是添加一个额外的标识符 timestamp 字段。
在客户端收到事件时，判断 lastEventId 与 timestamp 的值是否与之前的相同，如果相同就忽略此事件。如果 lastEventId 是新的，那么更新 lastEventId 和 lastTimestamp。
以下是实现 timestamp 方案的示例代码：
--- ----------- - --
--- ------------- - ---
-------- ------------------ -
-- ------------------ --- ----------- --
--------------- --- -------------- -
------- -- ------ --- --------- -----
-
----------- - ------------------
------------- - ----------------
-- ------- --- -----
-结论
SSE 是一种非常便捷的实时数据推送技术，但也有可能会出现重复消息的问题。通过本文介绍的两种方法，我们可以很好地解决这个问题。开发人员可以根据实际情况对代码进行优化，以提高系统的稳定性和性能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67207db22e7021665e02788e