Socket.io

현재 진행중인 팀 프로젝트에서 nodeJS와 React로 메신저를 만들고있습니다. 메신저가 메세지를 주고받는 방법으로는 대표적으로 websocket을 사용한 방식이있습니다. 메신저에서 메시지가 전송 될 때 마다 HTTP method GET을 통해 받아올수도 있겠지만 그러면 너무 많은 요청을 하게됩니다. 하지만 websocket을 사용한다면 서버-클라이언트간에 실시간으로 통신을 가능하게 해주어 요청없이 응답을 보내줄 수 있습니다.

NodeJS에서는 이렇게 편리한 websocket을 사용하기 위해 socket.io라는 모듈을 사용합니다. socket.io는 npm install socket.io 명령어를 통해 설치할 수 있습니다. Express에서의 사용 방법은 아래와 같습니다.

const express       = require('express');
const app        = express();
const http = require('http').createServer(app);
const io   = require('socket.io')(http)

io.on('connection', (socket) => {//connection
    console.log("UserConnected",socket.id);

    socket.on('connected',(cookie) => {
  		socket.emit('entrance-message',`Say hello! to ${user_id.id}`);
    });
    socket.on('disconnect', () => { 
        console.log('UserDisconnected');
    });
    socket.on('chat-message', (msg) => { 
        console.log("message:",msg);
    });
})

io 변수는 방금 설치한 socket.io가 담겨 있습니다. socket.io는 기본적으로 on과 emit이라는 단어와 같이 오게 되는데, socket.emit('값')은 값에 들어가는 이벤트를 요청하면 해당 값을 가진 socket.on('값')이 실행됩니다. io.on('connection', socket => {})은 소켓이 연결에 성공했을때 실행되는 로직으로 socket에 커넥션에 대한 정보가 담겨져있습니다. 이렇게 행복할 것 같은 socket 통신에 문제가 생깁니다.

Problem

React에서는 socket.io-client라는 모듈을 설치하고 같은 와이파이에 있다면,

const socket = io.connect('백엔드ip');

와 같은 간단한 코드를 통해 연결할 수 있습니다. 하지만 socket을 출력하면 나오는 결과는 Fail. 참고로 저희는 프론트엔드와 백엔드 서버를 다른 PC에서 실행중이였습니다.

혹시 코드가 잘못된게 있는지 길고 긴 시간과 여러번의 실험, 그리고 회의 끝에 cors origin에 문제가 있다는 것을 알게 되었습니다. cors에 대한 자세한 내용은 다음 번 포스트에 더 자세하게 알아보고 간단하게 cors origin에 대해 살펴보자면, cors는 Cross-Origin Resource Sharing로 다른 출저에서 정보를 가져오기 위해 HTTP request시에 Header cors 정보를 넣어서 주게됩니다. nodeJS에서도 마찬가지로 cors 모듈을 설치해서 app이 사용할 수 있게하면 프론트엔드에서 문제없이 백엔드 리소스들을 불러갈 수 있습니다. 문제는 websocket까지는 커버하지 못했나 봅니다.

Solution

socket.io v3부터 CORS를 직접 설정해야한다고 합니다. 위의 코드에서 io 변수를 선언할 때 코드를 손봐야합니다.

const http = require('http').createServer(app);
const io   = require('socket.io')(http, {
    cors: {
        origin: ["프런트 ip"],
        methods:["GET","POST"],
    }
});

위의 cors 객체에 소켓 커넥션시 headers에 들어갈 내용을 넣을 수 있습니다.