随着互联网的蓬勃发展,实时通知成为了许多 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 请求和响应方式有所不同,需要在路由设置时做出特殊的处理。
在实际使用过程中,需要根据不同的需求和场景选择不同的实现方案,并进行相应的优化和调整。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6797398c504e4ea9bde48447