[React Native] StompJS 라이브러리 onConnect 미작동 해결 방법

😡 문제 발생 & 증상

const stompClient = new Client({
  brokerURL: 'URL을 채워주세용', // STOMP 서버 URL
  debug: (str) => {
    console.log(str);
  },
  onConnect: () => {
    console.log(' 연결 됐어요옹!!! ');  // onConnect 내부 코드가 안돌음
  },
  onDisconnect: () => {
    console.log('웹소켓 연결이 끊어졌어용');
  },
});

React Native 환경에서 debug 내 console.log()에선 연결이 됐다고 하는데, onConnect 내 console.log()는 출력이 되지 않는다.

🧐 원인 분석

AWS에서 서버 로그를 분석해봤을때 웹소켓 연결이 된 것은 틀림 없었다. 그렇다면 뭔가 onConnect만 안되는 이유가 있을텐데 이 단순한 코드에 무엇인 문제인지 몰랐다.

그래서 리액트 네이티브 환경이 아닌 리액트 환경에서 진행해봤다. 결과는 연결 완료. onConnect 내의 콘솔이 출력된다.

그렇다면 리액트 네이티브의 문제로 판단하였고, 한글 자료론 도저히 방법이 없다고 판단하여 Stack OverFlow와 Github Issue를 미친듯이 검색했다.

원인은 다음과 같다.

1. forceBinaryWSFrames: true
   -> 리액트 네이티브 환경에선 WebSocket을 사용할 때 텍스트 형식의 메시지가 제대로 처리되지 않을 수 있기 때문에 바이너리 메시지 형식으로 데이터를 처리하기 위해 해당 코드를 추가해야한다.

2. appendMissingNULLonIncoming: true
   -> WebSocket에서 메시지를 처리할 때 맨 마지막에 NULL 문자를 통해 문자열 마지막임을 알 수 있다. 그러나 리액트 네이티브 문자열 버그로 인해 NULL 문자가 누락되는 경우가 발생한다. 해당 문제를 예방하기 위해 NULL 문자를 보충해주는 코드를 추가해야한다.

😊 해결 방법

const stompClient = new Client({
  brokerURL: 'URL을 채워주세용', 
  forceBinaryWSFrames: true,    	   // 해당 코드를 추가해주기!
  appendMissingNULLonIncoming: true,   // 해당 코드를 추가해주기!
  debug: (str) => {
    console.log(str);
  },
  onConnect: () => {
    console.log(' 연결 됐어요옹!!! '); // 정상 작동
  },
  onDisconnect: () => {
    console.log('웹소켓 연결이 끊어졌어용');
  },
});

🤨 결론

리액트 네이티브가 만악의 근원이다 :(