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

웹소켓 관련해서 직접 제대로 해본 적이 없어서 ws를 이용해 express와 nuxt에 만들어서 해본 뒤 socket.io도 해봤었다.

socket.io가 ws에 비해 제공되는 기능이 많다고 해서 해봤고, nuxt에서는 nuxt-socket-io라는 모듈을 이용해 socket.io를 사용할 수 있길래 사용해봤다.

테스트는 vue2 기반의 nuxt 프로젝트에서 진행했습니다.

---

우선 socket.io를 열어둔 서버단 소스는 소켓 쪽 소스만..(넷 상에 참고할 소스들이 많기에...)

const SocketIO = require('socket.io');

module.exports = (server) => {
  const io = SocketIO(server, {
    path: '/socket.io',
    cors: {
      origin: '*',
      methods: ["GET", "POST"]
    }
  });
  io.on('connection',  (socket) => { //웹 소켓 연결 시
    const req = socket.request;
    const ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
    console.log('새로운 클라이언트 접속 !!', ip, socket.id);

    socket.on('disconnect', () => { //연결 종료 시
      console.log('클라이언트 접속 해제', ip, socket.id);
      clearInterval(socket.interval);
    });
    socket.on('error', (error) => { //에러 시
      console.error('socket.io Error : ', error);
    });
    socket.on('reply', (data) => { //클라이언트로부터 메시지 수신 시 
      console.log('클라이언트로부터 받은 메시지 : ', data);
    });
    socket.on('nuxt', (data) => {
      console.log('nuxt 웹에서 받은 메세지 : ', data);
    });
    socket.interval = setInterval(() => { //3초마다 클라이언트로 메시지 전송
      socket.emit('news', 'Hello Socket.IO!!');
    }, 3000);
  });
}

포트는 8005로 열어두었고, 네임스페이스는 사용하지 않았다.

 

이제 nuxt 쪽 작업

먼저 nuxt-socket-io를 설치

npm i nuxt-socket-io

설치 이후 nuxt.config.js에 아래와 같이 소스 추가

modules: [
    'nuxt-socket-io',
],
io: {
    sockets:[
      {
        name:'main',
        url: 'http://localhost:8005',
        default: true
      }
    ]
  },

modules에 설치한 nuxt-socket-io를 추가하면 io 속성을 사용할 수 있다.

sockets의 구조를 보면 배열인걸 알 수 있는데 여러 개의 소켓 정보를 넣을 수 있다.

url은 socket.io 서버 url을 넣어주면 되고, name을 통해 nuxt웹 내부에서 접근해 사용할 수 있다.

 

이제 설정은 끝났으니 vue파일에서 사용법은 아래와 같다.

<script>
export default {
  data() {
    return {
      socket : null,
    }
  },
  created() {
  },
  mounted() {
    this.makeIO();
  },
  methods: {
    makeIO() {
      this.socket = this.$nuxtSocket({
        name: 'main',
        channel: '/', 
        emitTimeout: 1000
      })
      this.socket.on('news', (msg, cb) => {
        console.log('socket.io로부터 받은 메시지 : ', msg);
        this.socket.emit('nuxt', 'nuxt에서 보냄...')
      })
    }
  }
}
</script>

this.$nuxtSocket을 이용해 연결을 하면 된다.

name은 위 nuxt.config.js에서 설정한 소켓과 맞춰주면 된다.

channel은 socket.io의 네임스페이스와 맞춰주면 된다. (위에 작성한 소켓 소스에서는 네임스페이스를 지정해주지 않았기 때문에 '/' 으로만 작성하면 된다.)

 

this.socket.on은 서버단에서 보내는 메시지를 받는 부분이니 서버단의 emit 부분과 맞춰주면 되고, (서버단 소스 setInterval 쪽 참고)

this.socekt.emit은 클라이언트에서 서버로 보내는 부분이라 서버단에 socket.on 과 맞춰주면 된다.

이렇게 하면 끝이다.

서버단 로그

nuxt 로그

만약 네임스페이스를 사용한다면,

const SocketIO = require('socket.io');

module.exports = (server) => {
  const io = SocketIO(server, {
    path: '/socket.io',
    cors: {
      origin: '*',
      methods: ["GET", "POST"]
    }
  });
  io.of('socket1').on('connection',  (socket) => {
    ...
  });
}

io.of('name')~~ 이렇게 of를 이용해 네임스페이스를 지정해 소켓을 여러 개를 만들 수가 있는데

이런 구조일 때 nuxt에서 접근은 channel을 연결할 네임스페이스를 맞춰주면 된다.

this.socket = this.$nuxtSocket({
  name: 'main',
  channel: '/socket1', 
  persist: true,
  emitTimeout: 1000
})
this.socket.on('news', (msg, cb) => {
  console.log('socket.io로부터 받은 메시지 : ', msg);
  this.socket.emit('nuxt', 'nuxt에서 보냄...')
})

네임스페이스 socket1의 socket.io로 접속하는 소스..

 

끝

---

nuxt-socket-io 깃허브 주소

https://github.com/richardeschloss/nuxt-socket-io

GitHub - richardeschloss/nuxt-socket-io: Nuxt Socket IO - socket.io client and server module for Nuxt

nuxt-socket-io 공식홈페이지

https://nuxt-socket-io.netlify.app/

Introduction

다양한 옵션과 기능들을 확인할 수 있다.