[Node.js] Express + Socket.io + Redis

아리보리 | 2017.10.27 10:23 | 조회 1230 | 추천 0 | 댓글 0

Node.js 생태계에서 가장 많이 사용하는 웹 프레임워크인 Express와 Long polling과 Websocket을 쉽게 사용할 수 있는 Socket.io,

그리고 이러한 환경을 멀티 노드로 구성하였을 때, 컨텍스트 간의 상태를 공유하기 위해 Redis store까지 연동하는 방법을 정리한다.

깃허브 링크 -> https://github.com/ahribori/socket.io-redis-express

Express와 Socket.io, Socket.io-redis를 의존성에 추가한다.

npm install express socket.io socket.io-redis

Server Side Code

import express from 'express';

const app = express();
const server = require('http').createServer(app);
const port = process.argv[2] || process.env.PORT || 8080;
const redis = require('socket.io-redis');

const io = require('socket.io')(server, {
    path: '/socket.io', // 클라이언트 사이드 코드의 path와 동일해야 한다.
    transports: ['websocket'] // websocket만을 사용하도록 설정
});

// 프로세스를 여러 개 띄웠을 때, 컨텍스트를 공유하기 위해 redis store를 바인딩 시킨다
io.adapter(redis({ host: 'localhost', port: 6379 })); 

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

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

Client Side Code

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>socket io redis store</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="http://localhost:8080/socket.io/socket.io.js"></script>
    <script>
        var supportsWebSockets = 'WebSocket' in window || 'MozWebSocket' in window;
        if (supportsWebSockets) {
            var socket = io('http://localhost:8080', {
                path: '/socket.io', // 서버 사이드의 path 설정과 동일해야 한다
                transports: ['websocket'] // websocket만을 사용하도록 설정
            });

            socket.on('message', function(data){
                $('#chat').append('<li>'+ data +'</li>');
            });

            $(function() {
                $('#btnSend').click(function(){
                    socket.emit('message', $('#inputText').val());
                    $('#chat').append('<li>'+ $('#inputText').val() +'</li>');
                    $('#inputText').val('');
                });
            })
        } else {
            alert('websocket을 지원하지 않는 브라우저입니다.');
        }

    </script>
</head>
<body>
socketio redis store...<br/>
<input type="text" id="inputText" />
<button id="btnSend">보내기</button>
<ul id="chat"></ul>
</body>
</html>