[해결] Socket.io 웹뷰 접속지연

재직중인 회사에서 개발중인 프로젝트에 Socket.io를 도입하기로 했다.

서버개발자와 협업하여 크게 어려움 없이 개발하며 Socket.io를 활용한 실시간채팅을 구현해냈다.

 

그런데 이게 왠걸

Local환경에서 잘만되던게 웹뷰 (하이브리드앱)에서만 접속이 지연되는 것이 아닌가...

원인을 파악해보자.

 

접속순서는 이렇다.

connect -> connection -> joinRoom

먼저 connect는 소켓 서버와 연결을 요청한다.

connection은 서버에서 room을 줄 준비가 되었음을 의미한다.

connection을 수신하면 joinRoom요청으로 입장과 동시에 메시지, 상대방, 나의정보를 받는다.

 

발견사항 1

매번 접속지연이 발생하는 것이 아니라 약 3회에 1번꼴로 종종 발생한다.

이것은 사용자에게 매우 좋지 않은 경험을 줄 것이다.

이대로는 절대 안된다.

 

발견사항 2

개발자모드 Network를 확인해보았다.

그런데 웹소켓부분(WS)에 message로 수신되어야할 connection이 Fetch/XHR로 수신되고 있다.

더 이상한 것은 Fetch/XHR로 수신될때는 정상

WS에 message로 수신될때는 접속지연이 발생한다는 것이다.

웹뷰에서만 발생하고 접속지연시 connect에는 pending상태, 지연끝에 접속하면 ws-message로 수신되는것이다.

 

발견사항 3

잘동작하는것은 로컬뿐만이 아니다. 모바일 웹(chrome, safari)에서 매우 잘 동작한다.

 

의심

클라이언트 코드에는 크게 지연될만한 코드가 없다.

대량의 데이터를 수신하거나 수신된 데이터에 반복문을 걸거나 하는 것도 없다.

발견된 내용에 따르면 설령 클라이언트에서 성능에 영향이 안좋은 코드가 있다하더라도 원인일 수 없다.

서버개발자와 여러차례 회의해본 결과

접속하자마자 connect를 즉시 보내고 서버에서도 매우빠르게 connection을 보내주는 것이 확인된다.

Mount시 io를 두번선언한다거나 그런 잘못된 경우도 없고 웹뷰에서만 문제가 발생한다.

앱에서 네트워크를 지연시키는 것 같다는 의심이 끊이질 않는다.

 

해결책

팀에는 앱개발자가 없다.

외주로 개발된 앱이며 외주계약이 끝나 더 이상 사후관리를 요청하기 힘들다.

서버와 클라이언트에서 Socket.io를 사용하지 않고 WebSocket으로 대체하기로 했다.

Socket.io github에 들어가보니 비슷하거나 더욱 심한증상을 겪는 개발자가 산더미였다.
https://github.com/socketio/socket.io-client/issues/1259

Unable to connect on React-Native (only in Debug Mode) · Issue #1259 · socketio/socket.io-client

 

 

해결 후 느낀점

수많은 고민과 팀 회의를 거듭하며 결론은 Socket.io를 사용하는 대신 WebSocket을 사용하여 실시간채팅을 구현하자는 것이다.

많이 찝찝하다.

그 이유는 명확한 원인을 파악하고 재발을 방지하고자 했지만

한계가 있었고 결국 우회하는 해답을 사용했으니..

작업 후 현재 프로젝트의 실시간 채팅은 접속지연이나 끊김현상은 해결되었다.

 

해결했다고 끝내기 보다는 가능한 원인을 조금 더 찾아볼 계획이다.