TIL 240620 - socket.io 적용 (2) namespace / room

1. Namespace

전체에게 메시지를 보내는 것은 '/' 네임스페이스로 보내는 것과 같다. 이 경우 모든 이벤트가 모든 사람들에게 전송이 된다.

예를 든다면, 채팅방에 이미 들어와있는 사람들은 그채팅방의 새로운 메시지만 받을 뿐 아니라, 새 채팅방이 생성되거나 다른 채팅방에서 메시지가 오가는 것까지 받게 된다.

 

따라서, 네임스페이스를 분리하여 네임스페이스에 분리된 클라이언트끼리만 웹소켓 통신을 한다.

// Server-side
var order = io.of('/order');

order.on('connection', (socket) => {
  console.log('A user connected');

  socket.on('disconnect', () => {
    console.log('A user disconnected');
  });
});

server.listen(PORT, () => {
  console.log(PORT, '포트로 서버가 열렸어요!');
});

// Client-side
const socket = io('/order');

 

2. Room

클라이언트는 각 네임스페이스 내에서 또 임의의 채널을 지정할 수 있다.

그러니까, 이런느낌..

각 socket은 랜덤의 socket.id로 구별된다. socket.io는 각 socket을 socket.id를 room 식별자로 사용하여 자동으로 room을 생성하고 join 시킴.

 

전에 정리한 내용 중 특정 클라이언트에게만 메시지를 전송하는 ```io.to(id).emit``` 또한, 디폴트로 생성돼 자동 join된 개별 socket의 room에 소속된 유일한 클라이언트에게 메시지를 전송하는 것.

 

room에 join하기 위해서는 join 메소드 사용

const chat = io.of('/chat').on('connection', function(socket) {
  socket.on('chat message', function(data){
    console.log('message from client: ', data);

    var name = socket.name = data.name;
    var room = socket.room = data.room;

    // room에 join한다
    socket.join(room);
    // room에 join되어 있는 클라이언트에게 메시지를 전송한다
    chat.to(room).emit('chat message', data.msg);
  });
});

// 지정 namespace로 접속한다
var chat = io('http://localhost:3000/chat'),
  news = io('/news');

$("form").submit(function(e) {
e.preventDefault();

// 서버로 자신의 정보를 전송한다.
chat.emit("chat message", {
  name: $("#name").val(),
  room: $("#room").val(),
  msg: $("#msg").val()
});
});

// 서버로부터의 메시지가 수신되면
chat.on("chat message", function(data) {
$("#chat").append($('<li>').text(data));
});