Stomp.js로 백엔드와 채팅을 연결하던 중 TextEncoder 문제가 발생했다.
명확히 에러가 뜬 것은 아니었지만 터미널에
Possible Unhandled error~ 가 뜨고 (처리되지 않은 에러가 있다는 의미)
Reference Error: TextEncoder ~ 문구가 두 줄씩 뜨면서 계속 채팅 연결이 되지 않았다.
백엔드 경로도 다 맞아서 왜 안 되는지 이유를 몰랐는데
해결은 React Native의 경우 웹 React와 달리 Stomp 연결 시 추가 polyfill 관련 설정이 필요했다.
이 부분이 TextEncoder 여서 다음 자료들을 참고해서 설치를 해주었다.
참고 자료:
https://github.com/stomp-js/stompjs/issues/53
https://stomp-js.github.io/guide/stompjs/rx-stomp/polyfills-for-stompjs.html
두 번째 자료를 보면 NodeJS에서와 React Native 에서일 때 두 가지 경우가 있는데 검색해보니 NodeJS 방법을 써서 해결이 되었다는 내용도 있었다.
암튼 TextEncoder 설치 후에 다음 코드를 컴포넌트 함수 상단에 넣어주었다.
const TextEncodingPolyfill = require('text-encoding');
Object.assign('global', {
TextEncoder: TextEncodingPolyfill.TextEncoder,
TextDecoder: TextEncodingPolyfill.TextDecoder,
});global은 원래 일반 변수였는데 참조하는 게 없어서 에러가 나서 문자열로 바꿔주었다. 하지만 문제 없이 동작했다.
채팅 연결이 되고 난 뒤 publish 동작도 되는 줄 알았는데 백엔드에 상담받고 보니 콘솔만 찍은 거고 client.publish가 동작되는지는 확실하지 않아서 코드를 좀 더 살펴봐야겠다. 우선 위처럼 해결했을 때 앱에서 채팅으로 입력한 값이 vscode 터미널에 찍히고 onConnect 함수는 확실히 실행된 것으로 보였다.
