SSE 如何向所有客户端发送广播消息？
SSE，也就是 Server-Sent Events（服务器推送事件），是一种服务器向客户端推送数据的技术。相比于其他实时通信技术，如 Websocket，SSE 更加轻量级，适用于特定场景下的实时数据通信需求，如股票行情、即时新闻等。
在使用 SSE 进行实时通信时，有时候我们需要向所有客户端发送广播消息。本文将介绍如何使用 SSE 向所有客户端发送广播消息。
SSE 广播消息的原理
SSE 的原理是利用了浏览器的 EventSource 对象，它可以与服务器建立长连接，并且能够接收服务器通过 HTTP 协议推送的事件流。当服务器有新数据推送时，EventSource 会自动触发 onmessage 事件，客户端可以在该事件中处理服务器推送过来的数据。
要实现 SSE 广播消息，我们只需要在服务器端维护一个客户端列表，当有新消息需要广播时，遍历客户端列表，向每个客户端发送消息即可。客户端接收到消息后，可以根据需要进行相应的处理。
代码示例
接下来，我们将给出一个使用 SSE 广播消息的示例。该示例包含了一个简单的 Node.js 服务器和一个 HTML 文件。
服务器代码
-- -------------------- ---- -------
----- ---- - ----------------
----- -- - --------------
----- ---- - ----------------
----- --- - ---------------
-- -------
----- ------- - ---
-- ---- ---
----- ------ - ----------------------- ---- -- -
----- - -------- - - -------------------
-- --------- --- ------- -
-- -----
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
---
-- --------
------------------
-- ------
--------------- -- -- -
------------------------------------ ---
----------
---
- ---- -
-- -- ---- --
----- -------- - -------------------- --------------
----- ----------- - ------------------------- --------
------------------ - --------------- ----------- ---
---------------------
-
---
-- ----------
-------------- -- -
----- ---- - ------ ----- ----------------------------------
--------------------- -- -
----------------
---
-- ------
--------------------
------------------- ------- -- ------------------------上述代码实现了一个简单的 HTTP 服务器，并维护了客户端列表 clients。当客户端连接到 /sse 路径时，服务器将设置响应头，将该响应对象推送到 clients 列表中，并监听该请求的关闭事件。当客户端关闭连接时，服务器会将该响应对象从 clients 列表中删除。
定期向客户端发送消息的部分则使用了 setInterval 定时器，每秒钟向所有客户端发送一个当前时间的消息。
HTML 文件代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ------------
-------
------
------- ---------
---- ---------------
--------
----- --- - -------------------------------
----- --------- - --- --------------------
-- ------
------------------- - ----- -- -
------------- -- -------- - -----
--
---------
-------
-------该 HTML 文件包含一个简单的页面结构，并通过 EventSource 对象与服务器建立长连接。当服务器有新消息推送时，通过 onmessage 事件处理函数向页面中的 log 元素添加一条新的日志。
总结
以上就是使用 SSE 向所有客户端发送广播消息的方法及示例代码。相比于其他实时通信技术，如 Websocket，SSE 更加轻量级，适用于特定场景下的实时数据通信需求。通过本文所介绍的方法，我们可以轻松地实现 SSE 广播消息，并实现服务器与客户端之间的实时通信。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64832d2948841e98942a3732