一文解析ChatGPT 之 Fetch 请求

const express = require('express');
const app = express();
const port = 3600;
app.get('/stream', (req, res) => {
  const { message = '' } = req.query
  // 3个请求头重点，需要返回text/event-stream，告知浏览器以何种类型解析
  res.set({
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive',
  });
  let step = 0;
  // 定时器依次返回message
  const time = setInterval(() => {
    const data = { message: message[step++]};
    // 每个消息以 \n\n分割
    res.write(`data: ${JSON.stringify(data)}\n\n`);
    if (step > message.length - 1) {
      res.end()
      clearInterval(time)
    }
  }, 500);
});
app.listen(port, () => console.log(`Server running at http://localhost:${port}`));

// 创建一个EventSource
const eventSource = new EventSource(`/stream?message=${message}`);
// 监听服务器返回的数据
eventSource.onmessage = function (event) {
  console.log(event.data);
};
eventSource.onerror = function () {
  eventSource.close();
};

const fetchStream = (url, params) => {
  const { onmessage, onclose, ...otherParams } = params;
  const push = async (controller, reader) => {
    const { value, done } = await reader.read();
    if (done) {
      controller.close();
      onclose?.();
    } else {
      onmessage?.(Uint8ArrayToString(value));
      controller.enqueue(value);
      push(controller, reader);
    }
  };
  // 发送请求
  return fetch(url, otherParams)
    .then((response) => {
      // 以ReadableStream解析数据
      const reader = response.body.getReader();
      const stream = new ReadableStream({
        start(controller) {
          push(controller, reader);
        },
      });
      return stream;
    })
    .then((stream) => new Response(stream, { headers: { 'Content-Type': 'text/html' } }).text());
};

fetchStream(`/stream?message=${message}`, {
  method: 'GET',
  headers: {
    'accept': 'text/event-stream',
    'Content-Type': 'application/json',
  },
  onmessage: (res) => {
    // todo
    console.log(res);
  },
});