Socket.io - 실시간 데이터 주고 받기(2)

저번 글에서는 유저가 서버에게 데이터를 보냈다.

이번에는 서버가 유저에게 데이터를 보내는 방법을 알아보자.

 

[sever.js]

io.on('connection', function(socket){ //누군가 웹 소켓에 접속하면 실행
    console.log('connect in WebSocket...');

    io.emit('데이터명', '데이터');// 서버에서 유저에게 데이터 보내기
})

 

 

[socket.ejs]

<script>
    socket.on('데이터 명', function (data) { //서버에서 전달 받은 데이터 출력
        console.log(data);

    })
</script>

 

 

io.emit()은 한 유저에게만 데이터를 전달하는게 아니라 해당 사이트에 접속한 모든 유저에게 메시지를 보낸다.

 

 

만약 서버 - 특정 유저 단독으로 소통하고 싶다면?

 

// 해당 소켓 id를 가진 유저에게만 전송한다.
io.to(socket.id).emit('데이터 명', '데이터')

 

그렇다면 socket.id는 어떻게 가져오나? 

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

})

 

소켓을 연결했을 때 작동하는 함수 인자를 보면 socket이 있다. 해당 인자에는 socket 접속 유저의 정보가 들어있다. 

(궁금하면 직접 출력해보기)

 

 

따라서 특정 유저에게만 데이터를 전달하고 싶다면 아래와 같이 코드를 작성하면 된다.

io.on('connection', function(socket){ //누군가 웹 소켓에 접속하면 실행
    console.log('connect in WebSocket...');

    io.to(socket.id).emit('데이터 명', '데이터');
});

 

 

---

 

채팅방 여러개 만들기( 서버에서 채팅방 만들기)

 

현재는 채팅방이 한개 뿐이다. 따라서 방을 여러개 만들어 유저가 방을 선택해서 채팅을 할 수 있도록해보자.

 

[채팅방 생성 + 진입]

 

1. 채팅방 생성 + 입장시키기

io.on('connection', function(socket){ //누군가 웹 소켓에 접속하면 실행
    console.log('connect in WebSocket...');
	socket.join('room1')
})

 

2. 유저단에서 서버 진입 버튼과 진입 요청 js 작성하기

// body 내부
<button id="enter-room1">채팅방 1 입장</button>

// script 내부
<script>

$('#enter-room1').click(function(){
    socket.emit('joinroom','채팅방 진입')
})

</script>

 

 

3. 서버단에서 진입 요청 처리하기

io.on('connection', function(socket){ //누군가 웹 소켓에 접속하면 실행
    console.log('connect in WebSocket...');

    socket.on('joinroom', function(data){
        socket.join('room1')
    })
})

 

---

[해당 채팅방에서 메시지]

 

1. 유저단에서 버튼 만들고 js 작성하기

// body 내부
<button id="room1-send">채팅방 1에서 메세지 보내기</button>

// script 내부
<script>

 $('#room1-send').click(function(){
    socket.emit('room1-send','1번 채팅방에 메시지 전송하기')
})

</script>

 

 

2. 서버단에서 room1에 접속된 유저에게 데이터 전달하기 

 socket.on('room1-send', function(data){ 
    io.to('room1').emit('데이터 명', '데이터') //room1에 접속한 유저에게만 데이터 전송
 })