在 Web 应用程序中，实现长轮询是一种常见的方式，以便在不刷新页面的情况下，动态地更新 Web 页面上的内容。Server-sent Events 是一种快速、简单的实现长轮询的技术。下面就介绍一下如何使用 Server-sent Events 实现长轮询。
Server-sent Events
Server-sent Events (SSE) 是一种与服务器进行单向通信的技术，它允许服务器将消息推送到客户端，同时客户端可以在消息到达时立即处理它。与其他一些实现长轮询的技术相比，SSE 有许多优点，比如可以避免跨域问题、易于使用和实现、兼容各种浏览器等等。
SSE 协议的核心是建立一个 HTTP 连接，在这个连接上服务器可以向客户端发送一段文本数据，客户端通过监听这个连接来接收数据。SSE 消息的格式非常简单，其默认格式如下：
event:eventName data:messageData event:eventName data:messageData
其中 event 表示事件类型，可以省略；data 表示消息数据。
使用 SSE 实现长轮询
下面是一个示例，演示如何使用 SSE 来实现长轮询。
- 服务端代码
服务端需要为 SSE 连接提供一个端点，客户端将连接到这个端点，并通过监听连接来接收数据。下面是一个 Node.js 示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----- --- - --- -------
--------------------------------------------------------------
-- ------
---
--------------------服务端将每秒钟向客户端发送一个时间事件及其时间戳。
- 客户端代码
客户端通过浏览器发送一个请求来连接到服务端，然后监听连接以接收数据。下面是一个 JavaScript 示例：
const eventSource = new EventSource('/sse');
eventSource.addEventListener('time', (event) => {
const time = event.data;
console.log(time);
});客户端每当接收到一个名为 time 的事件时，就会将接收到的数据输出到控制台中。
总结
使用 Server-sent Events 可以轻松地实现 Web 开发中的长轮询，它是一种简单、高效又可靠的技术。SSE 不仅可以用于实现长轮询，还可以用于实现实时聊天、实时地图和实时应用程序等等。需要注意的是，虽然 SSE 可以避免跨域问题，但它也存在一些限制，比如只能发送文本数据、无法进行双向通信等等。在选择技术时，需要综合考虑自己的需求和限制，选择最适合的技术方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64736cbc968c7c53b00dcbc1