리액트 React SSE 응답 처리하기 (ChatGPT stream)

기존에 그냥 완성된 답변으로 받았던 ChatGPT 응답을 SSE(Serve-Sent-Event) 를 이용해 실시간으로 완성하는 걸로 변경하게 되었다. 어떻게 받아와야할지 여러 방법을 찾아보는데 SSE 표준은 애초에 POST 방식은 지원을 하지 않는다고 한다. (그래서 SSE는 보통 EventSource를 이용해 응답을 받지만 단순 GET인 경우에만 가능하다.) 그런데 나는 내가 요청한 질문에 대한 답변을 받아야하는 것이므로... 응용 방식을 여럿 찾아보았다.

그러던 중 나의 상황에 아주 딱 맞는 유튜버의 설명 등장... 최고세요...
https://www.youtube.com/watch?v=JxIQCOrsxxg

물론 이 분은 ChatGPT 기능을 프론트엔드에서 바로 구현한거라 약간 차이점이 있었기에 이슈는 물론 발생했다! (ㅎㅎ)

 

 

---

 

기존 코드

  const onSendMsg = async (event) => {
    event.preventDefault();
    const li = document.createElement("li");
    li.className = styles.quest;
    li.innerText = msg;
    const ul = document.getElementById("msgList");
    ul.appendChild(li);
    try {
      setIsLoading(true);
      await axios
        .post(
          process.env.REACT_APP_API_URL + `/gpt/${chatId}`,
          {
            prompt: msg,
            gptConfigInfo: options,
          },
          {
            headers: {
              "Content-Type": "application/json",
              Authorization: "Bearer " + storedJwtToken,
            },
          },
        )
        .then((res) => {
          setResult(res.data.answer);
          setChatId(res.data.chat_room_id);
          setIsLoading(false);
        });
    } catch (error) {
      console.error(error);
      alert(error.message);
    }
  };

• 단순하다! 메시지를 body에 담아 POST 로 api에 요청을 하면 response에 ChatGPT의 답변, 채팅방 번호가 담기고 useState 변수인 isLoading을 false로 전환하여 로딩을 정지한다. ChatGPT의 답변은 마찬가지로 useState 변수인 result에 담긴다.

✅ 여기에서 초반에 생성되는 li 태그는 내가 보내는 메시지를 띄우기 위한 용도이다.

 

useEffect(() => {
    if (result != undefined) {
      const li = document.createElement("li");
      li.className = styles.response;
      li.innerText = result;
      document.getElementById("msgList").appendChild(li);
      setMsg("");
    }
  }, [result]);

• 그리고 result 값의 변화를 감지하여, 변화가 생길 때마다, 즉 새로운 응답 메시지가 올 때마다 li 태그를 추가하고 innerText를 result로 설정해주면 아래와 같이 메시지 답변이 완성되는 형태였다.
  
  

 

---

 

SSE 적용하기

전반적인 형태는 비슷하나 조금씩 꽤 많이 달라졌다.

const onSendMsg = async (event) => {
    event.preventDefault();
    const li = document.createElement("li");
    li.className = styles.quest;
    li.innerText = msg;
    const ul = document.getElementById("msgList");
    ul.appendChild(li);

    await fetch(process.env.REACT_APP_API_URL + `/gpt/${chatId}`, {
      method: "POST",
      headers: {
        Authorization: "Bearer " + storedJwtToken,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        prompt: msg,
        gptConfigInfo: options,
      }),
    }).then(async (response) => {
      setMsg("");


      const reader = response.body
        .pipeThrough(new TextDecoderStream())
        .getReader();

      const li = document.createElement("li");
      li.className = styles.response;

      setExistLi(li);

      document.getElementById("msgList").appendChild(li);
      setMsg("");
      while (true) {
        const { value, done } = await reader.read();
        if (done) break;

        let str = JSON.stringify(value);
        str = str.replace(/\n/gi, "\\r\\n");
        let json = JSON.parse(str);

        const cleanedStr = json.replace(/data:|\n/g, "").trim();

        let chatRoomId;
        const matchResult = cleanedStr.match(/\d+/);
        if (matchResult) {
          chatRoomId = matchResult[0];
        }

        let simpleText;
        simpleText = cleanedStr.replace(/\\r\\n/g, "").trim();
        const cleanedText = simpleText.replace(/chat_room_id:.*/, "");
        setResult((prev) => prev + cleanedText);

        if (chatRoomId) {
          setChatId(chatRoomId);
          setIsLoading(false);
        }
      }
      setResult("");
      setExistLi(null);
    });
  };

