什么是 SSE？
SSE（Server-Sent Events）是 HTML5 新增的一种服务器推送技术，它允许服务器实时推送数据到客户端，而客户端无需轮询去获取数据。
SSE 的工作原理
SSE 使用基于 HTTP 的长连接实现服务器与客户端之间的通信。当客户端建立连接，并向服务器发送请求时，服务器会在连接上发送响应，该响应数据以一定的格式传输并包含 Content-Type 和 data 字段。客户端通过监听 EventSource 对象接收 SSE 服务器推送的信息。
SSE 的兼容性问题
SSE 被大多数现代浏览器支持，包括 Chrome、Firefox、Safari、Opera 和 Edge。对于不支持 SSE 的旧版本浏览器，可以考虑使用 polyfill 来实现 SSE 通信。
SSE 的应用场景
SSE 可以用于实现实时数据更新的需求，如在线聊天、股票行情等。本文将以在线聊天为例，介绍如何使用 SSE 实现。
SSE 实现在线聊天
服务端实现
首先，我们需要实现一个 Node.js 服务器，并使用 Express 框架。
-- -------------------- ---- -------
----- ------- - ------------------
----- --- - ---------
---------------------------------
---------------- -- -- -
---------------- --------- -- ---- ------
--
--- -------- - --
------------------ ----- ---- -- -
---------
---------------- -----------
--------------- --------------------
------------------------------ ----
--
------------------
----- ----- - ---- -- ------------------------
----- -------- - -------------- -- -
----------------- ---------------------
------------ ---------------------------------
-- -----
--------------- -- -- -
-----------------------
--
--上述服务端代码中，我们首先启动一个监听 3000 端口的 Express 服务器，并将静态资源目录设置为 public。路由 /stream 映射到 SSE 推送接口。在 SSE 推送接口中，我们设置响应头，确保浏览器能正确识别接收到的数据格式，并设置允许跨域请求。然后，我们通过频率为 1 秒的定时器，将当前时间添加到 messages 数组里，并通过响应流写出到客户端。
客户端实现
客户端代码中，我们使用 EventSource 对象来监听服务器推送的消息，并将其展示在页面上。
-- -------------------- ---- -------
--------- -----
------
------
---------- ---- ---------------
----- ----------------
-------
------
--- -------------------
--------
----- -------- - -----------------------------------
----- ------ - --- ----------------------
---------------------------------- ----- -- -
----- ---- - ----------------------
------------------ - ------------ -- -
------ -----------------
-----------
--
-------------------------------- -- -- -
---------------- ---------- --------
--
---------
-------
-------在客户端 HTML 文件中，我们使用一个 ul 元素展示服务器推送的消息。使用 EventSource 对象监听 /stream 接口发来的消息，并将其解析成对象。最后，我们通过使用 map 和 join 函数，将每条消息包装成 li 元素，并添加到 ul 元素中。
总结
本文介绍了 SSE 的工作原理、兼容性问题以及应用场景，并以在线聊天为例，演示了如何使用 SSE 实现实时信息推送。SSE 在 Web 开发中的应用非常普及，在实现实时通信方面有较大的优势，对于需要实现实时数据的 Web 应用开发有很大的指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647bd0d5968c7c53b071a7a7