[javascript] 자바스크립트에서 웹 소켓 객체 생성 및 연결하기

15 Dec 2023

javascript

이번 포스팅에서는 자바스크립트를 사용하여 웹 소켓(WebSocket)을 생성하고 서버에 연결하는 방법에 대해 알아보겠습니다.

웹 소켓이란?

웹 소켓은 서버와 클라이언트 간 실시간 양방향 통신을 위한 표준 프로토콜로, TCP 소켓을 기반으로 하며, 웹 애플리케이션과 서버 간의 쉬운 양방향 통신을 가능하게 합니다.

웹 소켓 객체 생성하기

웹 소켓을 사용하려면 먼저 웹 소켓 객체를 생성해야 합니다. 자바스크립트에서는 WebSocket 객체를 사용하여 이를 수행할 수 있습니다.

const socket = new WebSocket('ws://서버주소:포트번호');

위 코드에서 new WebSocket으로 웹 솼켓 객체를 생성하고, 서버 주소와 포트 번호를 지정하여 해당 서버에 연결합니다.

웹 솼켓 연결 관리

웹 소켓은 다양한 연결 상태를 갖고 있으며, 연결이 성공하거나 실패하거나 연결이 끊어지는 등의 상태 변화에 따른 이벤트 처리가 필요합니다.

연결 이벤트 처리

socket.onopen = function(event) {
  console.log('웹 소켓 연결 성공!');
};

메시지 수신 이벤트 처리

socket.onmessage = function(event) {
  console.log('서버에서 메시지 수신:', event.data);
};

연결 종료 이벤트 처리

socket.onclose = function(event) {
  if (event.wasClean) {
    console.log('웹 소켓 연결이 정상적으로 종료되었습니다.');
  } else {
    console.error('웹 소켓 연결이 끊어졌습니다.');  
  }
};

에러 발생 이벤트 처리

socket.onerror = function(error) {
  console.error('웹 솼켓 에러 발생:', error);
};

웹 소켓 연결 종료 및 자원 해제

웹 소켓 사용이 끝나면, 명시적으로 연결을 종료하고 자원을 해제해야 합니다.

socket.close();

지금까지 자바스크립트에서 웹 소켓을 생성하고 서버에 연결하는 방법에 대해 알아보았습니다. 웹 소켓을 이용하면 실시간으로 데이터를 주고 받을 수 있어서 다양한 웹 애플리케이션을 개발할 때 유용하게 활용될 수 있습니다.

참고 자료: