前言
在现代 Web 应用程序中，实时通讯和消息推送功能已经变得越来越重要。这些功能可以帮助我们构建更加交互性和实时性的应用程序，例如在线聊天、即时通讯、实时数据可视化等。
在这篇文章中，我们将介绍如何使用 SSE（Server-Sent Events）技术实现实时通讯和消息推送功能。我们将详细讨论 SSE 的工作原理、如何在前端和后端实现 SSE，以及一些实际应用场景和示例代码。
SSE 的工作原理
SSE 是一种基于 HTTP 的实时通讯技术，它允许服务器向客户端发送事件流（Event Stream）。这些事件流可以包含任意类型的数据，例如文本、JSON、XML 等。客户端可以通过 JavaScript API 监听这些事件流，并在收到新事件时执行相应的操作。
SSE 的工作原理非常简单。客户端通过 HTTP 协议向服务器发送一个特殊的请求，该请求包含一个特殊的头部 Accept: text/event-stream。服务器接收到这个请求后，会保持连接打开，并不断地向客户端发送事件流。客户端通过 EventSource API 监听这些事件流，当有新事件到达时，会触发 onmessage 事件，从而执行相应的操作。
SSE 的优点在于它不需要建立长连接或者轮询，而是使用 HTTP 的长连接机制，从而能够实现低延迟和高效率的实时通讯。
在前端实现 SSE
在前端实现 SSE 非常简单。我们只需要使用 EventSource API 创建一个 SSE 对象，并通过 onmessage 事件监听服务器发送的事件流。例如：
const source = new EventSource('/api/events');
source.onmessage = function(event) {
console.log(event.data);
};上面的代码创建了一个 SSE 对象，然后监听 /api/events 路径的事件流。当有新事件到达时，会将事件的数据输出到控制台中。
需要注意的是，SSE 的请求必须使用 GET 方法，并且不能设置 Content-Type 头部。否则，浏览器会将请求视为普通的 AJAX 请求，并且无法保持连接打开。
在后端实现 SSE
在后端实现 SSE 的过程也非常简单。我们只需要使用某种编程语言和框架，向客户端发送事件流即可。下面是使用 Node.js 和 Express 框架实现 SSE 的示例代码：
-- -------------------- ---- -------
---------------------- ------------- ---- -
----------------------------- ---------------------
------------------------------ ------------
---------------------- -
----- ---- - - -------- ------- ----- --
---------------- ------------------------------
-- ------
---上面的代码定义了一个路由 /api/events，当有客户端连接时，会不断地向客户端发送事件流。事件流的格式必须遵循 SSE 的规范，即以 data: 开头，以两个换行符结尾。数据可以是任意类型的，但通常使用 JSON 格式。
应用场景和示例代码
SSE 可以应用于各种实时通讯和消息推送场景。下面是一些示例代码，帮助你更好地理解 SSE 的应用：
实时股票行情
-- -------------------- ---- -------
--------------------- ------------- ---- -
----------------------------- ---------------------
------------------------------ ------------
---------------------- -
----- ----- - ------------- - ----
----- ---- - - ------- ------- ------ ---------------- --
---------------- ------------------------------
-- ------
---上面的代码定义了一个路由 /api/stock，当有客户端连接时，会不断地向客户端发送股票行情数据。数据包含股票代码和价格，每秒钟更新一次。
实时聊天应用
-- -------------------- ---- -------
----- ------- - ---
-------------------- ------------- ---- -
----------------------------- ---------------------
------------------------------ ------------
----- -------- - -----------
----- --------- - - --- --------- --- --
------------------------
--------------- ---------- -
------------------------ ---------- ---------
------------------------------------------ ---
---
---
--------------------- ------------- ---- -
----- - ------- - - ---------
-------------------------------- -
----- ---- - - --- ---------- ------- --
----------------------- ------------------------------
---
---------------
---上面的代码定义了两个路由 /api/chat 和 /api/chat，分别用于客户端连接和发送消息。当客户端连接时，会将客户端的响应对象保存到一个数组中。当有新消息到达时，会向所有客户端发送消息数据。
总结
通过本文的介绍，我们了解了 SSE 技术的工作原理、如何在前端和后端实现 SSE，以及一些实际应用场景和示例代码。SSE 技术可以帮助我们构建更加交互性和实时性的应用程序，是现代 Web 开发中不可或缺的一部分。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6577c31cd2f5e1655d172e9f