什么是 Server-sent Events
Server-sent Events (SSE) 是一种允许服务器将数据推送到客户端的浏览器API。 它是一种非常简单的方法，可以让你创建实时事件处理程序。通常使用 SSE 实现长轮询，但是与长轮询不同，SSE 通过一个长时间存在的传输流(stream)，允许在单个 HTTP 请求上发送多个事件，从而节省了服务器和客户端之间的慢速轮询机制。
Event Stream
Event Stream 是 SSE 在协议层面上的协议。当server要向客户端发送数据时，将数据格式化为特定的格式，并以 text/event-stream 的数据格式发送到浏览器客户端。当客户端接收到这些数据时，便可使用 eventsource 实现实时更新。
在 Event Stream 中，server 会开启一个连接，定时向浏览器客户端发送数据。当成功收到数据后浏览器客户端开始检查数据中的消息，如果收到消息，则将这些消息传递到 EventSource 对象，该对象会将这些消息添加到事件队列中，从而实现实时更新。
使用 Server-sent Events 实现实时更新
使用 SSE 实现实时更新非常的便捷，操作简单。以下是一个基本的使用 SSE 实现实时更新的示例代码：
--------- -----
------
------
------------------ --------------
-------
------
------ ----------- ------ -----------
---- -------------------
--------
--- ------- - -----------------------------------
--- ------ - --- -------------------------------
---------------------------------- ----------- -
----------------- - ----------------- - ------ - -------
--------------------
-- -------
---------
-------
-------在上面的代码中，我们使用了 EventSource 对象来接收 server 发送的数据，并将数据显示在给定的 DOM 元素上。 EventSource 是一个内置对象，它会自动在新消息到来时触发事件。
然后，在 server 端我们可以使用最常用的服务器端框架之一来实现 SSE。例如我们可以调用 send_event() 函数在 Flask 中实现 SSE：
---- ---- ------ -----
---- ----- ------ ------ --------
--- - ---------------
-----------------------------
--- --------------------
--- -----------
- - -
----- - - ---
----- ------ ------- - -
- -- -
--------
------ ----------------------------- -----------------------------在上面的代码中，我们定义了带有 /message/stream 路径的路由，然后在路由函数中使用 yield 和 time 库来模拟一个动态的事件流。
教你如何使用 Server-sent Events 实现实时更新
使用 SSE 实现实时更新是一件很简单便捷的事情。关键点是需要使用 EventSource 对象来接收 server 发送的数据，并使用基础的 JavaScript 技术将数据显示在页面上。以下是你可以自己尝试的一个示例：
- 创建一个名为
stream.html的文件，然后复制上面的完整示例代码并保存。 - 创建一个名为
server.py的文件，然后将上面的Flask示例代码粘贴到这个文件中。 - 在命令行中输入
python server.py来启动文件。 - 打开一个浏览器，然后输入
http://127.0.0.1:5000/stream.html来查看页面，你会在页面上看到一个空白的div元素，这个元素会在每秒钟更新一次，并且每次更新后会显示一个新的计数器数字。
结论
使用 SSE 实现实时更新是一种效率高、可读性强和简洁明了的方法。尽管它在实现长轮询方面可能会存在一些技术限制，但是在多数情况下，SSE 可以满足我们大多数长轮询或服务器推送的需要。最后，在使用 SSE 进行实时更新时，需要确保代码的可读性和安全性，以维护流式数据的正确性和稳定性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6703430fd91dce0dc84ab0af