Server-sent Events 使用手册及相关资料

什么是 Server-sent Events？

Server-sent Events 是一种基于 HTTP 的推送技术，用于服务器向客户端实时发送事件和数据。它可以用于实时通知用户新的消息、更新和数据等。与传统的轮询方式相比，Server-sent Events 更加高效、可靠和节省带宽。

如何使用 Server-sent Events？

基本用法

使用 Server-sent Events 需要以下几个步骤：

1. 在服务器上创建一个能够发送 Server-sent Events 的端点。
2. 在客户端使用 JavaScript 创建一个 EventSource 对象，并指定服务器端点的 URL。
3. 在服务器端发送事件和数据。

以下是一个简单的示例：

服务器端代码：

-- -------------------- ---- -------
---- ----- ------ ------ --------

--- - ---------------

---------------------
--- ---------
    --- -----------
        ----- ------ ----- ----------
        ----- ------ ------- -- ----------- ------------
    ------ -------------------- ---------------------------------

客户端代码：

var source = new EventSource('/events');
source.addEventListener('message', function(event) {
    console.log(event.data);
});

在上面的示例中，服务器使用 Flask 框架创建了一个 /events 路由，该路由返回一个生成器函数的响应。生成器函数通过 yield 语句发送事件和数据。客户端使用 JavaScript 创建了一个 EventSource 对象，并监听 message 事件，打印出接收到的数据。

事件类型

Server-sent Events 可以发送多种类型的事件。以下是一些常见的事件类型：

• message：普通消息。
• error：错误消息。
• open：连接已经打开。
• close：连接已经关闭。

在服务器端发送事件时，可以指定事件类型，例如：

yield 'event: message\ndata: Hello World\n\n'

在客户端监听事件时，可以指定事件类型，例如：

source.addEventListener('message', function(event) {
    console.log(event.data);
});

数据格式

Server-sent Events 可以发送多种类型的数据。以下是一些常见的数据格式：

• data：普通文本。
• id：事件的 ID。
• retry：重新连接的时间间隔。

在服务器端发送事件时，可以指定数据格式，例如：

yield 'data: Hello World\n'
yield 'id: 123\n'
yield 'retry: 10000\n\n'

在客户端监听事件时，可以获取数据格式，例如：

source.addEventListener('message', function(event) {
    console.log(event.data);
    console.log(event.lastEventId);
    console.log(event.retryTime);
});

连接状态

Server-sent Events 可以发送连接状态的信息，例如连接已经打开、连接已经关闭等。在服务器端发送连接状态时，可以使用以下格式：

yield ': ping\n\n'

在客户端监听连接状态时，可以使用以下代码：

-- -------------------- ---- -------
------------------------------- --------------- -
    ----------------------- ---------
---

-------------------------------- --------------- -
    ----------------------- --------
---

-------------------------------- --------------- -
    ----------------------- ---------
---

相关资料

• MDN Web Docs: Server-sent Events
• HTML Living Standard: Server-sent Events
• Using server-sent events
• Server-Sent Events with Flask
• Server-Sent Events with Django
• EventSource polyfill

总结

Server-sent Events 是一种基于 HTTP 的推送技术，用于服务器向客户端实时发送事件和数据。它可以用于实时通知用户新的消息、更新和数据等。使用 Server-sent Events 需要在服务器上创建一个能够发送 Server-sent Events 的端点，并在客户端使用 JavaScript 创建一个 EventSource 对象来监听事件。Server-sent Events 可以发送多种类型的事件和数据，以及连接状态的信息。在使用 Server-sent Events 时，需要注意浏览器的兼容性和性能问题，并遵循相关的规范和最佳实践。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66091d2bd10417a222794ca7