Node Js,Vue - SocketIo 세팅

지난번 JWT 토큰 관련 포스팅 이후 거의.. 일주일 만에 블로그 포스팅을 작성하네요 채팅 시스템 개발 작업은 계속하고 있으나 최근에 일이 바빠서 개발을 많이 못한 게 조금 아쉽습니다 오늘은 우선 Node JS, Vue에서 소켓 IO 세팅법에 대해 간략히 포스팅을 하고 다음에 채팅과 관련된 기능들에 대해서 포스팅하도록 하겠습니다

 

 

Socket IO

우선 소켓 IO에 대해서 알아보도록 하겠습니다

Socket IO란 실시간 웹 애플리케이션을 위한 이벤트 기반 Javascript 라이브러리입니다 즉 클라이언트와 서버 간 실시간으로 통신할 수 있도록 해주는 라이브러리이며 WebSocket 기반으로 동작하고 있습니다

Socket IO 같은 경우는 주로 실시간 서비스, WeRTC 스트리밍 등 다양한 서비스에서 사용되고 있습니다

 

Socket IO 세팅 - Node JS

Socket IO 세팅을 하기 위해서는 우선 Express 서버가 설치되어 있어야 합니다

Express 설치

npm i express

 

Express 설치 이후 socket io를 설치해주시면 됩니다

Socket IO 설치

npm install socket.io

 

설치 이후에 app.js 파일을 생성하여 아래 코드를 삽입해줍니다

const port = 4000;
const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require("socket.io");
const io = new Server(server);

app.get('/', (req, res) => {
    res.end("root");
});

io.on('connection', (socket) => {
    console.log('a user connected');
});

server.listen(port, () => {
    console.log(`listening on *:${port}`);
});

이후 node app.js 명령어를 실행하기 되면 간단한 소켓 IO 서버가 실행됩니다

 

Vue Socket IO 세팅

socket io 공식문서네 나와있는 기본 세팅방법에는 nodejs 서버에 클라이언트 서버가 같이 있는 구조로 되어있습니다, 하지만 저희는 Vue 프레임워크를 사용할 예정이며, Vue 프레임워크 사용 시 클라이언트와 서버가 분리가 되기 때문에 클라이언트 전용 플러그인을 설치 후에 연동을 해주어야 합니다 이때 사용하는 플러그인이 socket.io-client 플러그인입니다

 

socket.io-client 설치

npm i socket.io-client

설치 이후 vue 프로젝트에 main.js 파일에 아래 코드를 삽입해줍니다

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

//socket io 연동
import io from 'socket.io-client'; 
const socket = io('http://localhost:4000')
Vue.prototype.$socket = socket;

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

여기까지 진행하면 지정한 서버와 socket 연동이 가능하나 한 가지 오류가 발생하게 됩니다

위와 같은 에러가 클라이언트에서 발생하게 됩니다, 에러에 내용은 현재 서버는 localhost:4000 도메인으로 되어있는데 클라이언트는 localhost:8080 도메인으로 되어있어 CORS(교차 컨텐츠 참조 오류)가 발생하였습니다

해당 오류를 수정하기 위해서는 socket io CORS 설정을 추가해주어야 합니다

 

Node - app.js

const port = 4000;
const express = require('express');
const app = express();
const http = require('http');

//-----해당 부분이 수정되었습니다
const server = http.createServer(app);
const io = require("socket.io")(server, {
    cors: {
      origin: "http://localhost:8080",
      methods: ["GET", "POST"],
      allowedHeaders: ["extra-custrom-headeres"],
      credentials: true
    },
    allowEIO3: true 
});
//----------------


app.get('/', (req, res) => {
    res.end("root");
});

io.on('connection', (socket) => {
    console.log('a user connected');
});

server.listen(port, () => {
    console.log(`listening on *:${port}`);
});

IO 변수를 설정하는 부분에 cors 관련한 설정을 추가해줍니다 cors 설정은 cors를 허용할 도메인,메소드,헤더 및 쿠키 허용 관련한 설정을 추가해주시면 됩니다

cors 아래 있는 allowEIO3 설정 같은 경우는 현재 socket io의 버전이 3.* 버전인데 2.* 버전과도 통신 가능하도록 설정을 잡아주는 부분입니다

 

그 이후 클라이언트도 CORS 관련한 설정을 추가해주시면 됩니다

Vue - main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

//socket io 연동
import io from 'socket.io-client'; 
//-------이부분이 수정되었습니다
const socket = io('http://localhost:4000',{
  withCredentials: true,
  extraHeaders: {
    "extra-custrom-headeres": "localhost"
  }
})
//---------------
Vue.prototype.$socket = socket;

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

서버 설정과 마찬가지로 쿠키 및 허용을 요청할 헤더를 설정해주시면 됩니다

이와 같이 설정이 완료가 된 이후에 크롬 관리자 탭 -> Network 탭을 보시면 소켓 IO 통신이 되고 있는 것을 확인할 수 있습니다

 

마치며

오늘은 소켓 IO 관련하여 세팅을 해보았습니다, 기존에 소켓 IO를 사용할 때는 2.* 버전을 사용하여 CORS 관련한 설정이 없었는데 3.* 버전으로 업데이트되면서 CORS 설정을 추가해야 돼서 여러모로 세팅하는데 시간이 좀 걸렸습니다 한번 사용한 플러그인은 추후에도 계속 사용할 가능성이 높아 업데이트 관련한 릴리즈 노트를 유심히 봐야 될 거 같습니다, 다음 포스팅에서는 socket io 관련한 이벤트 처리에 대해서 포스팅해보도록 하겠습니다