WebSocket

프로그램 간의 메시지를 교환하기 위한 TCP 프로토콜 기반의 양방향 통신 방법. 서버와 클라이언트 간의 지속적인 연결을 제공하여 양방향 데이터 전송을 가능하게 한다. 일반적으로 HTTP 프로토콜은 클라이언트가 서버에 요청을 보내고 서버가 응답하는 단방향 통신 방식을 사용한다. 이와 달리 WebSocket은 서버와 클라이언트 간의 연결을 유지하면서 양방향으로 데이터를 전송할 수 있다.

특징

양방향 통신
데이터 송수신을 동시에 처리할 수 있다.
클라이언트와 서버가 서로가 원할 때 데이터를 주고 받을 수 있다.
실시간 네트워킹
웹 환경에서 채팅이나 주식 같은 연속된 데이터를 빠르게 노출할 수 있다.
여러 단말기에 빠르게 데이터를 교환할 수 있다.

동작 방법

Handshake: 클라이언트는 HTTP 요청을 사용하여 서버에 웹소켓 연결을 요청한다. 이 요청은 일반적으로 HTTP 업그레이드 헤더(Upgrade: websocket)와 연결 유지 헤더(Connection: Upgrade)가 포함된 특별한 형태의 요청이다.
서버 응답: 서버는 클라이언트의 요청을 받으면 HTTP 101 Switching Protocols 응답을 반환하여 웹소켓 프로토콜로의 전환을 승인한다. 이 응답은 업그레이드 헤더와 연결 유지 헤더가 포함된다.
연결 설정: 클라이언트와 서버는 이제 웹소켓 프로토콜을 사용하여 양방향 통신을 위한 연결을 설정한다. 이 연결은 TCP 기반으로 이루어지며, 일반적으로 HTTP와는 다른 포트(일반적으로 80 또는 443)를 사용한다.
데이터 교환: 연결이 설정되면 클라이언트와 서버는 양방향으로 데이터를 전송할 수 있다. 양측은 데이터를 전송할 때마다 웹소켓 프레임 형식을 사용하여 데이터를 패킷화하고 해석한다. 이를 통해 메시지 경계를 식별하고, 압축 및 암호화 등의 추가 기능을 지원할 수 있다.
연결 종료: 클라이언트 또는 서버가 연결을 종료하려면, 웹소켓 프로토콜은 CLOSE 프레임을 전송하여 종료를 요청한다. 상대방은 CLOSE 프레임을 받은 후에 연결을 종료하고, 이에 대한 응답을 보낼 수 있다.

웹 소켓 프로토콜 특징

최초 접속시에만 HTTP 프로토콜 위에서 핸드 쉐이킹을 하기 때문에 HTTP Header를 사용한다.
웹소켓을 위한 별도의 포트가 아닌 기존 포트인 http(80) / https(443)를 사용한다.
프레임으로 구성된 메시지라는 논리적 단위로 송수신한다.
메시지에 포함될 수 있는 교환 가능한 메시지는 텍스트와 바이너리뿐이다.

WebSocket vs Socket IO

Socket IO

실시간 양방향 통신을 가능하게 하는 라이브러리. 주로 웹소켓을 이용한 소켓 통신을 하지만 웹브라우저 지원이 되지 않거나 다양한 네트워크 문제가 존재하는 경우 폴링 방식으로 통신한다.

Namespace - 클라이언트와 서버 간의 별도의 통신 채널. 단일 서버에서 여러 Namespace를 작성할 수 있으며 클라이언트는 특정 Namespace에 연결하여 해당 Namespace의 다른 클라이언트에게만 이벤트를 수신/방출할 수 있다.

Room - 함께 결합된 Socket 그룹. 여러 룸에 합류하거나 떠날 수 있다. 룸은 연결된 모든 클라이언트에게 방출하는 대신 특정 그룹에 메시지를 보내는 데 유용하다.

이벤트 송/수신

emit - 클라이언트에서 서버로 또는 서버에서 클라이언트로 이벤트를 보내는 데 사용한다. 이벤트 이름과 보낼 데이터라는 두 가지 이상의 인수가 필요하다.

ws.socket.emit('clientMsg', { message })

to - 특정 소켓이나 방에 이벤트를 방출하는 데 사용한다. 이벤트가 전송 될 소켓 ID 또는 방 이름이라는 하나의 인수가 필요하다.

// 나를 포함한 모두에게 송출
io.to("some room").emit("some event");


// 나를 제외한 모두에게 송출
socket.broadcast.to(roomNum).emit('serverChairId', chairId)


// 여러 방에 송출
io.to("room1").to("room2").to("room3").emit("some event");

on - 클라이언트 또는 서버에서 이벤트에 대한 리스너를 등록하는 데 사용한다. 이벤트 이름과 이벤트를 처리하기 위한 콜백 함수라는 두 가지 이상의 인수가 필요하다.

ws.socket.on('clientMsg', () => { // 콜백함수 })

of - 자체 소켓 및 이벤트 세트로 새 네임 스페이스를 만드는 데 사용한다. 네임 스페이스의 이름이라는 하나의 인수가 필요하다.

const namespace = io.of('/newNamespace');

WebSocket / Socket IO