@microsoft/fetch-event-source onmessage没反应

`@microsoft/fetch-event-source` 是一个用于处理服务器推送事件流（Event Source）的库，它通常配合 Fetch API 使用，以便实时从服务器接收数据。如果在使用 `onmessage` 事件监听器时没有接收到响应，可能有以下几个原因：

1. **连接问题**：确认网络连接是否稳定，因为 Event Source 需要保持持久连接。如果服务器中断或网络不稳定，可能会导致事件无法到达。

2. **服务端问题**：检查服务器端配置，确保它们支持 EventSource，并且正确地发送了`data:`事件。如果服务器未启用事件源推送或者返回的数据不符合规范，客户端将无法触发`onmessage`。

3. **错误处理**：确保在`fetch()`请求时，错误得到了适当的处理，包括网络错误、解析错误等。如果没有正确的错误处理，可能导致消息事件监听器未能生效。

4. **代码逻辑**：检查您的代码，可能是事件监听器注册的时机不对，或者是监听器内部逻辑有问题。确保在`fetch()`成功并设置好 EventSource 对象之后添加监听器。

5. **浏览器兼容性**：虽然现代浏览器普遍支持 EventSource，但还是需要检查目标用户的浏览器是否支持以及是否有任何浏览器特定的问题。

相关问题

fetch-event-source 封装

fetch-event-source是一个基于Fetch API和EventSource API的封装，用于在客户端向服务器发送请求并接收服务器推送的数据流。可以通过以下代码进行封装：

function fetchEventSource(url, options, onMessage, onError) {
  const source = new EventSource(url, options);

  source.onmessage = (event) => {
    onMessage(JSON.parse(event.data));
  };

  source.onerror = (error) => {
    onError(error);
  };

  return {
    close() {
      source.close();
    },
  };
}

使用时，可以传入请求的URL、Fetch API的配置选项、onMessage和onError回调函数。其中，onMessage用于处理接收到的数据流，onError用于处理错误信息。该函数会返回一个对象，其中包含close方法，用于关闭数据流连接。

示例代码：

const url = 'https://example.com/stream';
const options = {
  headers: {
    'Authorization': 'Bearer token',
  },
};
const stream = fetchEventSource(url, options, onMessage, onError);

function onMessage(data) {
  console.log(data);
}

function onError(error) {
  console.error(error);
}

// 关闭连接
setTimeout(() => {
  stream.close();
}, 60000);

上述代码会向'https://example.com/stream'发送请求，如果连接成功，则会接收来自服务器的数据流，并调用onMessage回调函数进行处理。如果连接失败，则会调用onError回调函数处理错误信息。在适当的时候，可以通过调用close方法来关闭数据流连接。

fetch-event-source使用详解

### Fetch Event Source 的使用方法

`fetch-event-source` 是一种基于 `fetch` 实现 Server-Sent Events (SSE) 功能的方法。此库旨在简化通过 fetch API 进行 SSE 请求的过程。

#### 安装依赖包
为了使用 `fetch-event-source`，首先需要安装对应的 npm 包：

npm install @microsoft/fetch-event-source

#### 导入模块并初始化连接
在项目中导入该模块，并设置与服务器之间的通信路径来建立 SSE 链接:

import { fetchEventSource } from '@microsoft/fetch-event-source';

// 初始化链接至指定URL的事件源对象
fetchEventSource('/stream-endpoint', {
    onopen: () => console.log('Connection opened'),
});

#### 处理来自服务端的消息
当有新消息到达时会触发相应的回调函数，在这里可以处理这些数据或将其渲染到页面上:

fetchEventSource('/stream-endpoint', {
    onmessage: ({ data }) => {
        try {
            const parsedData = JSON.parse(data);
            console.log(parsedData);
        } catch (_) {
            console.error(`Failed to parse message ${data}`);
        }
    },
});

对于特定类型的事件也可以单独监听，这类似于原生 `EventSource` 对象的做法[^1]:

fetchEventSource('/stream-endpoint', {
    onfoo: (event) => console.log('Received foo event:', event),
    onbar: (event) => console.log('Received bar event:', event),
});

#### 错误处理机制
如果发生网络错误或其他异常情况，则可以通过配置中的 `onerror` 参数来进行捕获和响应:

fetchEventSource('/stream-endpoint', {
    onerror: (err) => {
        if (!navigator.onLine || err.type === 'networkError') {
            alert('Network connection lost');
        }
    },
});