웹 소켓 WebSocket

웹소켓은 실시간 통신 기술 중 하나이다.

 

소켓은 http(HyperText Transfer Protocol) 가 아닌 TCP(Transmission Control Protocol) 에서 동작한다

HTTP 와는 달리 Stateful(상태유지) 하다.

참고: Stateful과 Stateless의 차이

[WEB] 🌐 Stateful / Stateless 차이 💯 정리

양측에서 언제든지 원하는 데이터를 보낼 수 있는 구조이다(양방향 실시간 통신)

 

웹 소켓 커넥션 만들기

new WebSocket을 호출 하면 된다. ws라는 프로토콜을 사용

let socket = new WebSocket("ws://localhost");

ws 대신 wss 를 사용할 수 있는데 둘의 차이는 http와 https의 차이 정도이다

 

소켓 이벤트

• open - 커넥션이 이루어 졌을 때 이벤트 발생
• message - 데이터를 수신하였을 때 이벤트 발생
• error - 에러가 생겼을 때 이벤트 발생
• close - 커넥션이 종료되었을 때 발생

 

데이터 전송

socket.send(body)

send 를 호출할때 body에는 문자열이나 이진 데이터만 들어갈 수 있다.

 

커넥션 닫기

socket.close([code], [reason]);

code : 커넥션을 닫을 때 사용하는 특수코드

reason : 커넥션을 닫는 이유(사유)

참고 : 코드 목록

RFC 6455: The WebSocket Protocol

커넥션 상태를 알고 싶다면 socket.readyState 의 값을 확인하면 된다.

0 → 연결중

1 → 연결이 성립되고 통신중

2 → 커넥션 종료중

3 → 커넥션이 종료됨

---

Socket.io

특징 : 클라이언트에서 발생하는 이벤트는 개발자가 임의로 설정할 수 있다

이벤트는 문자열로 지정하며 직접 이벤트를 발생시킬 수 있다.

// 해당 이벤트를 받고 콜백함수를 실행
socket.on('받을 이벤트 명', (msg) => {
})
 
// 이벤트 명을 지정하고 메세지를 보낸다.
socket.emit('전송할 이벤트 명', msg)

송수신메소드

// 접속된 모든 클라이언트에게 메시지를 전송한다
io.emit('event_name', msg);
 
// 메시지를 전송한 클라이언트에게만 메시지를 전송한다
socket.emit('event_name', msg);
 
// 메시지를 전송한 클라이언트를 제외한 모든 클라이언트에게 메시지를 전송한다
socket.broadcast.emit('event_name', msg);
 
// 특정 클라이언트에게만 메시지를 전송한다
io.to(id).emit('event_name', data);