@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_data(json_data: any) { let self = this let ctrl = new AbortController() // console.log('ctrl', ctrl) fetchEventSource('http://10.110.133.8/apiv2/videomgr/query', { method: 'POST', signal: ctrl.signal, headers: { 'Content-Type': 'application/json', accept: 'text/event-stream' }, body: JSON.stringify(json_data), async onmessage(event: EventSourceMessage) { console.log('event', event) if (event.data === '') return self.list.push({ name: 'xs', msg: event.data }) }, async onopen(response: any) { // 开始 console.log('rerere', response) } }) }

这段代码是一个使用fetch函数发送POST请求并获取数据的函数。它使用Fetch API来发送异步请求，并通过EventSource对象来监听服务器推送的事件。

首先，它创建了一个AbortController对象`ctrl`，用于中止请求。

然后，它使用fetch函数发送POST请求到指定的URL `'http://10.110.133.8/apiv2/videomgr/query'`。请求的方法为POST，请求头包含了Content-Type为application/json和accept为text/event-stream。

请求的主体是通过JSON.stringify方法将json_data对象转换为JSON字符串。

同时，它设置了两个事件处理程序：
1. onmessage事件处理程序用于监听服务器推送的消息。当接收到消息时，将消息作为新的对象添加到self.list数组中。
2. onopen事件处理程序用于在连接打开时进行一些操作。在这里，它会打印出response对象。

整体来说，这段代码使用Fetch API发送POST请求，并监听服务器推送的消息和连接打开事件。在收到消息时，将其添加到列表中。