[네트워크] 웹소켓(WebSocket)

웹소켓이란

• WebSocket
• 웹 애플리케이션과 서버 간의 양방향 통신을 가능하게 해주는 통신 프로토콜
• 서버와 서버 간의 양방향 통신도 가능
• TCP 기반

기존의 HTTP 프로토콜은 클라이언트가 서버에 요청을 보내고, 서버는 요청에 대한 응답을 보내는 단방향 통신 방식이다. 그러나 웹소켓은 클라이언트와 서버 간에 지속적으로 연결된 세션을 유지하며, 양방향으로 데이터를 전송할 수 있다.

 

동작 방식

클라이언트와 서버 간의 연결을 설정하고 유지하기 위해 Handshake 과정을 거친다. Handshake 과정이 완료되면 클라이언트와 서버는 양방향 데이터를 주고 받을 수 있게 된다. 또한 웹소켓은 일반 텍스트뿐만 아니라 이진 데이터도 전송할 수 있다. 웹소켓은 HTML5부터 표준으로 채택되었으며, 현재 대부분의 모던 웹 브라우저에서 웹소켓을 지원하고 있다. 또한, 다양한 프로그래밍 언어와 프레임워크에서도 웹소켓을 사용할 수 있다.

 

용도

• 실시간 통신이 필요한 웹 애플리케이션(채팅, 게임 등)

 

장점

클라이언트와 서버 간에 데이터를 주고 받을 수 있는데 이 속도가 매우 빠르다. HTTP REST 메소드인 POST보다 빠르다고 한다. 이런 장점 때문에 여러 게임 멀티플레이에도 사용된다.

 

단점

cURL, 일부 웹 브라우저에서는 지원되지 않는다.

 

대표적인 프레임워크 또는 라이브러리

• Python - websockets
• JS - 자체 API 또는 ws, websocket, socket.io
• Swift - Starscream
• Go - gorilla/websocket

 

JS 웹소켓 예제코드

// 웹소켓 연결
const socket = new WebSocket('ws://localhost:8080');

// 연결이 열리면 실행되는 이벤트 핸들러
socket.onopen = function() {
  console.log('웹소켓 연결이 열렸습니다.');

  // 서버로 메시지 보내기
  socket.send('안녕하세요, 서버!');
};

// 메시지 수신 이벤트 핸들러
socket.onmessage = function(event) {
  const message = event.data;
  console.log('서버로부터 메시지 수신:', message);
};

// 에러 발생 이벤트 핸들러
socket.onerror = function(error) {
  console.error('웹소켓 오류:', error);
};

// 연결이 닫힐 때 실행되는 이벤트 핸들러
socket.onclose = function() {
  console.log('웹소켓 연결이 닫혔습니다.');
};

// 서버로부터 메시지를 수신하고 응답하기 위한 함수
function sendMessageToServer(message) {
  socket.send(message);
}

// 예시로 메시지 보내기
sendMessageToServer('안녕하세요, 서버에게 메시지를 보냅니다.');

• localhost:8080 을 통해 로컬 서버에 연결하는 예제이다.
• new WebSocket()을 사용하여 웹소켓 연결을 생성한다.
• 이벤트 핸들러를 정의하여 연결 상태, 메시지 수신, 오류, 연결 종료 등의 상황을 처리한다.
• socket.send()를 사용하여 서버로 메시지를 보낸다.
• 서버로부터 메시지를 수신할 경우 socket.onmessage 이벤트 핸들러가 호출된다.

 

출처

• 나무위키 - 웹소켓