Javascript에서 웹소켓 구현하기

베하! '일단고' 팀입니다.

저어번 시간에 웹소켓이 무엇인지에 대한 글을 남겼었어요. 기억하시나요?

오늘은 직접 웹소켓을 코드로 구현해보는 시간을 가져보겠습니다.

사용할 코드는 Javascript 입니다.

 

구현하기에 앞서

Javascript로 웹소켓을 구현하기에 앞서서 이전에 알려드린 웹소켓에 대하여 잠깐 리뷰하는 시간을 가져보겠습니다.

웹 소켓은 양방향 통신을 지원하는 프로토콜로, 클라이언트와 서버 간에 실시간 데이터를 교환할 수 있도록 해줍니다. 이는 HTTP와는 다르게 연결을 유지하고 있어 실시간으로 데이터를 주고받을 수 있습니다. 이때 데이터는 ‘패킷(packet)’ 형태로 전달되며, 전송은 커넥션 중단과 추가 HTTP 요청 없이 양방향으로 이뤄집니다.

 

 

구현하기

Javascript에서 웹소켓은 생각보다 쉽게 구현할 수 있습니다.

웹소켓 커넥션을 만들려면 new WebSocket을 사용하면 됩니다. 이때, ws라는 프로토콜을 사용합니다.

거두절미하고 코드부터 보실까요?

let socket = new WebSocket("wss://test.com/websocket/demo");

socket.onopen = function(e) {
  alert("연결되었습니다.");
  socket.send("Hello");
};

socket.onmessage = function(event) {
  alert(`서버로부터 전송받은 데이터: ${event.data}`);
};

socket.onclose = function(event) {
  if (event.wasClean) {
    alert(`연결을 끊었습니다.`);
  } else {
    // 프로세스가 죽거나 네트워크에 장애가 있는 경우
    alert('연결에 이상이 생겼습니다.');
  }
};

socket.onerror = function(error) {
  alert(`[error]`);
};

• new WebSocket()
  • 이를 통해 소켓을 생성하면 즉시 연결이 시작됩니다. 헤더를 통해 웹소켓을 지원하는지 서버에 질문을 하고, 긍정적인 응답이 온다면 커넥션이 이루어지는 것입니다.
• oepn
  • 커넥션이 제대로 만들어졌을 때 발생하며 res로 해당 커넥션의 정보를 알 수 있습니다.
• message
  • 데이터를 수신하였을 때 발생합니다.
• error
  • 커넥션에 에러가 생겼을 때 발생합니다.
• close
  • 커넥션이 종료되었을 때 발생합니다. 커넥션을 열어주었으면 닫아주는 동작도 필요합니다.
• send
  • 데이터를 서버에 전송할 수 있습니다. 단, 텍스트나 이진 데이터만 전송이 가능합니다.

Vue를 사용하여 구현한다면 라이프라이클 주기를 활용하여 연결 및 해제를 관리하면 좋습니다.

 

 

커넥션 닫기

연결 주체(브라우저나 서버) 중 한쪽에서 커넷션 닫기(close)를 원하는 경우엔 보통 숫자로 된 코드와 문자로 된 사유가 담긴 '커넥션 종료 프레임’을 전송하게 됩니다.

// 닫기를 요청한 주체가 행하는 동작
socket.close(1000, "Work complete");

// 다른 주체가 받는 메시지
socket.onclose = event => {
  // event.code === 1000
  // event.reason === "Work complete"
};

커넥션을 닫을 때 주로 사용하는 코드는 다음과 같습니다.

• 1000 – 기본값으로 정상 종료를 의미
• 1006 – 1000 같은 코드를 수동으로 설정할 수 없을 때 사용하고, 커넥션이 유실(no close frame)되었음을 의미
• 1001 – 연결 주체 중 한쪽이 떠남(예: 서버 셧다운, 부라우저에서 페이지 종료)
• 1009 – 메시지가 너무 커서 처리하지 못함
• 1011 – 서버 측에서 비정상적인 에러 발생

---

 

이렇게 Javascript에서 웹소켓을 구현해보는 시간을 가져보았습니다. 어떤가요? 여러분도 이제 웹소켓을 구현할 수 있어요.

즐거운 코딩하시고 다음 시간에 다시 만나요!

베빠~~!