什么是 SSE 技术
SSE 技术（Server-Sent Events）是一种服务器向客户端推送数据的技术，它基于 HTTP 协议，使用长连接传输数据，可以实现实时更新网页的效果。相比于 WebSocket 技术，SSE 技术更加轻量级，适用于一些简单的实时数据更新场景。
SSE 技术的实现原理
SSE 技术基于 HTTP 协议，使用长连接传输数据。客户端通过一个 HTTP 请求与服务器建立连接，并保持连接处于打开状态。服务器可以在任何时候向客户端发送数据，数据以文本流的形式传输，客户端可以通过监听 message 事件来获取服务器发送的数据。
SSE 技术的多客户端协作案例分析
在实际应用中，我们可能需要实现多客户端协作的效果，比如一个在线协作的文档编辑器，多个用户可以同时编辑同一个文档，并实时看到其他用户的编辑结果。
下面我们通过一个简单的示例来演示如何使用 SSE 技术实现多客户端协作的效果。
服务端代码
我们使用 Node.js 来实现服务端代码，代码如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- -- - --------------
----- ------ - ----------------------- ---- -- -
-- -------- --- ---- - -- -------
------------------ -
--------------- ------------
---------------- -----------
------------- ------------
---
---------------------------------------------- -- -- ---- --
- ---- -- -------- --- ---------- - -- -- --- --
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- - -- ------
---------------- ----- -----------------------------------
-- ------
- ---- -
-------------------
----------
-
---
--------------------上面的代码中，我们创建了一个 HTTP 服务器，监听 3000 端口。当客户端请求根路径时，返回一个 HTML 页面，该页面包含一个按钮，点击按钮后会向服务器发送 SSE 请求。当客户端请求 /events 路径时，会返回一个 SSE 数据流，每隔 1 秒钟向客户端发送一条数据。
客户端代码
我们使用 JavaScript 来实现客户端代码，代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ------------
-------
------
------- -------------------------
--- -------------------
--------
----- -------- - ---------------------------------
----- ------------ - ------------------------------------
--- ----------- - -----
---------------------------------- -- -- -
-- -------------- - -- --------
----------- - --- -----------------------
--------------------------------------- ------- -- -
----- -- - -----------------------------
-------------- - -----------
-----------------------------
---
-
---
---------
-------
-------上面的代码中，我们首先在 HTML 页面中创建了一个按钮和一个列表，当点击按钮时，会通过 EventSource 对象向服务器发送 SSE 请求，并监听 message 事件，将收到的数据添加到列表中显示出来。
效果演示
我们使用浏览器打开 http://localhost:3000，点击 Start 按钮，可以看到页面上不断更新的时间数据，这说明 SSE 技术已经成功地实现了多客户端协作的效果。
总结
通过上面的案例分析，我们可以看到 SSE 技术可以很方便地实现多客户端协作的效果，它可以轻松地更新网页中的数据，而不需要客户端轮询服务器。SSE 技术虽然比不上 WebSocket 技术的实时性能，但在一些简单的场景下，它是一种很好的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66167c19d10417a222666c6b