채팅형 AI 비서 화면을 만들며 겪은 스트리밍 응답 처리

data: {"delta":"안녕"}
 
data: {"delta":"하세요"}
 
data: {"delta":". 무엇을"}
 
data: [DONE]
 

export async function* streamChat(body: unknown, signal: AbortSignal) {
  const res = await fetch("/api/chat", {
    method: "POST",
    headers: { "Content-Type": "application/json", Authorization: `Bearer ${getToken()}` },
    body: JSON.stringify(body),
    signal,
  });
  if (!res.ok || !res.body) throw new Error(`요청 실패: ${res.status}`);
 
  const reader = res.body.pipeThrough(new TextDecoderStream()).getReader();
  let buffer = "";
 
  while (true) {
    const { value, done } = await reader.read();
    if (done) break;
    buffer += value;
 
    // 네트워크 청크는 이벤트 경계와 상관없이 잘려서 온다. 빈 줄(\n\n)이 나올 때까지 모았다가 처리한다.
    let boundary: number;
    while ((boundary = buffer.indexOf("\n\n")) !== -1) {
      const event = buffer.slice(0, boundary);
      buffer = buffer.slice(boundary + 2);
      for (const line of event.split("\n")) {
        if (!line.startsWith("data:")) continue;
        const data = line.slice(5).trim();
        if (data === "[DONE]") return;
        yield (JSON.parse(data) as { delta: string }).delta;
      }
    }
  }
}

function useChatStream() {
  const [text, setText] = useState("");
  const [status, setStatus] = useState<"idle" | "streaming" | "done" | "error" | "aborted">("idle");
  const controller = useRef<AbortController | null>(null);
 
  const send = useCallback(async (body: unknown) => {
    controller.current?.abort();
    const ac = new AbortController();
    controller.current = ac;
    setText("");
    setStatus("streaming");
 
    let pending = "";
    let raf = 0;
    const flush = () => {
      raf = 0;
      const chunk = pending;
      pending = "";
      setText((t) => t + chunk);
    };
 
    try {
      for await (const delta of streamChat(body, ac.signal)) {
        pending += delta;
        if (!raf) raf = requestAnimationFrame(flush); // 프레임당 한 번만 반영
      }
      if (raf) cancelAnimationFrame(raf);
      flush();
      setStatus("done");
    } catch (e) {
      if (raf) cancelAnimationFrame(raf);
      flush(); // 중간에 끊겨도 받은 데까지는 보여 준다
      setStatus(ac.signal.aborted ? "aborted" : "error");
    }
  }, []);
 
  const stop = useCallback(() => controller.current?.abort(), []);
  useEffect(() => () => controller.current?.abort(), []); // 화면을 떠나면 요청도 끊는다
 
  return { text, status, send, stop };
}

<button
  type="button"
  onClick={status === "streaming" ? stop : submit}
  aria-label={status === "streaming" ? "응답 생성 중지" : "보내기"}
>
  {status === "streaming" ? <Square className="size-4" /> : <ArrowUp className="size-4" />}
</button>
{status === "aborted" && <p className="text-sm text-muted">응답 생성을 중지했습니다.</p>}

function useStickToBottom(dep: unknown) {
  const ref = useRef<HTMLDivElement>(null);
  const stick = useRef(true);
 
  useEffect(() => {
    const el = ref.current!;
    const onScroll = () => {
      stick.current = el.scrollHeight - el.scrollTop - el.clientHeight < 48; // 바닥에서 48px 안쪽
    };
    el.addEventListener("scroll", onScroll, { passive: true });
    return () => el.removeEventListener("scroll", onScroll);
  }, []);
 
  useLayoutEffect(() => {
    const el = ref.current!;
    if (stick.current) el.scrollTop = el.scrollHeight;
  }, [dep]);
 
  return ref;
}

<div aria-live="polite" className="sr-only">
  {status === "streaming" ? "답변을 작성하고 있습니다." : status === "done" ? "답변이 완료되었습니다." : ""}
</div>