[Node.js] 실시간 멀티 채팅 만들기 3탄 (브로드캐스팅)

[Node.js] 실시간 멀티 채팅 만들기 1탄

[Node.js] 실시간 멀티 채팅 만들기 2탄

 

 

대망의 3탄 서버에 사용자가 보낸 문자열을 받았으니 이제 뿌려주기만 하면 된다💪

socket.io에서는 연결된 모든 소캣에 이벤트를 발생시키도록 하는 해당 함수를 사용할 것이다.

함수명도 외우기 쉽다. ( emit : 방출하다 )

io.emit('some event', { someProperty: 'some value', otherProperty: 'other value' }); 

 

해당 이벤트를 메세지 받고 발생 해주어야 하니 2편에서 등록했던 chat message 이벤트 발생시 메세지를

방출 하도록 해놨다.

socket.on('chat message', function(msg){
    console.log('message: ' + msg);

    // 브로드 캐스팅
    io.emit('chat message', msg);
  });

서버에서 브로드 캐스팅을 했으니 사용자 화면에서 방출한 메세지를 보여주는 작업을 해보겠다.

<script>
    $(function () {
        var socket = io();

        $('form').submit(function(e){
        e.preventDefault(); // prevents page reloading ( 페이지 새로고침 막기 )
        socket.emit('chat message', $('#m').val()); // "chat message"라는 이벤트 생성
        $('#m').val(''); // 보낸 메세지 초기화
        return false;
    });

    socket.on('chat message', function(msg){
        var tag = "<li>" + msg + "</li>";
        $('#messages').append(tag);
    });
});
</script>

서버랑 문법이 똑같다. 너무 쉬워서 이상하다....

chat message 이벤트가 들어왔을 때 메세지를 화면에 보여준다.

---

여기까지 socket.io에서 설명해주고 있는 코드들이며 추가적으로 보충되어지면 좋을 기능들을 적어놨다.

• 누군가 연결하거나 연결을 끊을 때 연결된 사용자에게 메시지를 브로드 캐스트
• 닉네임 지원
• 자신에게 보낸 동일한 메시지를 사용자에게 보내지 마십시오. 대신 Enter 키를 누르면 바로 메시지를 추가하십시오.
• “{user} is typing”기능을 추가하십시오.
• 누가 온라인인지 보여줍니다

4편으론 위의 기능을 다 구현해서 코드정리를 해놔야겠다 :)