Server-sent Events（SSE）是一种基于 HTTP 的实时通信技术，它允许服务器向客户端发送事件流，从而实现跨客户端通信。SSE 可以用于实时更新网页内容、实时通知用户等场景。本文将介绍 SSE 的使用方法，并提供示例代码。
SSE 的基本原理
SSE 基于 HTTP 协议，使用了长连接（长轮询）的方式来实现实时通信。客户端向服务器发送一个 HTTP 请求，服务器保持连接打开，并发送事件流到客户端。客户端通过监听事件流来获取服务器发送的事件。
SSE 的事件流以“data:”为前缀，以“\n\n”为结尾。事件流可以包含多个事件，每个事件之间以“\n\n”分隔。事件可以是任何文本格式，例如 JSON、XML、HTML 等。
SSE 的使用方法
服务器端实现
要使用 SSE，需要在服务器端实现 SSE 的接口。下面是一个使用 Node.js 和 Express 框架实现 SSE 接口的示例代码：
-- -------------------- ---- -------
----- ------- - ------------------
----- --- - ---------
--------------- ----- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
--
-------------- -- -
----- ---- - --- ---------------------------
---------------- -------------
-- -----
--
---------------- -- -- -
------------------- --------- -- ---- ------
--在上面的代码中，我们定义了一个 SSE 接口“/sse”，当客户端访问该接口时，服务器会返回一个 SSE 事件流。事件流包含了每秒钟的当前时间。
在响应头中，我们设置了“Content-Type”为“text/event-stream”，表示返回的是 SSE 事件流。同时，我们设置了“Cache-Control”为“no-cache”，表示不缓存响应。最后，我们设置了“Connection”为“keep-alive”，表示保持连接打开。
在接口的实现中，我们使用了“setInterval”函数每秒钟发送一个事件。事件的格式为“data: ${data}\n\n”，其中“data:”表示这是一个事件，后面的“${data}”是事件的内容，最后的“\n\n”表示事件的结束。
客户端实现
客户端可以使用 JavaScript 实现 SSE 的监听。下面是一个使用 JavaScript 实现 SSE 监听的示例代码：
-- -------------------- ---- ------- ----- ------ - --- ------------------- ---------------------------------- ----- -- - ----------------------- -- -------------------------------- ----- -- - ------------------ -------- ------ --
在上面的代码中，我们创建了一个“EventSource”对象，并指定了 SSE 接口的 URL。“EventSource”对象会自动向服务器发送 HTTP 请求，并接收服务器发送的事件流。
我们使用“addEventListener”函数监听“message”事件和“error”事件。“message”事件会在接收到服务器发送的事件时触发，我们可以通过“event.data”获取事件的内容。“error”事件会在发生错误时触发，我们可以通过“console.error”输出错误信息。
示例代码
下面是一个完整的使用 SSE 实现实时更新网页内容的示例代码：
-- -------------------- ---- -------
-- ---------
----- ------- - ------------------
----- --- - ---------
--------------- ----- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
--
--- ----- - -
-------------- -- -
-------
----- ---- - - ----- -
---------------- -----------------------------
-- -----
--
---------------------------------
---------------- -- -- -
------------------- --------- -- ---- ------
---- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
----- ----------------
---------- ---------------
-------
------
--- ----------------
--------
----- ------ - --- -------------------
---------------------------------- ----- -- -
----- ---- - ----------------------
------------------------------------------ - ----------
--
-------------------------------- ----- -- -
------------------ -------- ------
--
---------
-------
-------在上面的代码中，我们在服务器端实现了 SSE 接口“/sse”，每秒钟发送一个包含计数器的事件。在客户端实现了 SSE 监听，每当接收到服务器发送的事件时，更新网页上的计数器。
总结
本文介绍了 SSE 的基本原理、使用方法和示例代码。SSE 是一种简单易用的实时通信技术，可以用于实时更新网页内容、实时通知用户等场景。使用 SSE 可以减少客户端和服务器之间的轮询请求，提高应用程序的性能和响应速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6516612c95b1f8cacdeb6332