SSE 中的重复消息问题及解决方法-JavaScript中文网-JavaScript教程资源分享门户

背景

SSE（Server-Sent Events）是 HTML5 标准中新增的一种服务器推送技术，可以让服务器端向客户端推送实时事件。

SSE 协议规定每个事件都有一个唯一标识符 eventId，用于保证客户端接收到无重复的事件。但是，在实际开发中我们会遇到 SSE 重复消息的问题。本文将介绍 SSE 中的重复消息问题及解决方法。

问题

当使用 SSE 推送实时事件时，我们可能会遇到以下问题：

服务端产生并发送 duplicate 消息；
客户端收到消息前，网络中断，进而错误地重新连接，导致重复消息；
客户端没有处理完之前的消息，服务端推送新消息，导致重复消息。

这些问题都会导致客户端收到重复的事件消息。

解决方法

为了解决 SSE 中的重复消息问题，我们可以使用以下两种方式：

1. 排重服务器端发送的消息

对于重复的消息，我们可以在服务器端进行排重，只将不同的事件发送给客户端。

以下是服务端发送 SSE 消息时，对于相同数据进行去重的示例代码：

let lastData;
function sendData(data) {
  if (data === lastData) return;
  lastData = data;
  res.write(`data: ${data}\n\n`);
}

2. 再加一个标识符字段 timestamp

因为每个事件都有 eventId，但并不是所有的服务器都支持它。解决这个问题的办法就是添加一个额外的标识符 timestamp 字段。

在客户端收到事件时，判断 lastEventId 与 timestamp 的值是否与之前的相同，如果相同就忽略此事件。如果 lastEventId 是新的，那么更新 lastEventId 和 lastTimestamp。

以下是实现 timestamp 方案的示例代码：

-- -------------------- ---- -------
--- ----------- - --
--- ------------- - ---
-------- ------------------ -
  -- ------------------ --- ----------- -- 
      --------------- --- -------------- -
    ------- -- ------ --- --------- -----
  -
  ----------- - ------------------
  ------------- - ----------------
  -- ------- --- -----
-

结论

SSE 是一种非常便捷的实时数据推送技术，但也有可能会出现重复消息的问题。通过本文介绍的两种方法，我们可以很好地解决这个问题。开发人员可以根据实际情况对代码进行优化，以提高系统的稳定性和性能。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67207db22e7021665e02788e