블로그 이미지
평범하게 살고 싶은 월급쟁이 기술적인 토론 환영합니다.같이 이야기 하고 싶으시면 부담 말고 연락주세요:이메일-bwcho75골뱅이지메일 닷컴. 조대협


Archive»


 
 

빠르게 훝어보는 node.js

#12 - Socket.IO (4/4)

조대협 (http://bcho.tistory.com)


채팅 프로그램에 (room/그룹) 기능을 추가하기

다음은 앞에서 만든 1:1 귓속말이 가능한 채팅에 채팅방기능을 추가한 버전이다.

var express = require('express');

var routes = require('./routes');

var http = require('http');

var path = require('path');

 

var app = express();

app.use(express.bodyParser());

app.use(express.cookieParser('your secret here'));

app.use(express.session());

app.use(express.static(path.join(__dirname, 'public')));

app.set('views', path.join(__dirname, 'views'));

app.set('view engine', 'ejs');

app.use(express.favicon());

app.use(express.logger('dev'));

app.use(express.json());

app.use(express.urlencoded());

app.use(express.methodOverride());

app.use(app.router);

 

var httpServer =http.createServer(app).listen(3000, function(req,res){

    console.log('Socket IO server has been started');

});

// upgrade http server to socket.io server

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

 

var count = 0;

var rooms = [];

 

app.get('/:room',function(req,res){

    console.log('room name is :'+req.params.room);

    res.render('index',{room:req.params.room});

});

 

 

 

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

 

    socket.on('joinroom',function(data){

        socket.join(data.room);

 

        socket.set('room', data.room,function() {

            var room = data.room;

            var nickname = '손님-'+count;

            socket.set('nickname',nickname,function(){

                socket.emit('changename', {nickname: nickname});

 

                // Create Room

                if (rooms[room] == undefined) {

                    console.log('room create :' + room);

                    rooms[room] = new Object();

                    rooms[room].socket_ids = new Object();

                }

                // Store current user's nickname and socket.id to MAP

                rooms[room].socket_ids[nickname] = socket.id

 

                // broad cast join message

                data = {msg: nickname + ' 님이 입장하셨습니다.'};

                io.sockets.in(room).emit('broadcast_msg', data);

 

                // broadcast changed user list in the room

                io.sockets.in(room).emit('userlist', {users: Object.keys(rooms[room].socket_ids)});

                count++;

            });

        });

 

    });

 

    socket.on('changename',function(data){

        socket.get('room',function(err,room){

            socket.get('nickname',function(err,pre_nick) {

                var nickname = data.nickname;

                // if user changes name get previous nickname from nicknames MAP

                if (pre_nick != undefined) {

                    delete rooms[room].socket_ids[pre_nick];

                }

                rooms[room].socket_ids[nickname] = socket.id

                socket.set('nickname',nickname,function() {

                    data = {msg: pre_nick + ' 님이 ' + nickname + '으로 대화명을 변경하셨습니다.'};

                    io.sockets.in(room).emit('broadcast_msg', data);

 

                    // send changed user nickname lists to clients

                    io.sockets.in(room).emit('userlist', {users: Object.keys(rooms[room].socket_ids)});

                });

            });

 

        });

    });

 

 

    socket.on('disconnect',function(data){

        socket.get('room',function(err,room) {

            if(err) throw err;

            if(room != undefined

                && rooms[room] != undefined){

 

                socket.get('nickname',function(err,nickname) {

                    console.log('nickname ' + nickname + ' has been disconnected');

                    // 여기에 방을 나갔다는 메세지를 broad cast 하기

                    if (nickname != undefined) {

                        if (rooms[room].socket_ids != undefined

                            && rooms[room].socket_ids[nickname] != undefined)

                            delete rooms[room].socket_ids[nickname];

                    }// if

                    data = {msg: nickname + ' 님이 나가셨습니다.'};

 

                    io.sockets.in(room).emit('broadcast_msg', data);

                    io.sockets.in(room).emit('userlist', {users: Object.keys(rooms[room].socket_ids)});

                });

            }

        }); //get

    });

 

    socket.on('send_msg',function(data){

        socket.get('room',function(err,room) {

            socket.get('nickname',function(err,nickname) {

                console.log('in send msg room is ' + room);

                data.msg = nickname + ' : ' + data.msg;

                if (data.to == 'ALL') socket.broadcast.to(room).emit('broadcast_msg', data); // 자신을 제외하고 다른 클라이언트에게 보냄

                else {

                    // 귓속말

                    socket_id = rooms[room].socket_ids[data.to];

                    if (socket_id != undefined) {

 

                        data.msg = '귓속말 :' + data.msg;

                        io.sockets.socket(socket_id).emit('broadcast_msg', data);

                    }// if

                }

                socket.emit('broadcast_msg', data);

            });

        });

    })

});

