WebSocket과 Socket.io 차이

HTTP
request를 보내면 server가 처리하고 response을 보낸다.
Stateless  
상태를 저장하지 못하기 때문에 '쿠키' 정보를 클라에서 보낸다.
실시간 X

 

WebSocket
브라우저가 연결을 보내면, 받든 거절하든 한다.
한번 연결된 이후에는 지속적인 연결
Stateful
양방향 통신, 실시간

브라우저마다 지원하는 WebSocket API가 존재한다.

HTTP와 WebSocket은 서로 다른 프로토콜이며 같은 포트로 접속할 수 있도록 구성할 수 있다.

 

Socket.io와 WebSocket의 차이는?
Socket.io는 웹소켓을 사용하여 구현되기도 하지만,

웹 소켓을 사용할 수 없는 경우에는 다른 기술을 이용한다. (HTTP long polling)

자동으로 재연결 시도

socket.io는 프론트와 백엔드간 실시간 통신을 돕는 프레임워크이며 WebSocket의 일부가 아니다.

자동으로 javascript object를 string으로 만들고 다시 json으로 만들어준다. 
클라에서 보내는 인자가 여러 개가 될 수 있다. (WebSocket은 불가)

클라에서 콜백을 등록할 수 있는데, 서버에서 특정 처리를 하고 해당 콜백을 실행 시킬 수 있다. (클라쪽 코드 실행)

 

예시)

클라에서 특정 처리를 하는 함수를 등록한다. 

function showRoom() {

  room.hidden = false;

  welcome.hidden = true;

  const h3 = room.querySelector("h3");

  h3.innerText = roomName;

}

socket.emit("enter_room", { payload: input.value }, showRoom);

 

서버는 받은 콜백을 호출한다. (클라측 코드 실행)

wsServer.on("connection", (socket) => {

  socket.on("enter_room", (roomName, done) => {

    socket.join(roomName);

    done();

  });

});

클라에서 콜백을 등록해서 사용하는 경우는 많이 봤는데(예: Dialog 버튼 처리) 서버쪽으로 넘기는 것은 꽤나 신기하다.

socket.io는 기본적으로 Room 개념을 지원해주고 있다. 
세션이 연결된 시점에는 자신의 id 이름의 room에 들어가 있다. 

 

socket.join을 통해 방에 입장할 수 있다. 

socket은 여러 방에 동시에 입장할 수 있다.

 

예시)

채팅 리스트가 있는데, 여러 채팅방에서 메시지를 보내면 알림이 와야 한다.
즉 UI상으로는 채팅방에 입장한 것은 아니지만, 실제로는 방에 들어가 있는 개념인 것이다.

채팅방 list 화면에 있더라도 메시지가 오면 상단으로 올려야하고, 최근 메시지도 바꿔야 하고
읽지 않은 메시지 수도 올려야 한다.

즉 내부적으로는 해당 방에 이미 입장해 있어서 메시지를 받는 것이다. 

채팅방은 여러 개를 같이 들어간다는 개념이 있는데, 게임은 그런 개념이 없는 듯.
(하나의 캐릭터가 여러 Zone을 동시에 돌아다닌다면 설계상 이상해보인다.)