Server-Sent Events（简称 SSE）是一种前端实现即时通信的技术，通过这种技术，服务器可以主动推送消息给客户端，而不需要客户端不停地向服务器发送请求。在很多实时性要求较高，并且需要频繁刷新的场景下，SSE可谓是一种非常有效的实现方式。本文将介绍SSE的相关知识和用法，并通过示例代码和详细解释带你深入理解这一技术。
为什么需要SSE
在 Web 应用程序中，常常需要实时地向客户端发送事件通知、消息提醒等信息。在过去，要实现这样的效果只有使用基于轮询的方式，比如说，每隔一段时间发送 HTTP 请求，如果有新的通知，则将新的通知返回给客户端，但是这种方式会大量占用带宽和服务器资源，同时客户端也无法做到真正的实时更新。而使用 Server-Sent Events，可以避免这些问题。
如何使用SSE
在前端代码中，使用 EventSource 对象即可与服务器建立 SSE 连接。
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("http://localhost:8080/events");
source.onmessage = function(event) {
console.log(event.data);
};
} else {
console.log("Your Browser doesn't support Server-Sent Event");
}上面的代码中， EventSource 对象是 SSE 协议的核心。 EventSource 建立在 HTTP/1.1 协议的基础之上，使用标准的 HTTP 请求-响应格式，并且只支持 GET 方法。在服务器端，开发者需要设置响应头，指定 Content-Type 为 text/event-stream，然后按照一定的协议向客户端发送数据。下面的代码演示了如何在服务器端使用 Node.js 开发 SSE：
-- -------------------- ---- -------
--- ---- - ----------------
----------------------------------- --------- -
----------------------- -
--------------- -------------------- -------
---------------- ----------- ------
------------- ------------ ------
---
---------------------- -
--- ------- - ------ - - --- ------ - -------
------------------------ ----------
-- ------
--------------- ---------- -
---------------------- -- ------------------------
---上面的代码中，我们创建了一个 HTTP 服务器，并向客户端推送当前时间。
SSE协议详解
在使用 SSE 时，我们需要严格按照 SSE 协议的格式来发送数据到客户端。SSE 的数据格式不同于普通的 HTTP 响应，它需要使用固定的格式来包装数据，同时还需要避免使用 UTF-8 BOM 节点：
data: Hello SSE! data: This is a new message.
在 SSE 中，以冒号开头的行是注释行，以 data: 开头的行是数据行。多个数据行之间以空行分隔。
同时，SSE 还支持使用 event: 和 id: 字段来设置事件类型和事件ID：
event: new-message
data: {"from":"lucy","message":"hello world!"}
id: 1上面的代码中，我们发送了一个 new-message 类型的事件，并附带了一个来自 lucy 的 hello world! 消息。这个事件还指定了一个id为 1。
总结
Server-Sent Events是一种非常有效的实现即时通信的技术。通过直接连接到服务器来获取推送消息，SSE可以帮助开发者构建实时的、可扩展的网页应用程序。在前端代码中，使用 EventSource 对象即可与服务器建立 SSE 连接。在服务器端，我们需要按照 SSE 协议的格式来发送数据到客户端，并且设置响应头Content-Type为 text/event-stream。
示例代码：https://codepen.io/lzh96/pen/KKgEjPO
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6497c5e348841e98944cdd18