介绍
React Native 是一个基于 React 的移动端 UI 框架，其提供了一种构建原生应用的方式。EventSource 是一种在浏览器中用于接收服务器推送事件的 API。react-native-event-source 是一个 npm 包，它为 React Native 应用集成了 EventSource API。
在本文中，我们将学习如何使用 npm 包 react-native-event-source 获取服务器推送的事件和数据。
安装
使用 npm 包管理器安装 react-native-event-source。
npm install --save react-native-event-source
或者使用 Yarn。
yarn add react-native-event-source
使用
导入
在 React Native 应用的 JavaScript 文件中导入 EventSource。
import EventSource from 'react-native-event-source';
创建 EventSource 对象
创建一个 EventSource 对象来订阅服务器推送的事件。
const eventSource = new EventSource('https://example.com/events');事件处理
使用 addEventListener 方法将事件处理程序添加到 EventSource 对象上。
eventSource.addEventListener('message', (event) => {
console.log('Received message:', event.data);
});
eventSource.addEventListener('error', (event) => {
console.log('Error:', event);
});可以使用 removeEventListener 方法，从 EventSource 对象中删除事件处理程序。
eventSource.removeEventListener('message');断开连接
使用 close 方法断开连接。
eventSource.close();
示例
假设我们有一个 Node.js 服务器，它在每秒钟将当前时间发送到客户端，我们可以使用 react-native-event-source 来订阅这些事件和数据，以下是代码示例。
-- -------------------- ---- -------
----- ---- - ----------------
----- ---- - -----
----- ------ - ----------------------- ---- -- -
-- -----
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
---
-- ----
-------------- -- -
----- ---- - -
----- --- ----------------------
--
----------------- ----------- ------------------------------
-- ------
---
------------------- -- -- -
------------------- -- --------- -- ---- ----------
---在 React Native 应用的 JavaScript 文件中，我们可以创建一个 EventSource 对象来订阅服务器发送的事件，如下所示：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ - ----- ---- - ---- ---------------
------ ----------- ---- ----------------------------
----- --- - -- -- -
----- ------ -------- - -------------
------------ -- -
----- ----------- - --- -------------------------------------
------------------------------------ ------- -- -
----- ---- - -----------------------
-------------------
---
------ -- -- -
--------------------
--
-- ----
------ -
------
-------------------
-------
--
--
------ ------- ----启动服务器和 React Native 应用，并在模拟器中运行该应用，您将看到每秒钟更新一次的当前时间。
结论
react-native-event-source 是一个有用的 npm 包，它为 React Native 应用提供了 EventSource API，使得订阅服务器推送的事件和数据变得更加容易。本教程详细介绍了 react-native-event-source 的安装、使用以及代码示例，希望能帮助你在 React Native 应用中集成 EventSource API。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672e30520b171f02e1da6