하루 종일 Vue -> Server socket.io 통신 문제만 붙잡고 있었다…
단순히 소켓연결만 구현하는 것은 어렵지 않지만, 내가 만든 프로젝트의 구조는 로그인 한 후 소켓에 연결해야 사용자를 식별할 수 있다.
하지만 기존의 예제들은 모두 Vue가 실행되자 마자 socket 연결을 시도한다.
이를 해결하기 위해 오랜 삽질을 했고... 결국 해결하였다.
라우팅할 때 socket 재접속하기
socket.io-client 라이브러리로 client 측 socket.io 접속을, Vue에서 socket.io를 편히 사용하기 위해 vue-socket.io-extended 라이브러리를 사용하였다. vue-socket.io 가 아니다!!
// src/main.js
import io from 'socket.io-client'
import VueSocketIO from 'vue-socket.io-extended'
const socket = io('소켓주소', { transports : ['websocket'] });
Vue.use(VueSocketIO, socket);
{ transports : ['websocket'] }
옵션을 꼭 주도록 하자. 안써주면 기존의 Polling 방식으로 통신을 시도하는데, 이상하게 접속이 되질 않는다.
이제 로그인 이후에 소켓에 재접속을 해야 한다
// src/router/index.js
import Vue from "vue";
import VueRouter from "vue-router";
import io from 'socket.io-client'
import VueSocketIO from 'vue-socket.io-extended'
const socket = io('소켓주소', { transports : ['websocket'] });
Vue.use(VueRouter);
const routes = [
{
path:"/test",
component: () => import("@/views/Test"),
beforeEnter(to, from, next) {
Vue.use(VueSocketIO, socket);
next();
}
},
...
이렇게 특정 주소로 라우팅 할 때 마다 beforeEnter()
로 내가 원하는 작업을 할 수 있다.
이제 이벤트 처리를 해주자.
vue-socket.io-extended로 이벤트 처리하기
// component.vue
...
<script>
export default {
...
mounted() {
// socket.on
this.$socket.$subscribe('doom_get_in', (data) => {
console.log(data);
this.response = data;
});
},
methods: {
btnClicked() {
// socket.emit
this.$socket.client.emit('to_cohort');
}
},
sockets: {
connect() { //socket connected
console.log('socket connected')
}
}
};
</script>
this.$socket.$subscribe(event, callback)
로 event를 받을 수 있다. socket.on
과 같은 역할을 한다.
반대로 socket.emit
을 하기 위해서는 this.$socket.client.emit(event)
를 해준다!
이제 되겠지...?
된다... 되긴 하는데... 안된다...
server -> client로 이벤트를 날리면 client에서 잘 받는데!! client -> server로 이벤트를 날리면 날라가지가 않는다...
또 이상한 점이 client에서 socket연결을 하면 server에서는 잘 접속이 되었다고 뜨는데! client에서 접속이 됐는지 로그를 띄우면 접속 되지 않았다고 뜬다!!
아무리 봐도 코드에는 문제가 없는데!! socket.io이 이상하게 작동하는 경우
정말 이것 저것 다해봐도 해결이 안된다...
그러다가 socket.io-client npm 사이트에 들어가게 되었는데, 2.4.0 버전이 제일 다운로드 수가 많은 것을 확인하였다.
그래서 혹시나 하는 마음으로 socket.io-client를 2.4.0 버전으로 다운그레이드 진행 후 테스트 해봤더니...
아주 잘된다... 하...
역시 괜히 다운로드수가 많은게 아니였다...ㅋㅋㅋ
'대회, 프로젝트 > 2021 군장병 해커톤' 카테고리의 다른 글
Backend 기능 설명 (0) | 2021.10.28 |
---|---|
[Vue.js, Node.js] passport.socketio cors issue (0) | 2021.10.14 |
[Node.js] Socket.IO + JWT + Session (0) | 2021.10.12 |
[Docker / M1 sillicon] MySQL Build Error, 컨테이너 내에서 한글 입력 (0) | 2021.10.09 |
[pm2] 502 Bad Gateway 해결 (0) | 2021.10.07 |
Comment