[TIL] 내일배움캠프 1.12

📌 WebSocket vs Socket.io 2탄

Websocket, Socket.io 강의를 듣고 개인과제를 해보면서 느낀 차이점을 적어보려 한다.

---

1. 이벤트 전달 방법의 차이

WebSocket은 단순하게 데이터를 보내고 받고의 기능이 있다.

그래서 어떤 이벤트가 발생했을 때, 어떤 처리를 할지를 판단하기 위해 이벤트를 구분할 수 있는 데이터를 같이 보내주는게 좋다.

• client

	function create() {
    	...
        const obj = { 
          	"type" : "create", 
          	"params" : { 
            	"code": code
          	},
        };
      	socket.send(JSON.stringify(obj));
    }

• server

	ws.on('message', function message(data) {
    	const obj = JSON.parse(data);
      	
      	switch (obj.type) {
          case "create": 
            ...
            break;
        }
    });

위의 예시코드처럼 이벤트명을 가진 변수(type) 를 같이 정의해서 보내주고, 서버에서 이벤트 명을 구분하여 동작하는 방식이 필요하다.

Socket.io 에서는 해당 이벤트를 개발자가 임의로 설정 할 수 있는 것이 장점이다.

socket.on('받을 이벤트 명', (message) => {
})

socket.emit('전송할 이벤트 명', message)

---

2. room 기능 구현의 차이

WebSocket을 이용한 room기능 구현은 어떤 room에 어떤 사용자가 접속했는 지를 저장할 객체 배열이 필요하다.

let rooms = {};

그리고 특정 사용자가 특정 room에 join을 했을 때, 객체 배열에 room id를 Key로 가지고 접속한 사용자의 id를 배열에 담아 Value로 가진다.

/*
	다음과 같은 형태로 구성된다.  
    key : Value,
    roomId : ['사용자ID', '사용자ID']
    
	rooms = {
    	"ABCDEF" : ["사용자1", "사용자2"]
    }
*/
rooms[roomId].push(ws)

그리고 특정 사용자의 정보에 어느방에 접속해있는지를 가지고 있게 하기 위해 room 이라는 Key에 room id를 Value로 저장한다.

ws['room'] = roomId;

반면, Socket.io 에서는 특정 room을 접속하고 싶을 때 join Method를 사용하면 알아서 객체에 넣어 관리해준다.

 socket.join(roomId);

아래는 io.sockets.adapter.rooms 라는 내장 기능을 출력한 결과이다.

---

확실히 편의성 측면에서 Socket.io가 많이 좋았던 것 같다.