流式 UI 与 LLM 响应

HTTP/1.1 200 OK
Content-Type: text/event-stream

data: {"delta":{"content":"你"}}

data: {"delta":{"content":"好"}}

data: [DONE]

@GetMapping(value = "/api/chat/stream", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public SseEmitter chat(@RequestParam String prompt) {
    SseEmitter emitter = new SseEmitter(60_000L);

    llmClient.stream(prompt)                // Flux<String>：逐 token 的冷流
        .doOnNext(token -> {
            try {
                emitter.send(token);        // 每到一段，立即 flush 给浏览器
            } catch (IOException e) {
                emitter.completeWithError(e); // 客户端断开 / 写失败
            }
        })
        .doOnComplete(emitter::complete)    // 对应 [DONE] 之后关闭响应
        .subscribe();

    return emitter;  // Controller 方法已返回，HTTP 响应还开着——这就是流式
}

data: {"choices":[{"delta":{"content":"你"}}]}

data: {"choices":[{"delta":{"content":"好"}}]}

data: {"choices":[{"delta":{},"finish_reason":"stop"}]}

data: [DONE]

import { useCallback, useRef, useState } from "react";

type Status = "idle" | "loading" | "streaming" | "done" | "error";

export function useChatStream() {
  const [status, setStatus] = useState<Status>("idle");
  const [text, setText] = useState("");
  const abortRef = useRef<AbortController | null>(null);  // 第 12 篇：ref 存跨渲染的实例

  const stop = useCallback(() => abortRef.current?.abort(), []);

  const start = useCallback(async (prompt: string) => {
    abortRef.current?.abort();  // 上一轮没结束？先掐掉（第 34 篇的竞态处理）
    const controller = new AbortController();
    abortRef.current = controller;

    setStatus("loading");
    setText("");
    try {
      const res = await fetch("/api/chat/stream", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ prompt }),
        signal: controller.signal,  // 取消的绳子拴在这
      });
      if (!res.ok || !res.body) throw new Error(`HTTP ${res.status}`);
      setStatus("streaming");

      const reader = res.body.getReader();
      const decoder = new TextDecoder();
      let buffer = "";  // chunk 边界 ≠ 事件边界，攒着按行切

      while (true) {
        const { done, value } = await reader.read();  // 等下一段字节
        if (done) break;
        buffer += decoder.decode(value, { stream: true });  // 多字节字符跨 chunk 不乱码

        const lines = buffer.split("\n");
        buffer = lines.pop() ?? "";  // 最后半行可能没到全，留到下一轮

        for (const line of lines) {
          if (!line.startsWith("data:")) continue;
          const payload = line.slice(5).trim();
          if (payload === "[DONE]") continue;  // 终止哨兵，done 分支兜底
          const delta = JSON.parse(payload).choices?.[0]?.delta?.content;
          if (delta) setText((prev) => prev + delta);  // 函数式更新，防闭包旧值（第 10 篇）
        }
      }
      setStatus("done");
    } catch (e) {
      if ((e as Error).name === "AbortError") setStatus("done");  // 主动取消不算失败
      else setStatus("error");
    }
  }, []);

  return { status, text, start, stop };
}

"use client";

import { useEffect, useRef } from "react";
import { useChatStream } from "./useChatStream";

export default function ChatPanel() {
  const { status, text, start, stop } = useChatStream();
  const boxRef = useRef<HTMLDivElement>(null);  // 第 12 篇：DOM 引用，不触发重渲染

  useEffect(() => {
    // text 每变一次，把滚动条压到底部——流式场景的刚需
    boxRef.current?.scrollTo({ top: boxRef.current.scrollHeight });
  }, [text]);

  const busy = status === "loading" || status === "streaming";

  return (
    <div>
      <div ref={boxRef} className="chat-box">
        {text}
        {busy && <span className="cursor">▌</span>}  // 光标闪烁交给 CSS 动画
      </div>
      {busy
        ? <button onClick={stop}>停止生成</button>
        : <button onClick={() => start("用一句话解释 RSC")}>提问</button>}
    </div>
  );
}