Vue.js Websockt TIL

itbuddy·2024년 3월 18일

우당탕 어쩌다 보니 vue.js 프로젝트를 맡게 되었습니다.

그동안은 사이드 프로젝트나, 백오피스 작업하면서 만져 봤었는데 실제 프로젝트를 받게 되니 조금 놀라긴 했지만. 회사에서 시키는 일이니 팀에 꼽사리 껴서 열심히 했습니다.

백오피스에서 vue.js를 만지면서 어떻게 해야 더 쉬운 구조를 만들수 있을까 항상 고민해서 유지보수 하기 쉬운 프로그램을 위한 규칙을 정해 놓았었는데요. 이번에 그 규칙을 적용하여 작업해보았습니다.

제가 정한 규칙은 다음과 같은데요

규칙(코드 컨벤션)

props로 넘겨 주는 데이터는 1단계 이상이면 Vuex를 고려 ( 보통 api 요청 결과들이 해당 됨)
props 로 1단계 이상 넘겨주는 것은 함수만
간단한 화면 상태는 component의 state ( data(){..} ) 에서 관리
api, websocket의 응답/요청은 전부 typescript로 interface 작성
onClick, onFocus 를 함수의 prefix로 사용후 상단에 해당 이벤트의 시나리오 설명을 주석으로 작성
시나리오 설명이 필요한 메소드들도 전부 주석으로 시나리오 작성 ( 서버와 의사 소통한 내용도 포함)

이를 바탕으로 작업한 결과, FLUX 패턴의 이점을 모두 가져 오면서, 불필요한 vuex 작업을 줄여서 작업할수 있었습니다.
팀원들도 이런한 구조에 만족하였고, 일을 쉽게 나누어서 할수 있었습니다.

트러블 슈팅

프로젝트를 진행하면서 다양한 트러블 슈팅도 경험했습니다.
저를 포함한 모두가 Websocket을 사용하는 프로젝트에 기능을 붙이는 것을 처음이였기 때문에 갖가지 수행착오가 있었으나 결국을 잘 해결했습니다.

1. mixed-content 에러

웹소켓 연결은 http, api는 https, vue 개발 서버는 http로 구동 되다 보니 mixed-content에러가 발생하였습니다.
근본적인 해결을 하려면 협력체측에서 개발용 웹소켓 서버와, API 모두에 HTTPS 설정을해야 했지만 협력체 내부 사정으로 불가하였습니다.
때문에 개발할 때만 chrome에서 mixed-content 에러 발생을 disable 시키고 개발을 진행하였습니다. 이는 PC에서는 적용이 가능한 방법이지만, 모바일에서는 불가한 방법으로 모바일 테스트를 불가능하게 만들었습니다. 당시에는 팀원들 모두가 PC도 잘된다면, 모바일도 문제 없다는 안일한 생각을 하였고. 후에 큰이슈를 발견하지 못하는 시발점이 됩니다.

2. CORS 문제

협력체측 서버 연결이 계속 어려웠습니다.
협력체측에서 API 개발을 모두 완료한 뒤에 localhost:3000 에 대한 CORS 허용을 하지 않아서. API 연동을 바로 시작하지 못하였습니다. API 개발 및 설정이 적용될 때까지 자체적으로 API 문서를 참고하여, 가짜 응답을 만들어서 API를 제외한 나머지 부분만 개발을 마치고 기다려야 했습니다.

3. IOS Safari에서 Websocket이 화면 잠금뒤 30초가 지나면 connection이 끊기는 현상

PC에서는 발견하지 못했던 현상입니다. IOS Safari의 경우 Websocket 연결이 브라우저 정책에 따라 끊기는 현상이 발생했습니다. 미처 발견하지 못하여서 꽤나 맘 졸이게 만들었던 문제입니다.
이전 개발건에서도 발생했었을 문제인데 이전에는 채팅만 구현하였기 때문에 메세지를 보내기전에 연결을 시키기도록 처리했던것으로 보이나

하지만 새로운 기능을 넣으면서 게임을 진행하는 중에는 실시간으로 웹소켓 메세지를 받아야 하는 상황에서는 큰 문제가 되었습니다. setInterval을 통하여 매 1초마다 연결을 확인하도록 하여 해결하였습니다. 시나리오상 브라우저가 최소화 되거나 화면이 잠겨서 setInterval이 쓰로틀링 처리가 될때는 게임에서 나간것으로 처리