什么是Server-Sent Events（SSE）？
Server-Sent Events（SSE）是一种基于HTTP协议的服务器向客户端推送事件的技术，它允许服务端与客户端之间实现实时通信。SSE是HTML5的一部分，是一种轻量级的和简单易用的协议，它主要用于推动文本和JSON数据。
SSE的实现基于一个简单的协议，它与WebSockets的不同之处在于用途和机制。WebSockets通常用于实现双向通信，而SSE主要用于服务端向客户端单向推送数据。
SSE的工作原理
SSE通过HTTP协议发送事件，类似于服务端向浏览器发送HTTP响应。服务器将数据发送到HTTP的标准响应中，并以特殊的方式注明其类型为“text/event-stream”。 然后客户端通过创建一个EventSource对象来建立连接，服务器发送数据时，客户端通过监听onmessage事件来接收数据。
SSE的客户端与服务器交互的过程：
- 客户端创建一个指向服务器的EventSource对象
- 服务器向客户端发送事件流消息
- 客户端监听EventSource对象的onmessage事件，获取服务器发来的数据
- 服务器或客户端可以选择结束事件流，或者关闭连接
SSE的优点
SSE具有以下优点：
- 实时性：SSE允许服务器向客户端推送实时数据，而不需要客户端定期轮询服务器。
- 简单：与WebSockets相比，SSE具有更简单的协议。
- 可靠性：SSE采用基于HTTP长连接的机制，连接的可靠性相对较高。
- 跨域支持：SSE支持跨域通信，客户端可以从任何域中得到服务器的数据。
SSE的应用场景
由于SSE的实时性和简单性，它适用于以下场景：
- 消息通知：SSE可以用于向客户端推送实时的消息通知。
- 监控数据：SSE适用于拉取实时的监控数据。
- 在线聊天：SSE可以用于在浏览器中实现实时聊天功能。
- 股票数据：金融行业的实时数据显示应用程序可以使用SSE。
SSE的示例代码
服务器端
下面是使用Node.js和Express框架实现的SSE示例代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
---------------- ----- ---- -- -
----------------------------- ---------------------
------------------------------ ------------
----- ------ - --------------
-----------------
---
-------- ------------- -
----- ------ - --- --------------------------------
---------------------- -
----- ---- - ------ ----- ---------------------------
-------------------
-- ------
------ -------
-
-----------------上面通过Express框架实现了一个“/chat”路径的SSE服务，它每秒钟向客户端推送一个带有时间戳的消息。
客户端
下面是使用JavaScript和EventSource对象实现的SSE示例代码：
const source = new EventSource('/chat');
source.onmessage = (event) => {
console.log(event.data);
};上面的代码创建了一个指向SSE服务的EventSource对象，当服务端推送消息时，客户端通过onmessage事件监听事件流中的消息，并将其打印到控制台。
总结
SSE是一种实现服务器向客户端推送实时事件的技术，它使用HTTP协议，具有实时性、简单性、可靠性和跨域支持等优点。SSE适用于各种类型的实时应用，如消息通知、在线聊天、监控数据显示等。本文对SSE的工作原理、优点及应用场景进行了详细解析，并提供了基于Node.js和JavaScript的示例代码，以方便读者学习和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647f5f5b48841e9894f05f15