socket.io 사용하기

• socket.io 모듈을 활용한 메시지 주고 받기

socket.io를 사용하기 위해 모듈 설치

• socket.io 모듈 설치
• cors 모듈 설치
  • why?)
  • 기본적으로 웹 소켓을 사용하지만 웹 브라우저가 웹 소켓을 지원하지 않는 경우, XHR을 사용하기 때문에 다른 웹 서버에서 접근할 수 없다.

> npm install socket.io --save
> npm install cors --save

• Access-Control-Allow-Origin 헤더를 포함해 응답을 해줄 수 있도록 한다.

app.js 파일에 기본 코드 하나씩 추가하기

• 해당 모듈을 추가한다. (socket.io, cors)
• cors 모듈은 라우터 미들웨어 보다 우선 순위가 높아야 한다.

• socketio는 익스프레스 서버에서 웹 소켓 요청을 받아드린다. 그래서 실행 중인 서버 위에서 동작할 수 있도록 http.createServer(...)를 객체로 받아 인자 값으로 전달하도록 한다.

• 클라이언트가 접속하거나 데이터를 전송했을 때 이벤트 발생한다.
• Client - js와 Server -js 참고

// [Server]
io.sockets.on('connection', (socket) => {
    //...
});

// [Client]
socket.on('connect', () => {
    appendMessge('connected server');
});

서버에 보낸 메시지를 그대로 받기

• 데이터를 보낼 때는 emit()을 활용한다.

• 동일한 이벤트명, emit(Client) -> on(Server) -> emit(Server) -> on(Client)

• io.sockets.emit는 송신자를 포함하여 방송하고, socket.broadcast.emit는 송신자를 제외하여 방송한다.

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

    socket.on('message', (message) => {
        console.log('sending ALL');
        io.sockets.emit('message', message);
        // socket.broadcast.emit('message', message);
    });
});

일대일 채팅하기

• socket.io 모듈은 클라이언트마다 고유한 id를 만들어 준다. 하지만 복잡하기 때문에 사용자 id 등으로 구별하는 것으로 한다.

이후…

이후 스펙은 필요에 따라 공부를 실시하겠다. (js나 타 미들웨어를 공부하는 것이 보다 효율적이라고 생각한다.)