随着互联网的蓬勃发展，实时通知成为了许多 web 应用程序中必不可少的一项功能。通过实时通知，用户可以即时获取到最新的消息或者更新，而不需要手动刷新页面。
传统上，实现实时通知需要使用轮询或者 WebSocket。但是，这些方案在实现上都存在着一定的局限性。轮询会过多地消耗服务器资源，WebSocket 会增加服务器的复杂度和成本。
在这种情况下，Server-Sent Events（SSE）应运而生。SSE 是一种在客户端和服务器之间进行全双工通信的协议，它可以在服务器端发送事件（event），同时客户端也可以通过 EventSource API 来监听这些事件。
本文将详细介绍如何使用 SSE 实现实时通知，并提供相关示例代码和指导意义。
SSE 的基本原理
SSE 实现实时通知的基本原理如下：
- 客户端通过 EventSource API 向服务器建立连接。
- 服务器在收到连接请求后，会返回一个 MIME 类型为 text/event-stream 的数据流。
- 服务器可以在数据流中不断地发送事件（event），每个事件包含一个 event 字段和一个 data 字段。
- 客户端监听这些事件，并在接收到事件后，执行相应的操作。
SSE 的优势
相比于 WebSocket 和轮询，SSE 有以下几个优势：
- 消耗更少的资源。SSE 消耗的资源比 WebSocket 和轮询更少，因为它只需要一个长连接来保持通信。
- 支持跨域通信。SSE 支持跨域通信，而 WebSocket 需要通过特殊的协议来支持跨域通信。
- 更加简单易用。SSE 的实现和使用都比 WebSocket 和轮询更加简单易用。SSE 可以以普通的 HTTP 请求和响应方式来实现。
下面我们来介绍如何使用 SSE 实现实时通知的正确姿势。
服务器端实现
服务器端需要实现以下三个步骤：
建立 SSE 连接。
const headers = { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive' }; res.writeHead(200, headers); res.write('\n');发送事件。
服务器可以通过 res.write() 方法向客户端发送事件。
const data = 'Hello, world'; res.write(`data: ${data}\n\n`);上述示例代码向客户端发送了一个名为 message 的事件，并将消息内容设置为 "Hello, world"。
关闭 SSE 连接。
服务器可以通过 res.end() 方法来关闭 SSE 连接。
res.end();
客户端实现
客户端需要实现以下两个步骤：
建立 SSE 连接。
const eventSource = new EventSource('/events'); eventSource.onopen = () => { console.log('SSE connection established.'); };监听事件。
客户端可以通过 eventSource.onmessage() 方法来监听事件。
eventSource.onmessage = (event) => { const data = JSON.parse(event.data); console.log(`Received a "${data.event}" event with data: ${data.data}`); };上述示例代码监听了服务器发送的名为 message 的事件，并将消息内容打印出来。
完整示例代码
服务器端示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
-- -------- --- ---------- -
----- ------- - -
--------------- --------------------
---------------- -----------
------------- ------------
--
------------------ ---------
----------------
-------------- -- -
----- ---- - ------- -------
---------------- --------------
-- ------
----------------------------------- -- -- -
----------
-- -------
- ---- -
------------------ - --------------- ----------- ---
---------
------
------
---------- ---------------
-------
------
------- ------------
--------
----- ----------- - --- -----------------------
------------------ - -- -- -
---------------- ---------- ---------------
--
--------------------- - ------- -- -
----- ---- - -----------------------
---------------------- - ---------------- ----- ---- ----- -----------------
--
---------
-------
-------
---
-
---
------------------- -- -- -
------------------- --------- -- ------------------------
---客户端示例代码：
-- -------------------- ---- -------
------
------
---------- ---------------
-------
------
------- ------------
--------
----- ----------- - --- -----------------------
------------------ - -- -- -
---------------- ---------- ---------------
--
--------------------- - ------- -- -
----- ---- - -----------------------
--------------------- - --------------- ----- ---- ----- ---------------
--
---------
-------
-------指导意义
通过本文的介绍，我们了解了 SSE 的基本原理、优势以及使用方法，并提供了具体的示例代码。SSE 在 web 应用程序中实现实时通知是非常实用和有效的一种技术手段，同时也有着较低的成本和复杂度。
使用 SSE 实现实时通知需要注意以下几点：
- 数据格式。SSE 通过数据流实现，因此需要使用特定的数据格式来发送事件和消息。
- 连接保持。SSE 使用长连接保持通信，服务器需要确保连接的稳定性，并及时关闭不必要的连接。
- 路由设置。SSE 和普通的 HTTP 请求和响应方式有所不同，需要在路由设置时做出特殊的处理。
在实际使用过程中，需要根据不同的需求和场景选择不同的实现方案，并进行相应的优化和调整。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6797398c504e4ea9bde48447