前言
事件流(EventSource) 能够让你从服务器端实时接收消息。但是浏览器兼容性不是很好，为了解决这个问题，EventSource Polyfill 库被开发出来提供了可靠的兼容性。@pirxpilot 是这个库的维护者，今天我们来详细了解这个库的使用方法。
安装
使用 npm 安装：
npm install @pirxpilot/eventsource-polyfill
导入
你可以使用 CommonJS 或 ES6 语法导入该库：
// CommonJS
const EventSource = require('@pirxpilot/eventsource-polyfill').default;
// ES6
import EventSource from '@pirxpilot/eventsource-polyfill';使用
使用该库就像使用原生 EventSource 一样，只需要通过创建 EventSource 实例来接收消息。但是我们需要在创建实例之前调用该库的 patch() 方法来修复不兼容的 API。
下面是一个简单的示例，我们将使用 Node.js 中的 http 模块 来创建服务器，并在浏览器端通过 EventSource 实例来接收服务器发送的消息：
首先，我们先创建一个 Node.js 服务器：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
------------------ ---------------- -------------------- ---------------- ----------- ------------- ---------------
----------------- ----------
-------------- -- -
----------------- ------------ ----- ----------------------------
-- ------
--------------- -- -- -
------------------- -- --------- -- ---- -------
---然后，我们在浏览器端创建 EventSource，并通过 onmessage 回调函数来接收数据：
-- -------------------- ---- ------- ------ ----------- ---- ---------------------------------- -------------------- ----- ----------- - --- ------------------------------------- --------------------- - ------- -- - ------------------------ -- ---------- --
现在，我们就可以在浏览器控制台中看到服务器发送的消息了。
深度解析
什么是 EventSource？
EventSource 是一个 HTML5 API，通过这个 API，可以从服务器端实时地接收消息。这种消息是通过一个持续的 HTTP 连接传送的，并以纯文本形式传输。
使用 EventSource 的方式非常简单：
const eventSource = new EventSource('/stream');
eventSource.onmessage = (event) => {
console.log(event.data);
};该代码会创建一个基于 /stream URL 的 EventSource 实例，当有新的数据到达时，onmessage 方法会被触发。
相对于 WebSocket，EventSource 更加简单易用，但其功能比 WebSocket 更加受限。由于 WebSocket 支持双向通讯和二进制数据传输等高级功能，因此在一些更为复杂的场景下，使用 WebSocket 更加合适。
EventSource 兼容性问题
虽然 EventSource 带来的好处很多，但是它面临一个很大的问题：浏览器兼容性。不是所有浏览器都支持 EventSource，而且即使是支持的浏览器也可能存在一些兼容性问题。
为了解决这个问题，EventSource Polyfill 库被开发出来提供了可靠的兼容性。
该库会修复一些 API 问题，同时还会使用 xhr 代替 EventSource 来模拟实现。
使用该库时，我们只需要在创建 EventSource 实例之前调用其 patch() 方法即可修复浏览器兼容性问题。
示例代码
下面是一个完整的使用 EventSource 和 @pirxpilot/eventsource-polyfill 的示例代码（需要注意的是，Node.js 代码需要运行在服务器环境下）：
-- -------------------- ---- -------
-- ------
----- ---- - ----------------
----------------------- ---- -- -
------------------ ---------------- -------------------- ---------------- ----------- ------------- ---------------
----------------- ----------
-------------- -- -
----------------- ------------ ----- ----------------------------
-- ------
--------------- -- -- -
------------------- -- --------- -- ---- -------
---
-- -----
------ ----------- ---- ----------------------------------
--------------------
----- ----------- - --- -------------------------------------
--------------------- - ------- -- -
------------------------ -- ----------
--总结
@pirxpilot/eventsource-polyfill 库提供了可靠的 EventSource 兼容性解决方案，它通过修复一些 API 问题，并使用 xhr 代替 EventSource 来模拟实现，从而使得开发者可以更加容易地使用 EventSource 实现实时通讯。
在实际应用中，我们可以通过 patch() 方法来修复 EventSource 兼容性问题，并像使用原生 EventSource 一样使用 @pirxpilot/eventsource-polyfill 库。同时，我们也需要了解 EventSource 的特性和限制，选择合适的技术方案来支持我们的业务需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056fde81e8991b448e7be7