[JS] 자바스크립트로 웹소켓 서버 접속, 메세지, 접속 끊기 처리하기

웹소켓을 사용하면 서버와 브라우저간 연결을 유지한 상태에서 데이터를 교환할 수 있다.
이때 데이터는 '패킷'으로 전달되며 전송은 커넥션 중단과 추가 http 요청없이 양방향으로 이뤄진다.



웹소켓 커넥션을 만드려면 new WebSocket을 호출하면 되는데, 이때는 ws라는 특수 프로토콜을 사용한다.

 

 

//웹소켓 커넥션 생성 코드
let socket = new WebSocket("ws://javascript.info");

소켓이 정상적으로 만들어지면 밑에 네 개의 이벤트를 사용가능하다.
1. open – 커넥션이 제대로 만들어졌을 때 발생함
2. message – 데이터를 수신하였을 때 발생함
3. error – 에러가 생겼을 때 발생함
4. close – 커넥션이 종료되었을 때 발생함

let socket = new WebSocket("ws://URL주소");

socket.onopen = function(e) {  //커넥션 생성 코드
  alert("[open] 커넥션이 만들어졌습니다.");
  alert("데이터를 서버에 전송해봅시다.");
  socket.send("My name is Bora");
};

socket.onmessage = function(event) {  // 메세지 전송 코드
  alert(`[message] 서버로부터 전송받은 데이터: ${event.data}`);
};

socket.onclose = function(event) {  //커넥션 끊기 코드
  if (event.wasClean) {
    alert(`[close] 커넥션이 정상적으로 종료되었습니다(code=${event.code} reason=${event.reason})`);
  } else {
    // 예시: 프로세스가 죽거나 네트워크에 장애가 있는 경우
    // event.code가 1006이 됩니다.
    alert('[close] 커넥션이 죽었습니다.');
  }
};

socket.onerror = function(error) {  //에러 코드
  alert(`[error] ${error.message}`);
};