什么是 Server-Sent Events？
Server-Sent Events（SSE） 是一种和 WebSocket 类似的技术，可以让服务器将数据推送到客户端。SSE 建立在 HTTP 协议基础之上，所以相对于 WebSocket 而言，SSE 更加简单，适合一些简单的实时通信场景。
SSE 的优点
相比于轮询或者 WebSocket，SSE 有以下的优点：
- 实现简单。SSE 的实现非常简单，只需要在服务器端推送数据即可，客户端只需监听事件即可。
- 更节省资源。SSE 在客户端和服务器端的传输是单向的，可以有效地减少不必要的数据传输，因此相比于 WebSocket 更加节省资源。
- 更易于维护。服务器可以通过 SSE 来推送服务端的状态信息给客户端，客户端可以基于这些信息实现页面的实时更新。
在 React Native 中使用 SSE 实现实时通信
在我们开始使用 SSE 之前，需要先了解下 SSE 的事件流格式。
事件流格式
SSE 中，每个服务器端推送的消息是一个“事件流”（Event Stream），其中以“data:” 开头的行代表消息体，以“event:” 开头的行代表消息类型（在 SSE 中我们可以自定义消息类型）。同时，以“id:” 开头的行代表该消息的 ID。
下面是一个简单的 SSE 示例：
data: Hello, world!\n \n
在这个示例中，"Hello, World!" 就是一个消息体，通过“data:” 来描述，而最后的空行代表消息结束。在上述消息格式中，如果不设置事件类型或 ID，则默认情况下的事件类型是“message”，ID 由服务器自动生成。
接下来，我们就可以开始在 React Native 中使用 SSE 了。
在 React Native 中使用
首先，我们需要在 React Native 中安装 sse.js，sse.js 是一个使用 SSE 技术的 JavaScript 库。可以通过以下命令来安装 sse.js：
npm install sse.js
安装完毕之后，我们就可以使用 sse.js 提供的 SSE 类来建立 SSE 连接：
import SSE from 'sse.js';
const source = new EventSource('http://your-server/sse-endpoint');其中 SSE 是一个类，用于封装和处理事件流，EventSource() 方法中指定 SSE 连接的 URL 地址。在建立 SSE 连接后，我们可以通过监听 'message' 事件来接收服务器推送的消息：
source.addEventListener('message', e => {
console.log(e.data);
});在监听 'message' 事件之前，可以通过 addEventListener() 方法监听事件类型 'open'、'error' 等来实现 SSE 的状态管理。同时，我们还可以通过自定义事件类型来对 SSE 消息进行分类：
source.addEventListener('custom-event', e => {
console.log(`Type: ${e.type} Data: ${e.data}`);
});注意：React Native 中，SSE 必须通过 HTTP/HTTPS 协议来建立连接，无法通过 WebSocket 来建立。
SSE 示例代码
以下是一个用 SSE 实现实时消息推送的 React Native 示例代码：
-- -------------------- ---- -------
------ ------ ---------- ---------- ---- --------
------ ------ ----- ---- ---------------
------ --- ---- ---------
-------- ----- -
----- --------- ----------- - -------------
------------ -- -
----- ------ - --- -----------------------------------------------
---------------------------------- - -- -
-------------------
---
------ -- -- -
---------------
--
-- ----
------ -
------
----------------------
-------
--
-
------ ------- ----总结
在 React Native 应用中使用 SSE 来实现实时通信，具有实现简单、更节省资源、更易于维护等优点。通过 sse.js 库提供的 SSE 类，我们可以方便地建立 SSE 连接、监听 SSE 事件流，并实现页面的实时更新。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651e0cf595b1f8cacd5bd077