OpenAI APIで思い出す、Server-Sent Events

OpenAI API

話題のChatGPTはAPIが公開されていて、それぞれの言語のライブラリだったりREST APIだったりから利用できる。

それを使ってチャットを実装する場合に、本家GUIみたく、レスポンスを一気にまとめてではなくちょっとずつ返ってくるようにしたいとする。
そこで、あの挙動はどうやって実現するのか？ってなった人も多いはず。

あのレスポンスをちょっとずつ、ストリーミングで返してもらう挙動を実現するためには、`stream: true`というオプションを指定する。

これはREST APIをJavaScriptから利用する場合の指定。

const res = await fetch("https://api.openai.com/v1/chat/completions", {
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${API_KEY_HERE}`,
  },
  method: "POST",
  body: JSON.stringify({
    messages: [{ role: "user", content: "はろー" }],
    model: "gpt-3.5-turbo",
    stream: true, // 👈
  }),
  signal: ac.signal,
});

ライブラリを使うにしても、同様の指定があるはず。

https://platform.openai.com/docs/api-reference/chat/create#chat/create-stream

Server-Sent Events

で、この指定をすると使われるようになるのが、Server-Sent Eventsというもの。

HTML Standard

具体的には、レスポンスヘッダに`Content-Type: text/event-stream`がつくようになって、レスポンスボディが次のようなフォーマットになる。

data: {"id":"chatcmpl-74OwM9uEZ2aMRnI3YCFauaIuGZ4BP","object":"chat.completion.chunk","created":1681283538,"model":"gpt-3.5-turbo-0301","choices":[{"delta":{"role":"assistant"},"index":0,"finish_reason":null}]}

data: {"id":"chatcmpl-74OwM9uEZ2aMRnI3YCFauaIuGZ4BP","object":"chat.completion.chunk","created":1681283538,"model":"gpt-3.5-turbo-0301","choices":[{"delta":{"content":"..."},"index":0,"finish_reason":null}]}

data: {"id":"chatcmpl-74OwM9uEZ2aMRnI3YCFauaIuGZ4BP","object":"chat.completion.chunk","created":1681283538,"model":"gpt-3.5-turbo-0301","choices":[{"delta":{},"index":0,"finish_reason":"stop"}]}

data: [DONE]

というように、`data: {JSON_OR_DONE_MARKER}`という感じのストリームになる。

• DevToolsで見えるHTTPのコネクションは1つ
• その中で、この空行で区切られたそれぞれが、よしななタイミングでレスポンスされてくる
  • これはSSEの仕様
• 最後に`[DONE]`とだけ書かれたものが届く
  • これはOpenAI APIの便宜上のもの

というわけで、これをUIに反映してやればよい。

DOMに表示する

細かいところは置いといて、雑にやるとこんな感じに。

const res = await fetch(/* さっきのやつ */);

const decoder = new TextDecoder();
const reader = res.body.getReader();

while (true) {
  const { done, value } = await reader.read();

  const events = decoder
    .decode(value)
    // 複数の`data: `行がまとまって落ちてくることもある
    .split("\n\n")
    .map((line) => {
      try {
        return JSON.parse(line.split("data: ")[1]);
      } catch {
        return null;
      }
    })
    .filter(Boolean);

  for (const json of events) {
    const content = json.choices[0].delta?.content ?? "";

    // ここで徐々にrenderすればよい
    // まとめたものが欲しいなら変数にでも入れておく
    content;
  }

  // `[DONE]`行か見て判断してもいいけど
  if (done) break;
}

これだけ。

const es = new EventSource(url, { withCredentials: true });

es.onmessage = ({ data }) => {
  console.log(data);
};
es.onerror = () => es.close();