Server-Sent Events 通信技术介绍-JavaScript中文网-JavaScript教程资源分享门户

随着互联网越来越发达，实时通信已经成为了现代化 Web 应用程序中至关重要的一部分。而 Server-Sent Events (SSE) 通信技术就是一种用于 Web 应用程序的服务器推送技术，使得浏览器可以接收服务器推送的数据。

简介

SSE 技术被设计用于简化实时数据传输，它通过一个持久的连接，允许 Web 应用程序从服务器端接收事件数据。这种数据是被格式化过的，以便能直接通过 JavaScript 访问。这种技术可以用来推送日志文件、实时聊天等应用。

SSE 与其他类似技术相比，有其优点和局限性。SSE 是单向的，只允许从服务器向浏览器推送数据，但不支持双向同时并发的推送。这种技术目前的主要应用场景是在需要从服务器向浏览器推送数据，而浏览器无需向服务器发送数据的应用。SSE 还可以自动重新连接，避免了客户端和服务器在传输过程中断开连接的问题。

实现

使用 SSE 的前提是 Web 服务器必须支持 SSE 协议。要实现 SSE 连接，需要创建一个发送响应事件流的事件源（EventSource），然后在服务器端与客户端之间建立一个长连接，直到连接到底被断开。下面是一个关于如何创建 SSE 事件流的基本示例：

const eventSource = new EventSource('/events');

eventSource.onmessage = (event) => {
  console.log(event.data);
};

如上所述，JavaScript 代码使用一个 URL，向服务器请求一个 SSE 事件流。不同于常规 AJAX 请求，服务器的响应头必须包含头部 Content-Type: text/event-stream，这个告诉浏览器响应是一个 SSE 事件流。SSE 事件流采用文本格式的，该事件流的每条消息是一个以 data: 开头的字段，标识为一条消息。每行消息名称必须以 \n\n 换行符结尾。服务器推送的每个消息都必须通过一个唯一的 id: 标识符来标识。同时，事件可以通过 retry: 字段来指定重新连接的间隔秒数。下面是一个简单的 SSE 响应示例：

HTTP/1.1 200 OK
Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive

data: {"message":"hello, world!","timestamp":"2019-01-01 00:00:00"}

data: {"message":"it's a test!","timestamp":"2019-01-01 00:00:01"}

如上所述，SSE 响应包含了多个消息。当页面向服务器端发送请求并建立 SSE 连接时，就会开始接收到这些消息，并通过 JavaScript callbacks 处理它们以达到实时更新数据的目的。

总结

通过使用 SSE 技术，Web 应用程序可以实现持久连接和客户端推送数据，同时减轻了服务器的负担和优化了网络带宽。不过，除非在需要单向通信时，才应考虑使用 SSE 技术。这是因为 SSE 不支持双向通信，而双向通信可能更适合支持实时聊天或多人协作应用。尽管如此，SSE 作为实时通信的一种方式，已成为了不可或缺的技术之一。

参考资料

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