웹소켓과 타입스크립트 예제 코드

웹소켓(WebSocket)은 클라이언트와 서버간의 양방향 통신을 가능하게 하는 프로토콜입니다. 이전까지는 HTTP를 사용하여 클라이언트와 서버 간의 단방향 통신만 가능했지만, 웹소켓을 사용하면 클라이언트와 서버가 양방향으로 데이터를 주고받을 수 있습니다.

웹소켓은 HTTP와는 별도의 포트(기본값은 80)를 사용합니다. 클라이언트와 서버가 연결되면, 계속해서 연결을 유지하면서 데이터를 전송할 수 있습니다. 이를 통해, 실시간으로 데이터를 주고받아야 하는 채팅 애플리케이션, 게임, 주식 거래 등에 사용할 수 있습니다.

웹소켓은 HTML5에서 처음 등장했으며, 다음과 같은 특징을 가지고 있습니다.

1. 양방향 통신: 클라이언트와 서버가 양방향으로 데이터를 주고받을 수 있습니다.
2. 실시간 통신: 데이터가 실시간으로 전송되므로, 즉각적인 반응을 얻을 수 있습니다.
3. 작은 오버헤드: 웹소켓은 HTTP 프로토콜을 사용하기 때문에, 추가적인 연결 요청이나 해제 요청이 필요하지 않습니다.
4. 크로스 도메인 지원: 웹소켓은 CORS(Cross-Origin Resource Sharing)를 사용하여, 동일한 도메인이 아닌 다른 도메인에서도 사용이 가능합니다.

웹소켓은 일반적으로 JavaScript와 함께 사용됩니다. 대부분의 웹 브라우저에서는 이미 웹소켓을 지원하고 있으며, 서버 측에서는 Node.js, Java, Python 등 다양한 언어와 라이브러리를 사용하여 웹소켓 서버를 구현할 수 있습니다.

웹소켓을 사용하면, 더욱 효율적인 실시간 통신을 구현할 수 있습니다.

타입스크립트에서 웹소켓 구현방법

타입스크립트에서 웹소켓 통신 구현 예제는 다음과 같이 작성될 수 있습니다.

// WebSocket 서버 주소
const serverUrl = 'ws://localhost:3000';

// WebSocket 연결 생성
const socket = new WebSocket(serverUrl);

// WebSocket 연결이 열릴 때 실행되는 함수
socket.onopen = (event: Event) => {
  console.log('WebSocket 연결이 열렸습니다.');
};

// WebSocket 서버로부터 메시지를 수신할 때 실행되는 함수
socket.onmessage = (event: MessageEvent) => {
  const message = event.data;
  console.log('WebSocket 서버로부터 메시지를 수신했습니다:', message);
};

// WebSocket 연결이 닫힐 때 실행되는 함수
socket.onclose = (event: CloseEvent) => {
  console.log('WebSocket 연결이 닫혔습니다.');
};

// WebSocket 에러 발생 시 실행되는 함수
socket.onerror = (event: Event) => {
  console.error('WebSocket 에러가 발생했습니다:', event);
};

// WebSocket 서버로 메시지를 전송하는 함수
function sendMessage(message: string) {
  socket.send(message);
}

위 예제에서는 WebSocket 객체를 사용하여 서버와 클라이언트 간의 양방향 통신을 구현합니다. 먼저, new WebSocket() 메소드를 사용하여 서버와의 연결을 생성합니다. 이후, onopen, onmessage, onclose, onerror 이벤트 핸들러를 등록하여 WebSocket 연결의 상태 변화 및 메시지 수신을 처리합니다.

sendMessage() 함수를 사용하여 서버로 메시지를 전송할 수 있습니다. 이 함수는 send() 메소드를 사용하여 메시지를 서버로 전송합니다.