简介
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