Server-sent Events（SSE，即“服务器推送事件”），是用于 web 应用程序的一种新型服务器端向客户端推送数据的技术。SSE 将实时数据推送到客户端，而无需客户端进行任何的轮询。SSE 已被广泛应用于众多 web 应用程序，包括实时聊天、 notification 等。
本文将详细介绍 SSE 技术的实现原理与常见应用场景，并提供示例代码，帮助读者深入、全面地理解 SSE，并在应用中得心应手。
实现原理
SSE 使用 HTTP/1.1 的长连接机制，即在服务端将连接保持打开，直到向客户端发送一条特殊的“end of stream”消息，或者发生了错误。客户端在接收到响应后，便可以监听这个响应，以便在新数据到达时及时接收消息。下图简单描述了 SSE 的实现原理：
为了使用 SSE，需要在服务端建立 HTTP 连接，然后使用 HTTP 头指示请求是 SSE 类型。服务端在向客户端发送事件时，默认会在每个事件的前面添加一个标识符，即“Event: ”，并以“data: ”字符串开头表示事件数据。例如，下面是一个 SSE 包的示例：
-- -------------------- ---- ------- -------- --- -- ------------- ------------------------------- -------------- -------- ----------- ---------- ------ ---------- ----- ---- -- - --- -------- ------ ---------- ----- - ------ --------
在浏览器端接收到 SSE 包后，即可通过监听 message 事件从服务端获取并解析新数据，如下所示：
const eventSource = new EventSource('/mySSE'); //建立SSE连接
eventSource.onmessage = function(event) {
console.log(event.data);
};应用场景
SSE 技术已广泛应用于如网络聊天、订单实时通知、在线游戏等场景，使得这些应用程序在实时性和用户体验方面有了更为出色的表现。
聊天室
SSE 技术可轻松实现实时聊天功能，因为 SSE 技术可以使得服务端向多个客户端同时推送数据。例如，下面是一个简单的聊天室应用程序的示例代码：
服务端代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- -- - --------------
----- ---- - ----------------
----------------------- ---- -- -
-- -------- --- ---- -
------------------ ---------------- --------------
------------------------------- - --------------- ----- ----- -- -
--------------
---
-
-- -------- --- ------------ -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
----------------
-------------- -- -
----- ------- - ------ --- -------- ----- -------------
-------------------
-- ------
-
----------------客户端代码：
const source = new EventSource('/messages');
source.onmessage = function(e) {
const message = document.getElementById('message');
message.textContent = e.data;
};页面代码如下：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ---------- ---- ---- ------------ ------- ------ ---- ------------------- ------- ---------------------- ------- -------
订单实时通知
SSE 技术还可用于实现订单实时通知功能。在电商网站中，客户提交订单后，订单处理系统可以将订单信息实时地推送到客户端浏览器，保证客户能在第一时间获得订单确认信息。
在线游戏
SSE 技术也适用于在线游戏场景。我们可以用 SSE 技术实现游戏新任务、系统通知等实时推送功能。
总结
本文介绍了 Server-sent Events 技术的基本原理与应用场景，提供了相应的代码示例，帮助读者深入理解 SSE 技术的实际应用。在实现网页间的通讯和数据推送方面，SSE 技术成为了一个效率较高、适应场景广泛的解决方案。通过学习和实践，我们能够运用 SSE 技术为实际应用开发带来更多效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66583766d3423812e4e1f85d