前言：Server-Sent Events（SSE）是一种可以从服务器推送数据到客户端的技术，它与WebSocket相似，但仅支持一种协议——HTTP（和 HTTPS）。本文将深入探讨SSE技术，为您提供深度和实用性的指导意义。
SSE 简介
Server-Sent Events 是一项在 Web API 中定义的技术，它允许 Web 服务器将数据推送到客户端，而无需客户端请求数据。 这种技术基于 HTTP 协议，使用简单而有效的方式来推送数据流。SSE 是基于事件的，服务器发送的是一个事件流而不是一个二进制的数据流，它可以是文本数据、HTML 或 JSON 等。
以下是一个简单的 SSE 事件：
event: usermessage
data: {"username": "John", "message": "Hello world!"}
event: usermessage
data: {"username": "Alice", "message": "Hi everyone!"}此事件包含了一个 event 字段和一个 data 字段。 event 字段是一个字符串，它用于标识事件的类型。 data 字段则是事件的内容。这样，客户端可以通过监听 usermessage 事件来获取新消息。
SSE API
在浏览器端使用 Server-Sent Events 非常简单，只需要创建一个 EventSource 对象即可：
const source = new EventSource('/sse');这个对象会自动建立到服务器的持续连接，并监听服务器发送的事件。当服务器发送事件时，客户端就能够通过 EventSource 对象的 onmessage 事件处理程序接收到这些事件。
source.onmessage = function(event) {
console.log('收到了服务器发送的事件！', event.data);
};同时，你还可以监听其它的事件，如 onopen 和 onerror：
source.onerror = function(error) {
console.error('出错了!', error);
};
source.onopen = function() {
console.log('已经连接到了服务器');
};
SSE 优点
简单易用
相较于其他浏览器和服务器的通信方式，SSE 是一个非常简单的解决方案，因为它使用的是 HTTP 协议。
实时性
SSE 是一种实时技术，用于在不刷新页面的情况下自动更新内容。
可定制性
SSE 可以发送自定义事件类型，并发送相应的自定义数据，既可以是文本形式，也可以是二进制形式。
SSE 缺点
一次性的
SSE 只能传输单向的数据流，而不能进行双向通信。如果您需要在客户端和服务器之间建立实时双向通信，那么您应该使用 WebSocket。
兼容性
尽管大多数现代 Web 浏览器都支持 SSE，但是某些旧版浏览器不支持 SSE。因此，如果您需要支持旧版浏览器，那么您应该考虑使用其他技术。
SSE 示例
下面是一个使用 SSE 将服务器数据推送到客户端的基本示例。
-- -------------------- ---- -------
--- -------
-------- --------- -
------ - --- -----------------------------
------------- - --------------- -
------------------------
--
---------------- - --------------- -
------------------------- ------------
--
-------------- - --------------- -
-------------------------- -------
--
-
-------- ---------- -
-----------------------
---------------
-在上述示例中，我们创建了一个 EventSource 对象。我们指定了服务器端操作的 URL，以确保 SSE 连接建立到正确的端点。
客户端可以使用 SSE 监听服务器端发送的数据。在我们的示例中，我们捕获了 onopen、onmessage 和 onerror 事件，并在控制台中输出相关信息。
当我们关闭 SSE 连接时，我们调用 close() 方法，这样 SSE 连接就会被关闭并断开了与服务器的连接。
结论
在 Web 开发中，如果您需要实时将数据从服务器端推送到客户端，那么 Server-Sent Events 技术是非常有用的解决方案。 它可以帮助您构建出高性能、实时的 Web 应用程序。希望此文能对您有所帮助，感谢您的阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671ee6862e7021665efa5f97