Programming/node.js

socket.io로 채팅을 해볼까

gukbap 2015. 5. 13. 22:36
반응형

브라우저에 Input Box를 만들고 여기에 문자열을 입력하면 서버에 접속한 모든 브라우저에 메시지를 보내는 node.js 프로그램이다.




var io = require('socket.io').listen(server);

express로 생성한 server를 socket.io를 지원하는 서버로 업그레이드 시키는 구문이다.


io.sockets.on('connection', function(socket){

클라이언트가 socket.io 채널로 접속했을 때 이에 대한 callback 함수를 정의하기 시작한다. callback 함수에는 socket 객체를 매개변수로 넘겨준다.


socket.emit('toclient', {msg:'Welcome!!'});

연결한 클랑이언트 소켓의 emit 메서드를 이용해 이벤트를 전송한다. 'toclinet' 이벤트에 msg라는 key를 갖고 value는 'Welcome!!'이라는 값을 가지는 메시지를 전송했다.


socket.on('fromclient', function(data){
        socket.braodcast.emit('toclient', data);
        socket.emit('toclient', data);

브라우저의 채팅 창에서 글을 쓰고 엔터를 누르면 서버로 'fromclient'라는 이벤트를 보내도록 미리 html 파일을 작성해 놓는다. fromclient 이벤트를 받은 서버는 socket.on을 통해서 이를 받고 callback 함수를 실행한다. callback 함수에서 socket.broadcast.emit은 자신을 제외한 모든 클라이언트에게 이벤트를 보내는 메서드이고 socket.emit는 fromclient 이벤트를 보낸 클라이언트 자신에게 이벤트를 보내는 메서드이다.




채팅방이 구현된 html 파일은 다음과 같다.




$("#msgbox").keyup(function(event) {
            //press enter
            if (event.which == 13) {
                socket.emit('fromclient', {msg : $('#msgbox').val()});


msgbox에 글을 쓰고 엔터를 누르면 msgbox의 value를 읽어서 서버에 전송하고 fromclient라는 메시지를 발생시키는 구문이다.


socket.on('toclient', function(data){
            console.log(data.msg);
            $('#msgs').prepend(data.msg + '<BR>');

toclient라는 이벤트가 발생했을 때의 callback 함수를 정의하는 구문이다. data.msg(toclient 이벤트를 발생시킨 것으로부터 받은 data의 msg 값)를 prepend를 통해 msgs의 앞에서부터 채운다.

반응형

'Programming > node.js' 카테고리의 다른 글

Brackets  (0) 2015.05.15
ubuntu에서 node.js update  (0) 2015.05.14
socket.io를 써보자  (0) 2015.05.13
express 페이지 라우팅  (0) 2015.05.12
express  (0) 2015.05.12