介绍
Server-sent Events (SSE) 是 HTML5 的一个重要特性,可以轻松地实现浏览器对服务器的数据推送。它是一种单向的、基于 HTTP 的数据传输协议,与 WebSocket 相比,SSE 的优势在于它只需要简单的 HTTP 连接,不需要额外的握手过程,适用于一些比较简单的数据推送场景。本文将介绍如何在 JavaScript 中使用 SSE 实现数据推送。
SSE 基础
SSE 的格式
SSE 推送的数据格式是以下三个字段的组合:
------ ------ ----- ---- --- ------
其中,event
字段表示事件名称,data
字段表示数据,id
字段表示消息ID。在推送数据时,可以同时发送多个字段的信息给浏览器,但 data
字段是必须的。
举个例子,以下是一个 SSE 推送的数据格式:
------ ------ ----- ------- ------ --- ---
SSE 的流程
SSE 的通信过程是基于 HTTP 的,其流程如下:
- 客户端向服务器发送 HTTP 请求,将
Accept
头部设置为text/event-stream
,以指定该请求是一个 SSE 请求。 - 服务器向客户端发送响应,响应头中包含
Content-Type: text/event-stream
字段,以告诉浏览器该响应是 SSE 响应。同时,数据以 SSE 格式作为 payload 发送。 - 客户端接收到 SSE 数据后,可以通过 JavaScript 监听
message
事件,来处理数据。
SSE 的浏览器兼容性
SSE 的兼容性情况可以查看 Can I use SSE。
如何使用 SSE
使用 SSE 的 API 实现数据推送
浏览器提供了 EventSource
接口来使用 SSE。使用 EventSource
的步骤如下:
- 创建一个
EventSource
对象,指定 SSE 数据的 URL。 - 监听
message
事件,处理 SSE 数据。
以下是使用 EventSource
的代码示例:
----- ----------- - --- -------------------- --------------------- - ------- -- - --------------------- ------------ -- ------ -------------------- ------------ -- ---- --------------------------- ------------------- -- -------- -- -- ---------- --
服务器端推送 SSE 数据
服务器端可以使用一些库来推送 SSE 数据,比如 Node.js 中的库 sse-express
。使用该库的步骤如下:
- 在服务器端设置路由,响应 SSE 请求,使用
res.sse()
方法发送数据。 - 在客户端监听
message
事件,处理 SSE 数据。
以下是使用 sse-express
的代码示例:
----- ------- - ------------------- ----- ---------- - ----------------------- ----- --- - ---------- --------------- ------------- ----- ---- -- - -------------- -- - ----- ---- - ---------------- ---- ----- --- --------- ------ ------- ----- --- ---------- --- -- ------ --- -----------------
总结
本文介绍了如何在 JavaScript 中使用 SSE 实现数据推送,SSE 是一种基于 HTTP 的传输协议,适合一些比较简单的数据推送场景。我们可以使用浏览器提供的 EventSource
接口来实现数据接收,也可以在服务器端使用一些库来推送数据给客户端。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6594aaddeb4cecbf2d8f856e