Server-sent Events 的数据传输格式详解-JavaScript中文网-JavaScript教程资源分享门户

什么是 Server-sent Events

Server-sent Events（SSE）是一种浏览器与服务器之间实现实时双向通信的技术。它是 HTML5 规范的一部分，使用简单、适用范围广，可用于实现各种实时通信应用，如聊天室、股票市场等。

SSE 建立在 HTTP 协议之上，使用长连接（长轮询）来接收服务器发送的事件流。与 WebSocket 不同，SSE 只能由服务器向客户端发送消息，客户端无法主动向服务器发送消息。

SSE 的传输格式是基于纯文本的，使用了一些自定义消息头（EventSource ）和规范化的消息体格式。下面是 SSE 的消息格式：

:event-name
data: message data

其中，冒号后面为消息头部分，data:为指定数据部分。其中，event-name 是可选的，它指定了事件名称，用于对数据进行分类和过滤。

消息的正文部分使用空行分隔，第一个空行之前的部分是消息头，第一个空行之后的部分是消息体。消息体以 data: 开头，后面跟着一个数据字符串，数据字符串中可以包含多行文本。

下面是一个例子：

event: new-message
data: {"user":"Alice","message":"Hello World"}

event: new-message
data: {"user":"Bob","message":"How are you?"}

这个例子包含了两个事件，event 名称分别是 new-message，它们都包含了一个 JSON 格式的数据体，用于表示聊天室中用户发送的消息。

SSE 可以通过浏览器内置的 EventSource() 对象来实现。下面是一个简单的示例代码：

const eventSource = new EventSource('/events');
eventSource.onmessage = event => {
  console.log(event.data);
};

在这个示例中，我们通过 EventSource() 对象建立一个 SSE 的连接，并指定了服务器端的 URL。当服务器端向客户端发送消息时，onmessage 事件会被触发，我们可以在这里接收到服务器发送过来的消息。

当我们不再需要 SSE 连接时，可以通过调用 close() 方法来关闭连接。

eventSource.close();

与其他实时通信技术相比，SSE 有以下优点：

灵活性高：SSE 不需要像 WebSocket 那样建立一个全双工的通道，它只是基于 HTTP 协议的一种扩展，因此可以与现有的 Web 技术（如 AJAX、RESTful API）无缝协作。
兼容性好：SSE 能够在绝大部分现代浏览器上对接收数据的操作系统进行良好的支持。
代码实现较为简单，不需要专门编写客户端的 Socket 代码。

但是它还是有其缺点：

本文主要介绍了 Server-sent Events 技术的消息格式以及如何使用 SSE 来实现实时通信。SSE 技术具有简单灵活、兼容性好的优点，但也存在一些局限性。

我们可以通过学习 SSE 技术，掌握一些实时通信的基础知识，并在实际开发中应用它，从而能够更好地满足用户对实时数据的需求。

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