트러블 슈팅 | Sse 데이터 수신 문제

문제

• 서버로부터 새로운 알림 데이터를 받아오기 위해 사용했던 onmessage 이벤트 리스너가 이벤트를 감지하지 못하는 문제 발생

eventSource.onmessage = (e) => {
  console.log('receivedData:', e.data);
  const parsedData  = JSON.parse(e.data); // 데이터를 JSON 객체로 파싱

  // 새로운 알림 추가
  setNewAlert((prevAlerts) => [...prevAlerts, parsedData]);
};

시도

서버에서 커스텀 이벤트 타입을 사용하고 있다면 기본 "message" 타입의 이벤트를 감지하는 onmessage가 해당 이벤트를 감지하지 못 할 것이다.
프론트 쪽에서 백엔드가 어떤 메세지에 데이터를 담아서 보내주었지 알 수 없다. 그래서 백엔드에게 특정 메세지에 데이터를 담아 보내고 있는지 확인하고 해당 메세지를 받아왔다.
addEventListener를 사용하여 백엔드에서 저정한 sse이라는 메세지에 대한 리스너를 등록하였다.

eventSource.addEventListener('sse', event  => {
      const messageEvent = event as MessageEvent;
      const parsedData = JSON.parse(messageEvent.data);
      if (parsedData.content === "send dummy data to client.") {
        // console.log('더미데이터는 무시')
        return;
      }
      setNewAlert((prev) => [...prev, parsedData]);
      queryClient.invalidateQueries('alertList');
    });

해결

서버가 'message'가 아닌 커스텀 이벤트 타입을 사용하여 데이터를 전송하고 있었기 때문에, onmessage는 해당 이벤트를 감지하지 못했다. addEventListener를 사용해 해당 커스텀 이벤트 타입에 대한 리스너를 등록함으로써 해결.