在前端开发中，WebSockets 和服务器推送技术变得越来越重要。而 EventSource 是一种轻量级的浏览器 API，用于与服务器建立持久连接并接收服务器推送。在本文中，我们将介绍如何使用 npm 包 eventsource 来使用 EventSource。
安装和引入 EventSource
首先，我们需要安装 eventsource 依赖包。可以使用 npm、yarn 等包管理工具进行安装：
npm install eventsource
安装完成后，在项目代码中引入 EventSource：
import EventSource from 'eventsource';
创建 EventSource 实例
创建 EventSource 实例时，需要传递一个 URL 参数，该参数指向服务器端推送数据的地址。例如，以下代码创建了一个 EventSource 实例，并监听了服务器推送的消息：
const url = 'http://localhost:3000/stream';
const es = new EventSource(url);
es.addEventListener('message', (e) => {
console.log(e.data); // 打印服务器推送的消息
});在上面的示例中，我们监听了 message 事件，该事件表示服务器端推送了一条消息。当服务器推送数据时，该回调函数会被调用，并打印出服务器推送的消息。
关闭 EventSource 连接
默认情况下，EventSource 实例会保持与服务器的连接。如果需要关闭连接，可以调用 close() 方法：
es.close();
错误处理
当 EventSource 连接断开或出现错误时，可以监听 error 事件来处理异常情况：
es.addEventListener('error', (e) => {
console.error(e); // 打印错误信息
});结论
使用 EventSource NPM 包实现 WebSockets 的服务器推送非常简单。通过安装和引入 eventsource 包以及创建和关闭 EventSource 实例，我们可以轻松地与服务器建立持久连接并接收服务器推送的数据。同时，我们还介绍了如何处理连接错误和异常情况。
完整示例代码如下：
-- -------------------- ---- ------- ------ ----------- ---- -------------- ----- --- - ------------------------------- ----- -- - --- ----------------- ------------------------------ --- -- - -------------------- -- ---------- --- ---------------------------- --- -- - ----------------- -- ------ --- -- ---- -- -----------
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/42136