CHAT GPT 응답 파싱 처리

[june0216]

이 오류는 스트리밍 데이터가 JSON 형태가 아닌 SSE(SERVER-SENT EVENTS) 형식으로 전달되기 때문에 발생합니다. SSE 데이터는 data: {"key": "value"}처럼 data: 접두사를 포함하며, JSON 파싱을 위해서는 이 접두사를 제거해야 합니다.

수정된 코드

아래는 data: 접두사를 처리하여 JSON 데이터를 올바르게 파싱하도록 수정한 코드입니다:

const handleSend = async () => {
    if (!message.trim() || isProcessing) return;

    setIsProcessing(true);
    const userMessage = { content: message.trim(), is_user: true, role: "user" };

    try {
        // 사용자 메시지를 즉시 반영
        await onSend(message.trim(), true);

        // 메시지 전송 성공 시 입력창 초기화
        setMessage("");
        if (textareaRef.current) {
            textareaRef.current.style.height = "auto"; // 높이 초기화
        }
        console.log("Sending request to /api/chat with body:", {
            messages: [userMessage],
        });

        // GPT 스트리밍 요청
        const response = await fetch("/api/chat", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ messages: [userMessage] }),
        });

        const reader = response.body.getReader();
        const decoder = new TextDecoder("utf-8");
        let accumulatedText = ""; // 누적된 텍스트를 저장할 변수

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

            // 데이터를 디코딩
            const chunk = decoder.decode(value);

            // SSE 형식에서 `data:` 접두사를 제거
            const lines = chunk.split("\n");
            for (const line of lines) {
                if (line.startsWith("data:")) {
                    const jsonString = line.replace(/^data:\s*/, ""); // `data:` 제거
                    if (jsonString.trim() === "[DONE]") {
                        console.log("Stream finished");
                        break;
                    }
                    try {
                        const parsedData = JSON.parse(jsonString); // JSON 파싱
                        const content = parsedData.content || ""; // content만 추출

                        // 누적 텍스트 업데이트
                        accumulatedText += content;

                        // 스트리밍 데이터를 실시간 반영
                        onStreamUpdate(accumulatedText, false);
                    } catch (err) {
                        console.error("Error parsing JSON:", err);
                    }
                }
            }
        }

        // 최종 응답을 부모 함수에 전달
        onSend(accumulatedText);
    } catch (error) {
        console.error("Error fetching GPT response:", error);
    } finally {
        setIsProcessing(false);
        setMessage(""); // 입력창 초기화
        if (textareaRef.current) {
            textareaRef.current.style.height = "auto"; // 높이 초기화
        }
    }
};

---

주요 변경 내용

1. data: 접두사 처리:

   • SSE 메시지는 data: {...} 형식으로 전달되므로, 각 줄을 확인하여 data: 접두사를 제거합니다.

2. 줄 단위로 데이터 처리:

   • chunk를 \n으로 분리하여 각 줄을 개별적으로 처리합니다.
   • line.startsWith("data:")로 유효한 데이터를 필터링합니다.

3. [DONE] 처리:

   • OpenAI 스트리밍이 끝나면 [DONE] 메시지가 전달되므로, 이를 감지하여 루프를 종료합니다.

4. JSON 파싱 에러 처리:

   • try-catch를 통해 JSON 파싱 중 발생할 수 있는 오류를 처리합니다.

---

스트리밍 결과

이제 content만 추출하여 누적된 텍스트를 실시간으로 UI에 반영할 수 있습니다. 🎉

추가 작업:

• onStreamUpdate 함수에서 받은 accumulatedText를 UI에 실시간으로 렌더링하도록 설정하세요.