<JavaScript> WebSockets

실시간 웹 애플리케이션은 사용자와 상호작용하는 동안 데이터를 즉시 전송하고 수신할 수 있는 애플리케이션입니다.

이번 글에서는 JavaScript에서 실시간 통신을 가능하게 하는 WebSockets에 대해 알아보겠습니다.

 

WebSockets이란 무엇일까요?

WebSockets은 양방향 통신을 가능하게 하는 웹 기술입니다.

즉, 웹 사이트와 서버 간에 데이터를 동시에 전송하고 수신할 수 있습니다. 이를 통해 실시간 애플리케이션, 채팅 애플리케이션, 온라인 게임 등을 구현할 수 있습니다.

 

웹소켓 연결 시작하기

JavaScript에서 WebSocket을 사용하려면 먼저 WebSocket 객체를 생성해야 합니다.

WebSocket 객체를 생성할 때에는 서버의 URL을 전달해야 합니다.

예를 들면 다음과 같습니다.

 

const socket = new WebSocket("ws://example.com");

 

위 코드에서 ws://는 WebSocket 프로토콜을 나타냅니다. WebSocket 서버와 안전한 연결을 사용하려면, URL의 접두사를 wss://로 변경할 수 있습니다.

 

웹소켓 이벤트 처리하기

WebSocket 연결 후, 서버와 클라이언트 간 통신을 이벤트를 사용하여 처리할 수 있습니다. 이벤트 핸들러에는 open, message, error, close 등이 포함됩니다.

 

WebSocket 연결이 열릴 때 실행될 이벤트 핸들러를 등록하는 방법.

socket.addEventListener("open", event => {
  console.log("WebSocket connection opened:", event);
});

 

WebSocket을 통해 메시지를 수신할 때 실행될 이벤트 핸들러를 등록하는 방법.

socket.addEventListener("message", event => {
  console.log("WebSocket message received:", event.data);
});

 

WebSocket 연결 중 오류 발생 시 실행될 이벤트 핸들러를 등록하는 방법.

socket.addEventListener("error", event => {
  console.error("WebSocket error:", event);
});

 

WebSocket 연결이 닫힐 때 실행될 이벤트 핸들러를 등록하는 방법.

socket.addEventListener("close", event => {
  console.log("WebSocket connection closed:", event);
});

 

웹소켓을 통해 메시지 보내기 및 받기

 

WebSocket을 사용하여 서버에 메시지를 보내려면 send() 메소드를 호출하면 됩니다.

socket.send("Hello, WebSocket server!");

앞서 설명한 message 이벤트를 사용하면 서버로부터 받은 메시지를 처리할 수 있습니다.

 

웹소켓 연결 종료하기

데이터 교환을 마친 후 WebSocket 연결을 종료하려면 close() 메소드를 사용하면 됩니다.

socket.close();

이 명령은 WebSocket 객체를 더 이상 사용할 수 없게 만듭니다.

 

이번 글에서는 JavaScript에서 실시간 통신을 가능하게 하는 WebSockets에 대해 알아보았습니다.

 

감사합니다.