简介
Server-sent Events(服务器发送事件)是一种基于 HTTP 的协议,旨在使 Web 应用程序能够从服务器自动接收推送数据。与 WebSocket 不同,Server-sent Events 的通信是单向的(即只能从服务器到客户端)。这使得它在与 Web 应用程序开发中的一些常见用例(如实时数据更新)中比 WebSocket 更加适合。
Server-sent Events 的优势在于其易于学习和使用,且对服务器和客户端的资源消耗较低。此外,Server-sent Events 还支持重新连接,因此如果连接中断,客户端将能够自动重新连接。
用法
服务端
要使用 Server-sent Events,首先需要使用正确的 MIME 类型注册服务器上的事件流(text/event-stream)。然后,可以使用以下代码向客户端发送事件数据:
-- -------------------- ---- ------- ----- ---- - ------ -------- ----- ----- - --- -------------------- ------------ - ---------- - ----------------------- --------------- -- --------------------------------- --------------- - ------------------------ --- ------------- - ---------- - ----------------------- ---------- -- ------------- - ---------- - --------------- ----- ------------ -- ---------------------- - ----------------- -- ------
如上所示,我们可以使用 EventSource 类来向客户端发送事件,并可以通过 onopen、onclose 和 onerror 等事件处理程序来观察连接状态。此外,使用 addEventListener 方法监听 message 事件,以接收从服务器传递的数据。数据通过调用 send 方法从服务器发送,可以使用 setInterval 等方法定期发送数据。
客户端
使用 Server-sent Events 的客户端代码很简单。我们只需要向服务器的事件流端点(event stream endpoint)发送 HTTP 请求即可:
-- -------------------- ---- ------- ----- ----- - --- -------------------- --------------------------------- --------------- - ------------------------ --- ------------- - ---------- - ----------------------- ---------- -- ------------- - ---------- - --------------- ----- ------------ --
以上代码创建了一个 EventSource 对象,指向服务器的事件流端点。监听 message 事件以接收从服务器传递的数据,同时也监听 onclose 和 onerror 事件处理程序以处理连接关闭和出错事件。
实战
以下是一个使用 Server-sent Events 实现实时数据更新的示例。该示例使用 Node.js 和 Express 框架实现服务器端。
服务端代码
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- -------------------------------- - ------------ ------------------ ------------- ---- - ------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------ --- ---------------------- - ----- ---- - ---------------------------------------- ---------------- -------------- -- ------ --- ---------------- ---------- - -------------------- --- --------- -- ---- -------- ---
如上所示,该示例代码创建了一个使用 Express 框架的 Web 服务器,并将 HTTP 配置为使用正确的 MIME 类型。然后,使用 setInterval 方法在每秒钟发送随机数据。
客户端代码
-- -------------------- ---- ------- ----- ----- - --- ----------------------- --------------------------------- --------------- - ----------------------------------------- - ----------- --- ------------- - ---------- - --------------- ----- ------------ --
如上所示,客户端代码也非常简单。它向服务器的事件流端点发送 HTTP 请求,并在 message 事件上更新 HTML 元素。
总结
Server-sent Events 提供了一种有效的方法来实现从服务器自动推送数据。由于其固有的单向性,Server-sent Events 在实现特定用例时比 WebSocket 更加适合。此外,由于其对资源的消耗较少,更易于学习和使用,因此 Server-sent Events 是一种实现实时数据更新等方案的可行选项。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64ec0331f6b2d6eab364e616