前言
SSE （Server-Sent Events）是一种服务器向客户端推送数据的协议。相比 WebSocket，SSE 更加轻量，它不需要建立长连接，也不需要双向通信，适用于一些单向数据推送的场景。在实际开发中，我们常常需要在前端使用 SSE 来接收服务器的推送数据。在本文中，我们将介绍一个常用的 npm 包 sse-js，它是一个支持 SSE 协议的工具库。
安装
首先，我们需要使用 npm 安装 sse-js：
npm install sse-js
或者在项目的 package.json 文件中添加依赖：
"dependencies": {
"sse-js": "^1.1.6"
}使用
sse-js 库提供了 EventSource 类，它是 SSE 协议的核心实现。EventSource 类基于浏览器原生的 EventSource API 进行封装，使得我们可以方便地在前端接收服务器的推送数据。
要使用 sse-js，我们需要先创建一个 EventSource 实例：
import EventSource from 'sse-js';
const eventSource = new EventSource('http://localhost:3000/events');这里的 http://localhost:3000/events 是服务器的 SSE 接口地址，我们需要根据实际情况进行设置。
创建 EventSource 实例后，我们可以通过监听其 data 事件来接收服务器推送的数据：
eventSource.addEventListener('data', event => {
console.log('Received data:', event.data);
});其它常用的事件包括 error（服务器发送错误时触发）和 open（连接成功后触发）。我们也可以通过 removeEventListener 进行事件的解绑操作。
在接收完数据后，我们需要手动关闭 EventSource 连接，以释放资源：
eventSource.close();
示例代码
下面是一个完整的示例代码，演示了如何在前端使用 sse-js 接收服务器发送的数据：
-- -------------------- ---- ------- ------ ----------- ---- --------- ----- ----------- - --- -------------------------------------------- ------------------------------------ ----- -- - --------------------- ------- ------------ --- ------------------------------------- ----- -- - ----------------------- -------- ------- --- ------------------------------------ ----- -- - ----------------------- ---------- --- --------------------------------------- -- -- - -------------------- ---
在本示例中，我们在接收到数据、错误或连接成功时，分别打印了相应的日志。同时，我们还监听了浏览器的 beforeunload 事件，以在用户关闭页面时关闭 EventSource 连接。
结语
sse-js 提供了一种方便、简单的方式，让我们能够在前端使用 SSE 协议接收服务器的推送数据。如果你正在处理 SSE 协议的相关任务，可以尝试使用 sse-js，并根据实际情况进行相应的优化和改进，以提高性能和稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005731681e8991b448e9464