在 web 开发中，我们经常需要实现实时更新数据的功能，这需要服务器将数据推送到客户端，然后客户端根据数据更新页面。SSE（Server-Sent Events）就是一种实现服务器推送的技术，它是基于 HTTP 协议，使用了长连接来实现实时通信。
本文将介绍如何使用 JavaScript 和 SSE 进行服务器推送，实现实时更新数据的功能。
SSE 的基本原理
SSE 通过在客户端和服务器之间建立长连接来实现实时通信。在客户端发起 SSE 请求后，服务器会将响应头设置为 Content-Type: text/event-stream，表示服务器将持续不断地给客户端发送事件流。客户端可以使用 EventSource 接口来订阅这个事件流。事件流中的每个事件由两部分组成：一个事件名称和一个消息体。
客户端和服务器之间的连接不会关闭，直到客户端关闭连接或者服务器发送了一条特殊的结束事件。SSE 与 WebSocket 类似，但相比 WebSocket 更加简单，能够使用普通的 HTTP 协议来实现。
实现 SSE 服务器
在服务器端，我们需要实现 SSE 服务器，可以使用 Node.js 中的 http 模块来实现。以下是一个简单的 SSE 服务器的实现：
----- ---- - ---------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
--
-------------- -- -
----- ---- - -
----- --- ---------------------------
-
----------------- --------
---------------- -----------------------------
-- -----
---------------
---------------- ------ -- ------- -- -----------------------首先创建一个 HTTP 服务器，当收到请求时，设置响应头，其中 Content-Type 设置为 text/event-stream 表示服务器会发送事件流。
然后在每隔一秒钟向客户端发送一个事件，事件名称为 time，事件内容是一个包含当前时间的 JSON 对象。
我们可以使用浏览器打开 http://localhost:3000 来测试 SSE 服务器是否正常工作。
使用 EventSource 进行订阅
在客户端，我们可以使用 EventSource 接口来订阅 SSE 服务器发送来的事件。以下是一个简单的示例代码：
----- ------ - --- ------------------------------------ ------------------------------- - -- - ----- ---- - ------------------ -------------------- ----- -------------- --
首先创建一个 EventSource 对象，将 SSE 服务器的地址作为参数传入。然后使用 addEventListener 方法来监听事件，参数为事件名称和回调函数。在回调函数中，解析事件中的数据并进行相应的操作。
现在我们可以在控制台中看到每秒钟输出一条当前时间的信息。
停止 SSE 连接
在某些情况下，我们需要手动停止 SSE 连接。我们可以通过调用 EventSource 对象的 close 方法来停止连接。例如：
----- ------ - --- ------------------------------------
--- -----
------------------------------- - -- -
----- ---- - ------------------
-------------------- ----- --------------
-- ---------- --- ----------- -
--------------
--------------------
-
--在这个例子中，当时间到达中午 12 点时，停止 SSE 连接并清除定时器。
结论
在本文中，我们介绍了如何使用 JavaScript 和 SSE 进行服务器推送，实现实时更新数据的功能。我们了解了 SSE 的基本原理，并实现了 SSE 服务器和客户端的代码示例。SSE 是一种简单易用的实时通信技术，可以在 web 开发中实现各种实时更新数据的功能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670bc64666ef9cf37fac186f