在 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 服务器发送来的事件。以下是一个简单的示例代码:
const source = new EventSource('http://localhost:3000') source.addEventListener('time', e => { const data = JSON.parse(e.data) console.log(`Current time: ${data.time}`) })
首先创建一个 EventSource
对象,将 SSE 服务器的地址作为参数传入。然后使用 addEventListener
方法来监听事件,参数为事件名称和回调函数。在回调函数中,解析事件中的数据并进行相应的操作。
现在我们可以在控制台中看到每秒钟输出一条当前时间的信息。
停止 SSE 连接
在某些情况下,我们需要手动停止 SSE 连接。我们可以通过调用 EventSource
对象的 close
方法来停止连接。例如:
-- -------------------- ---- ------- ----- ------ - --- ------------------------------------ --- ----- ------------------------------- - -- - ----- ---- - ------------------ -------------------- ----- -------------- -- ---------- --- ----------- - -------------- -------------------- - --
在这个例子中,当时间到达中午 12 点时,停止 SSE 连接并清除定时器。
结论
在本文中,我们介绍了如何使用 JavaScript 和 SSE 进行服务器推送,实现实时更新数据的功能。我们了解了 SSE 的基本原理,并实现了 SSE 服务器和客户端的代码示例。SSE 是一种简单易用的实时通信技术,可以在 web 开发中实现各种实时更新数据的功能。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/670bc64666ef9cf37fac186f