简介
SSE（Server-Sent Events）指的是服务器推送数据给客户端的一种技术，它将数据以流的形式传输到客户端，允许实时地获取服务器端的数据更新。相比于传统的轮询方式，SSE 可以减少不必要的请求和服务器资源的消耗，并提高数据传输的效率。在前端开发中，SSE 技术通常用于实现实时通信、实时数据展示等功能。
本文将介绍如何在 Node.js 环境下使用 SSE 实现实时数据传输，并提供相关的代码示例，帮助读者更好地理解和应用 SSE 技术。
SSE 的基本原理
在使用 SSE 技术前，我们先了解一下它的基本原理。SSE 技术通过建立一个单向通道，允许服务器向客户端发送事件流（Event Stream）。事件流是包含文本数据的 HTTP 响应，它的 MIME 类型是 text/event-stream。客户端通过监听打开的连接来实现类似于 WebSocket 的实时数据传输。
SSE 技术的核心是 EventSource 对象，它通过 new EventSource(url) 方法创建一个 SSE 连接，并通过 onmessage 方法接收服务器端发送的数据。在 Node.js 环境下，我们可以使用 sse-express 模块来方便地实现 SSE 功能。
在 Node.js 中使用 SSE
在 Node.js 中使用 SSE 需要用到 sse-express 模块，它可以很方便地实现 SSE 功能。下面是一个简单的示例：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---------- - ----------------------- ----- --- - ---------- ---------------------- -------------- -- - ------------------ - ----- ------- ----- --- -- ------ -----------------
在上面的代码中，我们使用 sse-express 模块创建了一个 SSE 连接。接着，我们使用 setInterval 方法定期向连接发送消息。连接的名称为 message，消息内容为 { data: 'Hello, SSE!' }。运行代码后，我们可以在浏览器端监听这个连接，并实时接收服务器端发送的数据：
const source = new EventSource('/sse');
source.addEventListener('message', (event) => {
console.log(event.data);
});SSE 的高级应用
SSE 不仅可以用于简单的数据传输，还可以与其他技术结合使用，实现更为复杂的功能。下面是一些可能的应用场景：
实时聊天室
通过 SSE 技术，我们可以实现一个实时聊天室。在客户端打开连接后，服务器会将新的消息推送给所有连接的客户端。下面是一个简单的示例：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---------- - -----------------------
----- --- - ----------
----- ----------- - ---
----------------------
------------------------
-------------------- ----- ---- -- -
----- ------- - -----------------
-------------------------------- -- -
------------------------- - ----- ------- ---
---
----------------------
---
------------------- ----- ---- -- -
----------------
---------
--------------- --------------------
---------------- -----------
------------- -------------
---
-------------------
----------------
----- ------------- - ----------
--------------------------------
------------------------- -- -- -
----- ----- - -----------------------------------
-- ------ --- --- -
------------------------- ---
-
---
---
---------------- -- -- -
------------------- --------- -- ---- -------
---在上面的代码中，我们定义了一个 /connect 路由，客户端可以通过该路由建立 SSE 连接。连接建立后，服务器将连接对象加入到 connections 数组中，并监听连接的关闭事件。在新消息到达时，服务器将其推送到所有连接中。
客户端可以通过一个简单的 HTML 页面来测试 SSE 连接是否能正常工作：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- ------------
-------
------
------------- ---------
------
------ ----------- ---------------
------- ---------------------------
-------
---- --------------------
--------
----- ------ - --- ------------------------
----- -------- - ------------------------------------
---------------------------------- ------- -- -
----- ------- - ----------------------------
----- -------------- - ----------------------------
------------------------ - --------
-------------------------------------
---
----- ---- - -------------------------------
------------------------------- ------- -- -
-----------------------
----- -------- - --- ---------------
----------------- -
------- -------
-------- -
--------------- -------------------
--
----- ----------------
-------- ------------------------
---
---
---
---------
-------
-------在这个 HTML 页面中，我们创建了一个 EventSource 对象来连接服务器。当连接建立后，我们监听 message 事件，并把消息显示在页面上。同时，我们也定义了一个简单的表单来发送新的消息。
通过这个示例，我们可以看到 SSE 技术的强大之处。通过简单的代码，我们就可以实现了一个实时聊天室。相较于使用传统的 Ajax 请求来轮询服务器，使用 SSE 可以减少不必要的网络开销，同时也可以更快地更新消息。
实时数据展示
除了实时聊天室，SSE 技术还可以用于实时数据展示。例如，我们可以使用 SSE 技术来实现实时的股票价格展示。下面是一个简单的示例：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---------- - ----------------------- ----- --- - ---------- ---------------------- -------------- -- - ----- ---------- - ------------- - ---- ---------------- - ----- --------------------- --- -- ------ -----------------
在上面的代码中，我们每秒钟生成一个随机的股票价格，并将其推送到连接名为 stock 的连接中。客户端可以通过类似于下面的代码来监听这个连接：
const source = new EventSource('/sse');
source.addEventListener('stock', (event) => {
const price = event.data;
console.log(`New stock price: ${price}`);
});使用 SSE 可以方便地实现实时数据展示，在数据更新频率较高的情况下也能够保证较低的网络开销。
总结
SSE 技术是一种实现服务器端推送数据的技术。在 Node.js 环境下，我们可以使用 sse-express 模块方便地实现 SSE 功能。除了简单的数据传输，SSE 还可以和其他技术结合使用，实现更复杂的应用场景。在实际应用中，我们应当考虑数据更新频率、网络开销等因素，选择合适的数据传输方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648513a848841e9894405cb3