简介
SSE(Server-Sent Events)是一种服务器端主动推送数据到客户端的 HTML5 技术。与传统的 Ajax 请求相比,SSE 可以避免客户端多次发起请求来获取数据。在实时通信或者消息推送场景下,SSE 是非常实用的技术。
SSE 协议规定了可以使用一种特殊的 HTPP 请求头,即Content-Type: text/event-stream
来发送事件流到客户端。这种事件流为一系列以 data:
开头,以 \n\n
结尾的文本数据。客户端可以通过监听服务器推送过来的数据,并执行相应的逻辑。
下面,我们会具体介绍 SSE 的长轮询原理和实现方法,并通过示例代码演示该技术的具体应用。
长轮询原理
长轮询(Long Polling)是 SSE 技术实现的核心方法。其核心思想是,客户端发起的连接请求会被服务器保持一段时间。只有在有事件发生时,服务器才会返回数据,否则服务器会一直等待。
- 客户端发起请求。客户端向服务器发起一个
/events
的连接请求,请求方式为 GET。 - 服务器保持连接请求。服务端接收到
/events
请求后,不会立即响应,而是保持连接请求,等待客户端的事件发生。 - 事件发生。当服务器监听到特定事件发生时,比如数据库中数据更新,就会立即向已经发起的连接请求中发送数据。
- 响应请求。服务器发送新的数据后,会将数据作为事件流返回给客户端。
- 客户端重新发起请求。收到服务器的响应后,客户端重新发起
/events
请求,进入下一轮长轮询。
通过长轮询,即可实现客户端实时获取服务器端的推送数据。而且长轮询允许客户端在服务器端没有更新时保持连接,减少了不必要的服务器负载。
实现方法
下面,我们将通过一个具体的案例来演示 SSE 技术的具体实现方法。
服务端代码
我们使用 Node.js 框架来实现服务端代码,代码如下:
-- -------------------- ---- ------- ----- ---- - ---------------- ----------------------- ---- -- - -- -------- --- ---------- - ------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------- --- -------------- -- - ----- ---- - ------ ----- ------------- ---------------- -- ------ - ---- - ------------------- ---------- - ---------------- ------------------- ------- -- ------------------------
上述代码中,我们先判断请求的 URL 是否为 /events
,如果是,则将响应头设置为 SSE 规定的格式,并将连接保持。接下来,我们使用 setInterval
方法,每隔 1 秒向已经保持的连接中写入数据。由于 SSE 规定了每条数据应该以两个 \n
结尾,因此我们在数据末尾加上了一个 \n\n
。
客户端代码
客户端通过监听 /events
连接,即可实现 SSE 的长轮询。客户端代码如下:
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ---------- ------------ ------- ------ ------- --------- --- ------------------- -------- ----- ------- - ------------------------------------ ----- ----------- - --- ----------------------- --------------------- - ------- -- - ----- ---- - ----------------------- ----- ----------- - ----------------------------- ----------------------- - ----- --------------------------------- - --------- ------- -------
在客户端代码中,我们通过 EventSource
API 创建了一个事件源,向服务器发起 /events
的连接。同时,我们监听了 onmessage
事件,当有新消息到来时,就会执行回调函数,将新消息插入到之前的消息列表中。
结论
通过本篇文章的介绍,我们了解了 SSE 技术的长轮询原理和实现方法,以及具体的代码编写。在实时通信、消息推送等场景下,SSE 技术可以帮助我们避免繁琐的 Ajax 请求和轮询操作,提升了应用的实时性和用户体验。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/670c876b14fe9bf45f1160de