[React native] SSE 관련 에러 질문

안녕하세요. 취업 기간 중 React native 일정 관리 앱을 제작중입니다. 일정 알림 기능을 위해 서버의 일정 데이터를 스트리밍하여 컴포넌트에 매핑하는 동작을 구현 중입니다. react-native-sse 라이브러리를 사용하여 SSE를 시도하고 있는데 유효한 accessToken과 url을 전달해도 연결 자체가 이뤄지지 않는 문제가 발생합니다. 컴포넌트 랜더링 시 연결을 시도하고 에러 혹은 언마운트 시 연결 종료하도록 코드 작성했습니다. 에러 로그는 다음과 같습니다. [EventSource][onreadystatechange][ERROR] Response status error. Reconnecting... DEBUG [EventSource][onreadystatechange] ReadyState: 2, status: 401 DEBUG [EventSource][onreadystatechange] ReadyState: 4, status: 401 리커넥팅을 반복하면서 401 에러를 계속 반환하는데 이 경우 url에 문제가 있는 것인지 혹은 라이브러리에서 요구하는 추가적인 속성이 필요한지 잘 모르겠습니다. 비슷한 문제를 겪거나 React native에서 SSE 연결을 해보신 선배님들께 도움 요청드립니다.

1const option = {
2      method: 'GET',
3      headers: {Authorization: `Bearer ${token}`},
4      debug: true,
5    };
6
7    const eventSource = new EventSource(streamUrl, option);
8
9    const listener: EventSourceListener = event => {
10      if (event.type === 'open') {
11        console.log('Open SSE connection.');
12      } else if (event.type === 'message') {
13        console.log('Connection', event);
14      } else if (event.type === 'error') {
15        console.error('Connection error:', event.message);
16        eventSource.removeAllEventListeners();
17        eventSource.close();
18      } else if (event.type === 'exception') {
19        console.error('Error:', event.message, event.error);
20        eventSource.removeAllEventListeners();
21        eventSource.close();
22      }
23    };
24
25    eventSource.addEventListener('open', listener);
26    eventSource.addEventListener('message', listener);
27    eventSource.addEventListener('error', listener);
28
29    return () => {
30      eventSource.removeAllEventListeners();
31      eventSource.close();
32    };
33  };
34
35  useEffect(() => {
36    SSE();
37  }, []);

이 질문이 도움이 되었나요?

'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

추천해요 0

보충이 필요해요 0

준히 프론트엔드 엔지니어 님의 질문