[WebSocket] 웹 소켓(Web Socket) 이란?

웹 소켓(Web Socket)이란?

Node.js에서는 웹 소켓 라이브러리 Socket.IO가 있습니다. 흔히 실시간 데이터를 주고 받기 위해서 사용되는 라이브러리 입니다. 웹 소켓(Web Socket)이란 HTML5에 적용된 스펙으로 실시간 데이터를 교환하기 위한 기술로, WS라는 프로토콜을 사용하고 있습니다. 즉, 브라우저와 서버거 WS 프로토콜을 지원하면 실시간 데이터 교환이 가능합니다. 

웹 소켓이 적용되기 전 실시간 데이터 전송을 위해서는 폴링(polling)을 사용했습니다. HTTP가 client에서 server로 향하는 단방향 통신이기 때문에 클라이언트에서 주기적으로 서버에 새로운 업데이트가 있는지 확인한 후 데이터를 가져오는 단순한 방식을 사용했습니다. 

HTML5에 웹 소켓 기술이 적용되면서 Client와 Server가 지속적으로 연결된 라인을 구축할 수 있게 되었고, 한번 라인이 구축되면 추가로 업데이트 확인을 위한 요청을 보낼 필요가 없습니다. 만약 업데이트할 내용이 발생하면 서버는 바로 클라이언트에게 즉각적으로 알리기 때문에 폴링(polling) 방식에 비해 효율적인 통신이 가능합니다. 

SSE(Server Sent Events)

폴링(polling) 방식에서 개선된 방법으로 SSE(Server Sent Events)도 등장했습니다. EventSource 객체를 사용하며 최초 서버와 클라이언트의 연결만 구축하면 지속적으로 서버에서 클라이언트로 데이터를 전송하게 됩니다. 웹 소켓과의 차이점은 클라이언트에서 서버로 데이터 전송이 불가하다는 점입니다. 웹 소켓은 양방향 통신이지만 굳이 양방향 통신이 필요없고 가벼운 통신을 구축하기 위해서 SSE가 사용되기도 합니다. 

Socket.IO

웹 소켓을 편리하게 사용할 수 있게 해주는 라이브러리 입니다. Socket.IO는 최초 서버와 클라이언트이 연결을 구축한 후 만약 클라이언트 측에서 연결이 끊기게 되면 자동으로 재연결을 시도하면서 채팅방같은 소프트웨어를 구축하는데 사용됩니다. 

 

 

WebSocket 구현하기

 

우선 express 서버를 구현합니다. webSocket 객체를 import 해와서 기존 express 서버를 webSocket과 연결해줍니다. 

const webSocket = require('./socket');
const indexRouter = require('./routes');

const app = express();

...

const server = app.listen(app.get('port') , ()=>{
    console.log(app.get('port'), `번 포트에서 대기 중`);
})

webSocket(server);

 

webSocket은 클라이언트의 IP 정보를 가져와 새로운 연결을 구축합니다. 이후 message, close, error 이벤트 리스너를 통해 클라이언트와 양방향 실시간 통신을 구축합니다. Web Socket에는 4가지 상태가 존재하며, OPEN 상태일 때만 에러 없이 메시지를 보내게 됩니다.

• CONNECTING : 연결중
• OPEN : 열림
• CLOSING : 닫는 중
• CLOSED : 닫힘

const WebSocket = require('ws');

module.exports = (server) => {
    const wss = new WebSocket.Server({server});
    wss.on('connection', (ws, req)=>{
        // 웹 소켓 연결 시
        const ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
        console.log('새로운 클라이언트의 접속', ip);
    
        ws.on('message', (message)=>{
            // 클라이언트로 부터 메시지 수신한 경우
            
            console.log(message);
        })
        ws.on('error', (error)=>{
            // 에러 발생 시
    
            console.error(error);
        })
        ws.on('close', ()=>{
            // 연결 종료 시
    
            console.log("클라이언트 접속 해제", ip);
            clearInterval(ws.interval);
        })
    
        ws.interval = setInterval(()=>{
            // 3초 마다 서버=>클라이언트 메시지 전송
            if(ws.readyState === ws.OPEN){
                ws.send('서버에서 클라이언트로 메시지를 보냅니다.');
            }
        }, 3000);
    })
}

 

WebSocket은 양방향 통신이므로 서버 뿐만 아니라 클라이언트에서도 webSocket을 구현합니다. 클라이언트도 마찬가지로 이벤트 기반으로 작동합니다. 서버와의 통신이 구축되는 시점에 onopen 이벤트가 호출되고, 서버로 부터 메시지를 받는 경우 onmessage 이벤트가 호출됩니다. 

<script>
    const webSocket = new WebSocket('ws://localhost:8005');
    webSocket.onopen = function(){
        console.log("서버와 웹 소켓 연결 성공");
    };
    webSocket.onmessage = function(event){
        console.log(event.data);
        webSocket.send('클라이언트에서 서버로 답장을 보냅니다.');
    }
</script>

 

Reference

• Source Code [Github]
• Node.js 교과서 - 조현영 지음

 

 

[Blockchain] ERC-20 투표로 관리자 owner 설정 하는 방법

 

[Security] HTTP vs HTTPS 차이

 

[Javascript] apply() vs call() vs bind() 차이