node.js ws 를 이용한 웹소켓 구현.

그간의 html 통신은 요청에 대한 처리를 한 후 응답을 돌려주는 방식으로 동작했습니다. 우리가 흔히 챗팅 프로그램에서 사용하는 포로토콜인 TCP/IP를 사용했지만, [연결->요청에대한처리->응답->연결끊기] 사이클을 반복하며, 연결을 계속 끊기 때문에, 클라이언트의 요청은 언제든지 전달 할 수 있지만, 서버의 메시지는 클라이언트로 전달할 수 없었습니다.

그래서 나온 것이 웹소켓 이며, 서버의 구현도 간단하며 (직접 구현해도 될 정도), 클라이언트 또한 매우 간결하며, 요즘은 대부분은 웹브라우저에서 지원을 해 줍니다. 이 페이지는 ws 모듈을 이용해 웹브라우저와 node.js간의 간단한 통신을 구현한 예제를 설명하고 있습니다. 간단하지만, 이를 바탕으로 원하는 채팅 모듈을 구현할 수 있으리라 생각이 됩니다.

본 문서를 보려면, node.js 에서 express 서버의 구축 과정을 알고 있어야 합니다. (물론 아래에 관련 링크를 제공합니다.)

 

 

[공식문서]

websocket org :  https://www.websocket.org .
ws : http://www.npmjs.com/package/ws .

 

[참고문서]

express 구축 : https://nicgoon.tistory.com/234 .
javascript 웹소켓 클라이언트 : https://nicgoon.tistory.com/227 .

 

 

 

1. express 구축.

이 부분은 따로 설명하지 않습니다. ws 사용법을 집중적으로 다루기 위함 입니다. express를 사용해 본 경험이 없으시다면, 참고 문서의 express 구축 ( 링크 ) 페이지를 따라 구축해 주시면 될 것 같습니다.

 

 

 

2. ws를 이용한 route구축.

ws 모듈을 설치 합니다.

$ npm i ws

 

그리고 웹 소켓 통신을 처리할 모듈을 구현할 webSocket.js 파일을 만들어 줍니다.

모듈파일을 생성했다면, 아래와 같이 소스를 만들어 줍니다. (각 소스에 대한 설명은 주석을 달아 두었습니다.)

const wsModlue = require( "ws" );


module.exports = function( _server )
{


    // 웹소켓 서버를 생성합니다.
    const wss = new wsModlue.Server( {server:_server} );

    // 클리이언트가 접속했을 때 처리하는 이벤트 메소드를 연결합니다.
    wss.on( 'connection', function( ws, req ){

        // 사용자의 ip를 파악합니다.
        let ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
        console.log( ip + "아이피의 클라이언트로 부터 접속 요청이 있었습니다." );

        // 메시지를 받은 경우 호출되는 이벤트 메소드 입니다.
        ws.on('message', function( message ){

            // 받은 메시지를 출력합니다.
            console.log( ip + "로 부터 받은 메시지 : " + message );

            // 클라이언트에 받은 메시지를 그대로 보내, 통신이 잘되고 있는지 확인합니다.
            ws.send( "echo:" + message );

        });

        // 오류가 발생한 경우 호출되는 이벤트 메소드 입니다.
        ws.on('error', function(error){
            console.log( ip + "클라이언트와 연결중 오류 발생:" + error );
        })

        // 접속이 종료되면, 호출되는 이벤트 메소드 입니다.
        ws.on('close', function(){
            console.log( ip + "클라이언트와 접속이 끊어 졌습니다." );
        })


    });


}

 

그런 다음 모듈을 http 서버에 연결해 줍니다. (express같은 경우 listen을 통해 만들어진 서버, http의 경우 createServer 메소드로 만들어진 서버). 위에 링크된  express 구축을 따라 했다면, /bin/www 파일 속에 server 객체가 정의 되어 있습니다. 적당한 위치에 아래와 같이 웹소켓을 연결하도록 합니다.

const webSocket = require("../routes/webSocket");
webSocket( server );

 

웹소켓은 익스프레스 서버와 port를 공유하므로, 따로 포트를 지정할 필요가 없습니다.

 

 

3. 브라우저를 통해 웹소켓 서버에 접속해 보기.

브라우저에서 웹소켓 이용 방법은 위의 참고 문서 [javascript 웹소켓 클라이언트 (링크)] 문서를 읽어 주세요. 이 페이지는 node js를 통한 웹소켓 서버 구축만 집중적으로 설명을 합니다.

웹소켓을 테스트하기 위한 웹 브라우저는 따로 만들지 websocket공식 사이트에 구현된 챗팅 클라이언트 페이지를 이용합니다. 웹소켓 기능을 구현할 때 일단 websocket 공식 사이트에 구헌된 챗팅 클라이언트 페이지를 이용해 구축하고, 클라이언트 부분은 이렇게 완성된 웹소켓 서버와 연결하는 식으로 구축합니다. 2가지를 한 꺼번에 구축하면, 오류 발생시 어느쪽이 문제인지 알 기 힘듭니다. 이렇게 단계별로 만든다면, 약간은 쉽게 구현이 가능합니다.

먼저 지금 까지 구현 한 서버를 동작 시켜 줍니다.

$ npm start

 

그 다음, 클라이언트로 이용할 https://www.websocket.org/echo.html 페이지로 접속합니다. 그러면 아래와 같은 화면을 볼 수 있습니다. 여기서, 로케이션 창에 주소를 입력하고 connect 버튼을 누릅니다. 이라고 입력 합니다.  위의 참고 문서 [express 구축] 을 보고 서버를 구축했다면, 주소는 ws://localhost:3000 이 됩니다.

그럼 아래와 같이 접속이 됩니다.

서버 또한 클라이언트로 부터 연결이 있었음을 알 수 있는 로그를 표시합니다.

 

다음 웹브라우저에서 서버로 메시지를 보내 보겠습니다. Message 항목에 적당한 메시지를 입력하고, Send 버튼을 누릅니다.

그럼 메시지가 가고, 서버로 부터 보낸 내용을 그대로 보낸 메아리를 받을 수 있습니다.

서버측에서도 클라이언트가 보낸 메시지의 로그를 확인할 수 있습니다.

 

마지막으로 접속을 끊어 보겠습니다. Disconnect 버튼을 누릅니다.

그리고 나면 접속이 끊어졌음을 로그로 확인할 수 있습니다.

 

물론 서버측에서도 클라이언트와 접속이 끊어졌음을 확인하는 로그를 볼 수 있습니다.

 

 

저는 웹소켓동작이 잘되었습니다. 여러분들도 잘 동작이 되었으면 좋겠습니다.