[VueJS] nuxt-socket-io 모듈 사용해보기

• 웹소켓을 이용해 express와 nuxt를 만들어보고, socket.io를 사용해보는 과정을 설명한다. socket.io는 ws에 비해 제공되는 기능이 많아 nuxt에서는 nuxt-socket-io 모듈을 이용해 socket.io를 사용할 수 있다.

• socket.io를 열어둔 서버단 소스를 작성하고, nuxt-socket-io를 설치한 후 nuxt.config.js에 소스를 추가한다. 이후 vue파일에서 socket.io를 사용하는 방법을 설명한다.

• nuxt-socket-io를 사용하여 Nuxt.js와 socket.io를 연결하는 방법을 설명하고 있다. 이를 위해선 nuxt.config.js에서 설정한 소켓 이름과 맞추고, socket.io의 네임스페이스와 채널을 맞추어야 한다. 또한, 서버에서 보내는 메시지를 받는 부분과 클라이언트에서 서버로 보내는 부분을 각각 맞추어야 한다.

• 네임스페이스를 사용하는 경우에는, of를 이용해 네임스페이스를 지정하고, nuxt에서는 channel을 연결할 네임스페이스와 맞추면 된다. 이렇게 하면 여러 개의 소켓을 만들 수 있다.