在前端开发中，我们经常需要与服务器进行实时通信，以便及时地更新数据和状态。而 Server-sent Events（SSE）则是一种实现实时通信的技术之一。本文将介绍 SSE 中的事件流及其使用方法。
什么是 Server-sent Events
Server-sent Events 是一种基于 HTTP 的实时通信技术，它允许服务器向客户端发送事件流，而客户端则可以通过 EventSource API 来订阅这些事件流。SSE 的优点是它可以在客户端和服务器之间建立长连接，从而避免了频繁地建立和断开连接的开销。
事件流
在 SSE 中，事件流是由一系列事件组成的。每个事件都是一个文本消息，由一个或多个字段组成，每个字段之间使用 : 分隔。下面是一个简单的事件示例：
event: message data: Hello, world!
这个事件的类型是 message，消息内容是 Hello, world!。需要注意的是，事件的字段名称必须是固定的，分别是 event 和 data。其中 event 字段表示事件类型，而 data 字段则表示事件数据。
在事件流中，每个事件之间必须使用一个空行进行分隔，例如：
event: message data: Hello, world! event: message data: How are you?
这个事件流中包含两个事件，分别是类型为 message 的事件，消息内容分别是 Hello, world! 和 How are you?。
使用方法
在客户端使用 SSE 首先需要创建一个 EventSource 对象，然后通过 addEventListener 方法来监听事件流。例如：
const eventSource = new EventSource('/events');
eventSource.addEventListener('message', (event) => {
console.log(event.data);
});这个代码片段中，我们创建了一个 EventSource 对象，它的 URL 是 /events。然后我们使用 addEventListener 方法来监听 message 类型的事件，并在事件发生时打印事件的数据。
在服务器端，我们需要使用 SSE 来向客户端发送事件流。以下是一个简单的 Node.js 示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
----------------- ------------
---------------- ------ -------------
-------------- -- -
----------------- ------------
---------------- ----- ----------------------------
-- ------
---
--------------------这个示例中，我们创建了一个 HTTP 服务器，它的响应头包含了 Content-Type、Cache-Control 和 Connection 等字段。然后我们向客户端发送了一个类型为 message 的事件，消息内容是 Hello, world!。接着我们使用 setInterval 方法每秒钟向客户端发送一个事件，消息内容是当前时间戳。需要注意的是，在每个事件之后必须写入两个换行符，以便告诉客户端事件已经结束。
总结
Server-sent Events 是一种基于 HTTP 的实时通信技术，它允许服务器向客户端发送事件流，而客户端则可以通过 EventSource API 来订阅这些事件流。事件流由一系列事件组成，每个事件都是一个文本消息，包含一个或多个字段。在客户端使用 SSE 需要创建一个 EventSource 对象并监听事件流，而在服务器端则需要向客户端发送事件流。SSE 的优点是它可以在客户端和服务器之间建立长连接，从而避免了频繁地建立和断开连接的开销。
参考链接
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66416075d3423812e4f6320a