그간의 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 버튼을 누릅니다.

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

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

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

nodejs 다양한 기능을 커스터마이징해 원하는 서버를 구축하거나, 원하는 앱을 만들 수 있습니다. 하지만 이 자유로움 이면에는 다른 서버 프로그램에 비해 약간(?) 많은 작업량이 존재합니다.

이 것을 보완하기 위해 Express-generator가 제공되는 데, 1분 이내에 express 서버의 셋팅이 완료됩니다. Express 서버를 구축할 때 매번 같은 모듈을 다운로드 받고 설치하는 작업을 반복하는 것 보다 Express-generator를 사용하는 것이 좋습니다.

이 문서는 기본 적으로 node js가 설치되어 있다고 가정하고 시작합니다.

1. Express-generator 설치

Express-generator는 다른 모듈 처럼 npm을 통해 설치되지만, 터미털(윈도우에서는 커맨드)에서 일반 명령처럼 사용되어야 하므로, 전역에 설치되어야 하며 명령은 다음 과 같습니다.

$ npm i -g express-generator

2. 프로젝트 폴더 만들기.

원하는 위치에 프로젝트 폴더를 만듭니다. 저는 nodejs_express_generator 라는 폴더를 만들었습니다. 저는 맥을 사용해 터미널 명령으로 만들었지만, 파인더로 만들어도 되며, 윈도에서는 command, 탐색기 뭐든 사용해도 좋습니다.

3. express 프로젝트 생성하기.

위에서 만든 폴더의 상위 폴더에서 다음과 같이 터미널 명령을 주면, express가 자동으로 셋팅됩니다. 이 때 자동으로 셋팅되었을 뿐, 관련 모듈들이 모두 설치된 상태는 아닙니다.

$ express <프로젝트폴더명> --view=pug

저는 위에서 ndejs_express_generator라는 프로젝트 폴더를 만들었으므로, [express ndejs_express_generator --view-pug]  라고 입력했습니다.

4. 관련 모듈 설치.

현재의 상태는 프로젝트 폴더속에 package.json 에 사용할 모듈 목록만 나열되어 있는 상태 입니다. npm i 명령을 주면, packag.json에 설정된 모듈을 모두 최신으로 업데이트를 자동으로 하게됩니다. 이 기능을 통해 필요한 모듈을 설치합니다.

일단 프로젝트 폴더로 이동합니다.

$ cd ndejs_express_generator

이 후 관련 모듈을 설치하기 위해 다음 명령을 입력해 줍니다.

$ npm i

설치된 모습은 아래와 같습니다.

5. 실행.

실행 방법은 아래와 같으며, package.json에 설정된 파일을 실행하게 되어 있으며 설정을 보면, /bin/www 파일을 실행하도록 되어 있습니다.

$ npm start

소스를 보면 시작 포트는 3000 번으로 되어 있습니다. 웹브라우저를 통해 http://localhost:3000 에 접속해 다음과 같은 화면을 볼 수 있다면 성공 입니다.