AI聊天中使用SSE

发表于 2024-04-13 更新于 2025-04-21 本文字数： 1.9k 阅读时长 ≈ 3 分钟

本文是作者对AI聊天中使用SSE的介绍，包括SSE的优势、服务端实现、客户端实现等，这些步骤可以帮助作者提高AI聊天的用户体验。

ChatGPT火了一年了，技术上的话也带动了SSE的使用。这里也总结下我对它的认识。

SSE的优势

使用标准的HTTP协议，并非WebSocket。相对比WebSocket全双工资源开销相对较小。
SSE传输的文本数据，使用开销简单。

服务端实现

服务端实现相对简单，只要responseType设置为text/event-stream;，持续发送数据到前端直到结束即可。

客户端实现

EventSource

const evtSource = new EventSource("sse.php");
evtSource.onmessage = (e) => {
  console.log(`message: ${e.data}`);
};

Fetch

fetch('/api/openai/stream', {
      method: 'post',
      headers: {
        'Content-Type': 'application/json;charset=utf-8',
      },
      body: JSON.stringify({
        messages
      })
    }).then(res => {
      const reader = res.body.getReader();
      let buffer = '';
      const readChunk = () => {
        reader.read()
          .then(({
            value,
            done
          }) => {
            if (done) {
              console.log('Stream finished');
              return;
            }

            const chunkString = new TextDecoder().decode(value);
            buffer += chunkString;

            let position;
            while ((position = buffer.indexOf('\n\n')) !== -1) {
              const completeMessage = buffer.slice(0, position);
              buffer = buffer.slice(position + 2);
              completeMessage.split('\n').forEach(line => {
                if (line.startsWith('data:')) {
                  const jsonText = line.slice(5).trim(); 
                  if (jsonText === '[DONE]') {
                    console.log('done');
                    return;
                  }
                  try {
                    const dataObject = JSON.parse(jsonText);
                    console.log(dataObject);
                  } catch (error) {
                    console.error('JSON parse error:', error, jsonText);
                  }
                }
              });
            }
            readChunk();
          })
          .catch(error => {
            console.error(error);
          });
      };
      readChunk();
    })