打印。

以下是使用fetch接收eventstream并转换为json并逐个打印的示例代码:

const url = 'YOUR_EVENT_STREAM_URL';

fetch(url, { headers: { 'Accept': 'text/event-stream' } })
  .then(response => {
    const reader = response.body.getReader();
    let buffer = '';
    let jsonBuffer = '';

    const processBuffer = () => {
      while (buffer.includes('\n\n')) {
        const index = buffer.indexOf('\n\n');
        const event = buffer.slice(0, index);
        buffer = buffer.slice(index + 2);

        if (event.startsWith('data:')) {
          const data = event.slice(5);
          jsonBuffer += data;

          if (jsonBuffer.endsWith('\n')) {
            jsonBuffer = jsonBuffer.slice(0, -1);
            try {
              const json = JSON.parse(jsonBuffer);
              if (typeof json === 'object') {
                console.log(json);
              }
            } catch (error) {
              console.error(error);
            }
            jsonBuffer = '';
          }
        }
      }
    };

    const read = ({ done, value }) => {
      if (done) {
        console.log('Stream closed');
        return;
      }

      buffer += new TextDecoder('utf-8').decode(value);
      processBuffer();

      return reader.read().then(read);
    };

    return reader.read().then(read);
  })
  .catch(error => console.error(error));

解释一下代码:

  1. 发送fetch请求并指定Accept头为text/event-stream。

  2. 获取响应的body reader并定义一个buffer和jsonBuffer用于缓存数据。

  3. 定义一个processBuffer函数用于处理缓存的数据。如果缓存的数据包含了两个连续的换行符,则表示一个事件已经结束,提取出事件内容并将其放入jsonBuffer中。

  4. 如果事件以data:开头,则表示这是一个数据事件,将事件内容追加到jsonBuffer中。

  5. 如果jsonBuffer以换行符结尾,则表示jsonBuffer中已经包含了一个完整的JSON对象,尝试将其解析为JSON对象并打印到控制台。

  6. 在catch块中处理JSON解析错误。

  7. 在read函数中读取响应body的数据并调用processBuffer函数处理缓存的数据。

  8. 在read函数中返回一个Promise以继续读取body的数据。

  9. 在catch块中处理错误。

js 使用fetch接收eventstream时如果接收到的stream不是连续的需要把stream转为json逐个匹配类型是json为true则逐个打印到控制台不能重复

原文地址: http://www.cveoy.top/t/topic/6qL 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录