简介
在前端中，事件流（Event Stream）是一种实时通信的技术，它能够向客户端推送持续性的数据，以便客户端及时更新。而 EventSource 是 HTML5 规范中定义的一种事件流接口，通过该接口可以建立与服务器之间的单向连接，并且能够获取服务器不断发送的消息。
然而，由于浏览器兼容性问题，某些旧版本的浏览器并不支持 EventSource 接口，这就需要使用 eventsource-polyfill 库来解决兼容性问题。
本文将会详细介绍如何使用 npm 包 eventsource-polyfill 来实现浏览器与服务器之间的事件流通信。
安装
安装 eventsource-polyfill 只需要使用 npm 命令即可：
npm install eventsource-polyfill
使用方法
引入
在使用 eventsource-polyfill 之前，需要先引入该库：
import EventSource from 'eventsource-polyfill';
或者在 HTML 页面的 <script> 标签中进行引用：
<script src="node_modules/eventsource-polyfill/dist/eventsource.min.js"></script>
创建对象
创建 EventSource 对象时，需要传入一个 URL参数 ，该参数表示事件源的地址。例如：
const eventSource = new EventSource('/my-event-stream');
事件监听
接下来，需要指定需要监听的事件类型，并在事件触发时执行相应的回调函数。例如：
eventSource.addEventListener('message', event => { console.log(event.data); });
使用 addEventListener() 方法可以监听各种事件。在 event 对象中包含了当前事件的详细信息，其中最常用的属性是 data，它表示从服务器接收到的数据。
除了 message 事件外，还有其他常见的事件类型，例如：
open: 当连接建立时触发。error: 在连接发生错误时触发。close: 在连接关闭时触发。
关闭连接
当不再需要与服务器进行通信时，应该关闭 EventSource 对象以释放资源。例如：
eventSource.close();
示例代码
下面是一个完整的示例代码，它通过 eventsource-polyfill 库实现了从服务器获取消息并输出到控制台的功能：
-- -------------------- ---- ------- ------ ----------- ---- ----------------------- ----- ----------- - --- -------------------------------- --------------------------------------- ----- -- - ------------------------ --- ------------------------------------- ----- -- - --------------------- --- --------------------------------------- -- -- - -------------------- ---展开代码
总结
本文介绍了如何使用 npm 包 eventsource-polyfill 来解决浏览器兼容性问题，实现浏览器与服务器之间的事件流通信。通过本文的学习，读者可以了解到 EventSource 接口的使用方法以及如何在不同浏览器环境下进行兼容处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/54939