코드를 살펴보자

처음에 입장은 http://localhos:3000/{방이름} 으로 하게 된다.

app.get('/:room',function(req,res){

    console.log('room name is :'+req.params.room);

    res.render('index',{room:req.params.room});

});

그러면 URL에 있는 방이름을 받아서, index.ejs에 있는 UI로 채팅창을 띄워주고 방이름을 parameterindex.ejs에 넘겨준다.

 

    socket.on('joinroom',function(data){

        socket.join(data.room);

클라이언트가 서버에 접속되면 먼저 클라이언트가 join 이벤트를 보내는데, join 이벤트를 받으면, 이때 같이 room 이름으로 현재 소켓을 room 이름의 room join한다.

        socket.set('room', data.room,function() {

다음으로, 해당 소켓이 어느 룸에 있는지 set 명령을 이용하여 socket 저장해놓는다.

            var room = data.room;

            var nickname = '손님-'+count;

            socket.set('nickname',nickname,function(){

                socket.emit('changename', {nickname: nickname});

 

                // Create Room

                if (rooms[room] == undefined) {

                    console.log('room create :' + room);

                    rooms[room] = new Object();

                    rooms[room].socket_ids = new Object();

                }

윗부분이 room 데이터 객체를 생성하는 것인데, 앞의 예제와는 달리, 현재 연결된 클라이언트의 socket.id 이제는 room 단위로 관리를 해야 한다. 그래서 rooms라는 객체를 이용하여, 해당 room 대해서 rooms.room이라는 객체로 만들고, 그리고, room 현재 연결된 클라이언트 socket.id 저장하는 socket_ids 객체를 생성한다.

                // Store current user's nickname and socket.id to MAP

                rooms[room].socket_ids[nickname] = socket.id

 

그리고 나서, socket_ids 귓속말 채팅방 예제와 같이 nickname to socket.id 대한 맵핑 정보를 저장한다.

                // broad cast join message

                data = {msg: nickname + ' 님이 입장하셨습니다.'};

                io.sockets.in(room).emit('broadcast_msg', data);

// broadcast changed user list in the room

                io.sockets.in(room).emit('userlist', {users:

Object.keys(rooms[room].socket_ids)});

                count++;

            });

그리고 위와 같이 현재 room 들어 있는 클라이언트들에게만 , 새로운 사용자가 입장했음을 알리고, 사용자 리스트를 업데이트하는 이벤트를 보낸다.

disconnect 대한 부분도 크게 달라진 것이 없다. Socket_ids 객체가 rooms 아래로 들어갔고, 메시지를 보낼때, 귓속말 채팅방 예제가 io.sockets.emit 대신에, room 범위를 지정하는 in() 메서드를 써서 io.sockets.in(room).emit 같이 보내게 된다.

Sendmsg 이벤트 부분도, broadcast하는 부분에서 to를 이용하여 다음과 같이socket.broadcast.to(room).emit 특정 room에 있는 클라이언트에게만 메시지를 보내는 것으로만 변경되었다

아래는 클라이언트쪽의 코드이다. 앞의 예제에서 나온 귓속말이 가능한 대화방과 코드가 거의 동일하다.

<script type="text/javascript">

        var socket = io.connect('http://localhost');

        socket.emit('joinroom',{room:'<%=room%>'});

처음에 접속하였을 때, 서버 코드에서 방이름을 URL로부터 읽어서, 그 방이름으로 join 하는 이벤트를 보낸다.

/vies/index.ejs

<html>

<head>

 

    <title></title>

    <script src="/socket.io/socket.io.js"></script>

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

 

</head>

<body>

 

<b>Welcome ROOM : <%= room%></b><p>

    Name <input type="text" id="nickname" /> <input type="button" id="changename" value="Change name"/><br>

    To

    <select id="to">

        <option value="ALL">ALL</option>

    </select>

    Message  <input type="text" id="msgbox"/>

    <br>

    <span id="msgs"></span>

 

    <script type="text/javascript">

        var socket = io.connect('http://localhost');

        socket.emit('joinroom',{room:'<%=room%>'});

 

        $('#changename').click(function(){

            socket.emit('changename',{nickname:$('#nickname').val()});

        });

        $("#msgbox").keyup(function(event) {

            if (event.which == 13) {

                socket.emit('send_msg',{to:$('#to').val(),msg:$('#msgbox').val()});

                $('#msgbox').val('');

            }

        });

        socket.on('new',function(data){

            console.log(data.nickname);

            $('#nickname').val(data.nickname);

        });

 

        // 새로운 사용자가 들어오거나, 사용자가 이름을 바꿨을때 "To" 리스트를 변경함

        socket.on('userlist',function(data){

            var users = data.users;

            console.log(users);

            console.log(data.users.length);

            $('#to').empty().append('<option value="ALL">ALL</option>');

            for(var i=0;i<data.users.length;i++){

                $('#to').append('<option value="'+users[i]+'">'+users[i]+"</option>");

            }

        });

 

        socket.on('broadcast_msg',function(data){

            console.log(data.msg);

            $('#msgs').append(data.msg+'<BR>');

        });

    </script>

</body>

</html>

 

다음은 실제 실행 화면이다.



본인은 구글 클라우드의 직원이며, 이 블로그에 있는 모든 글은 회사와 관계 없는 개인의 의견임을 알립니다.

댓글을 달아 주세요

  1. 플라시보 2015.10.17 18:26  댓글주소  수정/삭제  댓글쓰기

    관리자의 승인을 기다리고 있는 댓글입니다

  2. 날나리 2016.12.27 16:52  댓글주소  수정/삭제  댓글쓰기

    채팅자료 보던중 제일 잘 된 것 같아요. 앞으로도 많이 부탁드립니다. socket.set, get 이젠 안먹던데요.

  3. 공부중 2017.10.12 17:51  댓글주소  수정/삭제  댓글쓰기

    set, get이 안먹습니다. 어떻게 해야할까요..

  4. 한련화 2019.05.15 12:20  댓글주소  수정/삭제  댓글쓰기

    위의 샘플 예제를 실행시켜도 안되는데 어떻게 해야 실행이 되나요????
    app.js 내에는 index.html을 호출하는 곳이 없는데???? 어떻게 index.html이 실행이 되는지요??
    아시는 분 설명좀 부탁드립니다. ㅠㅠ

빠르게 훝어보는 node.js

#10 - Socket.IO (2/4)

조대협 (http://bcho.tistory.com)


Socket.IO APIs

Socket.IO 이밖에도 다양한 이벤트를 전달할 있는 API 제공하는데, 이에 대해서 살펴보자.

여기서 사용하는 socket이라는 객체는

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

의해서 callback function 의해서 전달된 인자임을 미리 명시해둔다.


1. 이벤트 보내기 받기

먼저 소켓으로 또는부터 이벤트를 보내고 받는 방법부터 알아보자.앞에 예제에서도 봤지만 가장 간단한 방법은

Ÿ  * 이벤트 보내기 socket.emit('이벤트명',{메세지});

현재 연결되어 있는 클라이언트 소켓에 “이벤트명”으로 “{메시지}” 데이터로 이벤트를 보낸다.

Ÿ  *  이벤트 받기 socket.on('이벤트명',function(data){ });

현재 연결되어 있는 클라이언트 소켓으로부터 들어오는 이벤트명이벤트에 대해서 두번째 인자로 정의된 callback function 의해서 이벤트에 대한 처리를 한다. 이때 이벤트 메시지는 callback function 인자인 “data” 통해서 전달된다.

하나의 클라이언트가 아니라 다수의 다른 클라이언트나 또는 다른 클라이언트에 이벤트를 어떻게 보내는지 알아보자

Ÿ  * 나를 제외한 다른 클라이언트들에게 이벤트 보내기 socket.broadcast.emit('이벤트명',{메세지});

socket 대해서 broadcast 하면, 나를 제외한 다른 소켓 클라이언트들에게 이벤트를 보낼 있다.

Ÿ 나를 포함한 모든 클라이언트들에게 이벤트 보내기io.sockets.emit('이벤트명',function(data){ });

개별 클라이언트 소켓을 대표하는 객체가 socket이라면, 전체 연결된 socket들을 대표하는 객체는io.sockets이다. 여기서는 io.sockets.emit 사용했는데, 이는 전체 연결된 클라이언트 소켓에 대해서 이벤트를 보내도록 것이다.

소켓이 아닌 다른 특정 소켓에게 이벤트를 보내는 방법이 있는데,

Ÿ  * io.sockets(socket_id).emit('이벤트명',function(data){ });

사용하면 된다. 이때 socket_id socket.id 값으로 클라이언트 소켓은 id라는 property 가지고 있고, 이는 소켓을 구별해주는 식별자가 된다. 그나중에 예제에서 설명하겠지만, 채팅 귓속말과 같이 특정 소켓으로 메시지를 보내려면, 메시지를 전달하는 대상이 되는 소켓의 id값을 알아서 위의 io.socket(socket_id) 이벤트를 전달해야 한다.


2.  소켓에 데이터 바인딩

소켓에는 소켓에 연관된 데이터를 set 메서드를 이용해서 binding하고, get 이용해서 binding 데이터를 꺼낼 있다.

Ÿ   * socket.set(‘key’, ‘value’,function() {});

Ÿ   socket.get(‘key’, function(err,value) {});

Ÿ   socket.del(‘key’, function(err,value) {});

값으 저장할때는 set을 이용하여 socket key값을 키로 사용하여 value라는 데이터를 저장한다. 값을 읽어올 때는 get을 이용하여 socket에 저장된 key이름으로 저장된 값을 value를 통해서 리턴한다.그리고 해당값을 삭제하고자 할때는 del을 이용하여 socket key이름으로 저장된 값을 삭제한다.

socket도 객체이기 때문에 Object property를 사용해도 되는데, 예를 들어 socket.key = value 왜 굳이 set/get을 사용할까? socket.ioset/get 내부 구현을 뜯어보면 실제로는 Object property를 사용한다. socket.iostore Redis로 지정하게 되면, set/get은 값을 내부 Object property에 저장하지 않고, Redis에 저장하게 되서, 이 값들은 클러스터 노드 (다른 노드간)에서도 접근이 가능해진다.

3.  Room 처리 (그룹)

socket.io 소켓들을 그룹핑하는 채널과 같은 개념인 ‘room’이라는 개념을 지원한다. 채팅 프로그램의 대화방과 같은 개념이다. Room 사용하게 되면 broadcast 하더라도 같은 room안에 있는 클라이언트에게만 이벤트가 전송된다.

Ÿ   socket.join(‘roon name’)

Ÿ   socket.leave(‘roon name’)

소켓을 특정 room binding하는 방법은 join 이용하면 해당 소켓은 room binding 되고, leave 하면 room에서부터 나오게 된다.

특정 room 있는 socket에게 이벤트를 보내는 것은 앞에 설명한 똑같이 socket.emit 사용하면 되는데, broadcast 하거나 room안에 있는 전체 클라이언트 소켓에게 이벤트를 보낼때는 아래와 같이 room 명시해주면 된다

Ÿ   io.sockets.in(‘roon name’).emit(‘event’,message)

‘room name’ room안에 있는 모든 클라이언트들에게 이벤트 보내기

Ÿ   socket.broadcast.to(‘roon name’).emit(‘event’,message)

 ‘room name’ room 안에 있는 나를 제외한 다른 클라이언트들에게 이벤트 보내기

또한 현재 생성되어 있는 room 대한 정보를 읽어오는 방법이 몇가지가 있는데,

Ÿ  io.sockets.manager.rooms

현재 생성되어 있는 모든 room 목록을 리턴한다.

Ÿ  io.sockets.clients(‘roon name’)

 ‘room name’ room 안에 있는 모든 클라이언트 소켓 목록을 리턴한다.

몇가지 주요 메서드들을 성명하였지만, 여기서 설명한 것은 일부에 불과하다. 상세한 내용들은 아래 내용을 참고하기 바란다.

상세한 Configuration 처리 https://github.com/LearnBoost/Socket.IO/wiki/Configuring-Socket.IO

이벤트 종류(disconnect ) https://github.com/LearnBoost/socket.io/wiki/Exposed-events

자아 그러면 소개된 메서드들을 가지고, 앞에서 만든 채팅 프로그램의 기능을 더해보도록 하자

본인은 구글 클라우드의 직원이며, 이 블로그에 있는 모든 글은 회사와 관계 없는 개인의 의견임을 알립니다.

댓글을 달아 주세요

  1. shin 2014.04.28 01:09  댓글주소  수정/삭제  댓글쓰기

    좋은 강좌 정말 감사합니다.

    많이 배워 사회에 도움이 되는 일에 쓰겠습니다.

  2. 김성윤 2014.11.18 14:25  댓글주소  수정/삭제  댓글쓰기

    많은 도움이 되었습니다! 감사합니다~참고로 1.0 이후로 io.sockets.manager.rooms -> io.sockets.adapter.rooms 이렇게 바뀌었습니당~

    • 최영진 2016.01.04 21:57  댓글주소  수정/삭제

      내가 찾고 있는 내용이었네요 혹시 set get은 무슨함수로 대체됬는지 아시나요?? 대체 api 보는곳이 있다면 neoniki7@naver.com으로 가능하시다면 부탁좀 드리고 싶습니다~

  3. jinyoung 2015.07.09 22:42  댓글주소  수정/삭제  댓글쓰기

    진심으로 감사드립니다!

  4. ga 2017.02.14 22:37  댓글주소  수정/삭제  댓글쓰기

    socket.io 정보가 인터넷에서 너무 없어서 힘들었는데 ㅜㅜ
    이렇게 완벽한 글이 있네요 감사합니다~

  5. 자바몬 2017.08.21 10:40  댓글주소  수정/삭제  댓글쓰기

    감사합니다~ 소켓 아이오에 대해서 좀더 알게 되었습니다~

  6. ㅁㄴㅇ 2019.01.21 11:10  댓글주소  수정/삭제  댓글쓰기

    글 잘봤습니다. 다만 2019-01-21 현재 socket.set 과 socket.get API는 deprecated 됬다네요

  7. 송창훈 2019.03.29 12:54  댓글주소  수정/삭제  댓글쓰기

    항상 도움 많이 받고 있습니다. 필요한 내용을 검색할때 마다 이 블로그가 많이 나오고 좋은내용이 많았던 것 같네요 감사드립니다.