在 Web 应用程序中，我们经常需要实时更新数据，例如聊天室、实时报价等。 Server-sent Events（SSE）是一种实时通信技术，它允许服务器向客户端发送事件，以便在服务器端检测到更新时即时通知客户端。
SSE 是一种基于 HTTP 的协议，它允许在不刷新页面的情况下，通过单个持久连接从服务器向客户端推送数据。
借助 EventSource API
在前端中创建 SSE 客户端最佳实践是使用 EventSource API，该 API 允许通过服务器发送事件流更新客户端。以下是一个基本的 SSE 客户端示例代码：
-- -------------------- ---- ------- ----- ----------- - --- ----------------------------------- --------------------- - ------- -- - ----- ---- - ----------------------- -- ------ -- ------------------- - ------- -- - --------------------- -------------------- --
在上述示例中，我们创建了一个连接到 /server_sent_events 的事件源并设置 onmessage 回调来处理每个消息。
另外，我们还设置了 onerror 回调，以及调用 eventSource.close() 来关闭连接。这个是一个很好的实践，在代码中始终关闭 SSE 连接是十分重要的。
处理 SSE 事件
当接收到服务器端发出的事件时，它们将以 event 的形式传递到 onmessage 回调函数中。每个事件对象包括以下三个属性：
event.data：事件数据；event.lastEventId：包含最后事件 ID 的字符串；event.type：事件类型。
以下是一个示例 SSE 事件：
event: new_event
id: 12345
data: {"message": "Hello, world!"}在上述示例中，我们定义了一个 new_event 类型的 SSE 事件。 id 常用来跟踪事件流，以防某些事件丢失。
最后我们解析 JSON 数据并用它来处理事件。
处理 SSE 重新连接
在实际开发中，经常需要处理 SSE 连接断开和重新连接的情况。下面是一个处理 SSE 重新连接的示例:
-- -------------------- ---- -------
--- ----------- - -----
-------- --------- -
----------- - --- -----------------------------------
--------------------- - ------- -- - -- ---- --
------------------- - ------- -- -
---------------------
--------------------
---------- -- --- ---------
--
-
---------- -- --- --- --在上述代码中，我们使用递归方式处理 SSE 连接出错的情况，如果连接出错，则立即关闭连接并尝试重新连接。
消息队列和 SSE
在实际使用中，我们可能需要将 SSE 结合到消息队列中以进行更复杂的应用程序。例如，如果要显示流程图或其他图表，则可以将图表数据推送到消息队列中。这样，客户端就可以有效地处理数据并生成图表，而不用等待每个 SSE 事件都完成。
以下是一个示例代码，它创建一个 SSE 客户端来接收包含图表数据的 SSE 消息：
-- -------------------- ---- ------- ----- ----------- - --- ----------------------------------- ----- --------- - --- -- ----------- --------------------- - ------- -- - ----- ---- - ----------------------- --------------------- -- ----------- -- -------- -- --------------------- -- ------------------- - ------- -- - --------------------- -------------------- --
在上述代码中，我们在接收到 SSE 事件时将数据添加到消息队列中。请注意，我们必须在 onmessage 回调函数中处理消息队列数据，以确保 SSE 客户端处理数据的顺序正确。
总结
Server-sent Events（SSE）是一种强大的实时通信技术，在 Web 应用程序中有很多实用的场景。在前端中创建 SSE 客户端，使用 EventSource API 是最佳实践。为了使 SSE 客户端具有可伸缩性并能够处理 SSE 重新连接和消息队列数据，需要使用适当的最佳实践和代码示例。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e7b718f6b2d6eab333a879