• 기존 코드에서 사용하던 axios 대신 fetch 를 사용했다. axios 가 스트림 처리가 아예 안되는건진 모르겠지만 참조한 코드들 중에서 axios를 사용한건 없었다.
• 기존 코드에서는 답변이 오면 그 메시지로 하나의 답장 메시지 li를 만들면 돼서 문제가 없었는데 SSE는 첫 시작에는 li 태그를 새로 만들어야 하고, 답변이 끝날 때까지 계속 같은 li 태그 내에서 innerText를 바꿔줘야 하기 때문에 (그리고 다른 답변과도 구분이 필요함) 이걸 어떻게 처리할지가 고민이었다.
• 나는 아래와 같이 현재 li 태그가 존재함을 알 수 있게, 그리고 답변 스트림이 올 때마다 해당 li 태그의 innerText 가 계속 바뀔 수 있도록 useState로 변수를 하나 새로 만들었다.

  const [existLi, setExistLi] = useState(null);

• 그리고 답변 스트림의 done이 true가 되어서 종료가 될 때, existLi 를 다시 null로 만들어주면 다음 답변에서는 새로운 li 태그를 만들어서 답변 받기를 시작할 것이다.

 

그래서 useEffect 에서 result 값이 바뀔 때마다 li 태그를 새로 만들었던 기존과는 달리

 useEffect(() => {
    if (existLi != null) {
      existLi.innerText = result;
    }
  }, [result]);

 

답변 받기가 시작된 li 태그가 있다면 (existLi 태그가 존재한다면), 그 태그의 innerText를 갱신된 result값으로 치환해주는 것으로 변경하였다.

 

---

 

사실 응답에서 (ChatGPT의) 답변을 추출하는 것이 가장 힘든 과정이었다

아래의 while 문은 reader.read() 에서 구조 분해 할당한 done 값이 true가 나올 때까지 반복되는 구조이다.
여기서 reader 은 위에서 볼 수 있듯이 response.body를 pipeThrough(new TextDecoderStream()) 으로 스트림을 통해 오는 텍스트를 디코딩하고, .getReader() 로 데이터를 읽을 수 있는 리더(Reader)를 가져온 것이다.

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

        let str = JSON.stringify(value);
        str = str.replace(/\n/gi, "\\r\\n");
        let json = JSON.parse(str);

        const cleanedStr = json.replace(/data:|\n/g, "").trim();

        let chatRoomId;
        const matchResult = cleanedStr.match(/\d+/);
        if (matchResult) {
          chatRoomId = matchResult[0];
        }

        let simpleText;
        simpleText = cleanedStr.replace(/\\r\\n/g, "").trim();
        const cleanedText = simpleText.replace(/chat_room_id:.*/, "");


        setResult((prev) => prev + cleanedText);

        if (chatRoomId) {
          setChatId(chatRoomId);
          setIsLoading(false);
        }
      }
      setResult("");
      setExistLi(null);
    });

• 위 코드에 replace 가 굉장히 많은 이유는... 처음에 그냥 value 를 콘솔에 찍어보니 아래와 같이 앞에 'data: ' 가 찍혀서 나왔다
  
  
  

아무리 생각해도 서버 측에서 'data: ' 를 넘겨줬을리는 없을테고 당연히 json 형식이겠지 하고 value.data 를 찍으니 이번엔 undefined 가 나왔다. 굉장히 혼란스러웠다.. 그래서 'data: '를 replace로 없애려고 해보기도 하고 별짓을 다하다가 value를 JSON.stringfy() 로 문자열화해보니 data 값에 답변과 다량의 개행문자가 섞여 있음을 알게 되었다.....

 

json에 개행문자가 있으면 json으로 인식을 할 수가 없다고 한다. 이런 경우에는 JSON.Stringfy() 한 뒤에 개행문자를 모두 없애고 다시 JSON.parse() 로 바꿔서 json으로 인식하도록 하는 방법이 있다고 한다. 아래와 같다.

 

let str = JSON.stringify(value);
str = str.replace(/\n/gi, "\\r\\n");
let json = JSON.parse(str);

 

그리고 몇차례 더 replace로 치환을 해줬는데 사실 일단 겉으로 보이는게 정상으로 보일 때까지 이것저것 한거라 다시 보니 어떻게 한건질 모르겠다..

 

 const cleanedText = simpleText.replace(/chat_room_id:.*/, "");

• chat_room_id 가 value.data.chat_room_id 같은 형식으로 참조하면 될 것이라고 생각했는데 이상하게 'data: 요data:chat_room_id:105' 와 같이 마지막 답변 메시지에 사이 좋게 꼭 붙어서 와버려서 그냥 replace로 억지로 떼버렸다...^^ 그리고 그냥 알파벳 d 와 매칭이 되면 뒷 번호를 chatRoomId 변수에 저장하도록 했다. 아무래도 야매지만 지금 상황에선 최선이라고 생각했다!

 

결과물이 아주 만족스럽다!