문제점🚨
웹소켓 통신 테스트를 진행하면서 이유 모를 Failed가 발생했다.
로그에 어떠한 error 사항이 발견되지 않았고, 구글링을 통해 방화벽 문제, 외부 포트 허용 문제, 공유기 문제 등의 이유로 통신이 되지 않을 수도 있다는 글들을 보고 모든 방법을 동원해봤지만 계속해서 Failed만 발생했다.
그러다가 네이버 톡톡 과 같은 채팅 기능이 있는 웹 페이지에서 개발자 도구를 켜놓고 우리 사이트에서 보내는 Request Header와 타 사이트에서 보내는 Request Header와 다른 점을 찬찬히 살펴보았다.
나의 Request Header
타 사이트 Request Header
Access-Control-Expose-Headers 항목이 빠져있었다!
Access-Control-Expose-Headers를 통해 해당 페이지에 접근할 수 있는 권한을 나타낸다.
변경 전 코드
웹소켓 통신에 대한 권한 허용 코드가 없는 것을 확인했다.
변경 후 코드
다시 권한을 설정하고 로컬에서 실행하자 눈물나게도 성공했다.
다시 문제점🚨
로컬 환경에서는 통신이 성공적으로 이루어졌지만, 프론트엔드에서 배포된 서버로 요청을 보내면 또 Connection failed가 발생했다.
테스트용이었기 때문에 aws에서 배포하지 않고 ngrok을 사용하여 테스트용 배포를 하였는데, ngrok은 https 프로토콜의 포워딩 주소를 주었다. 웹소켓을 통신할 때, http - ws, https - wss 조합으로 통신을 해야했기 때문에 ws로는 통신이 안되었던 것이다.
결론적으로 ngrok 상에서 테스트는 실패했다.
wss로 요청을 보내도 Connection failed이 우리를 반겨줬기 때문에...
빠르게 포기하고 aws 배포를 진행했다. 다행스럽게도 aws 서버에서는 정상적으로 웹소켓 통신이 이루어졌다.
참고
MDN
웹소켓 테스트 사이트
개인 학습 내용이기 때문에 잘못된 정보가 있을 수 있습니다.
잘못된 정보는 댓글로 알려주시면 바로 수정할 수 있도록 하겠습니다. 🙇
