什么是 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