WebSocket 객체 생성하기

• 객체에서 서버와 handshake 후 서브 프로토콜로 바꿔줌.

new WebSocket(param_1,param_2)
// param_1 필수 : 웹 서버의 url 
// ex) wss://www.algo-with-me.shop
//     ws(80), wss(443) 

// param_2 옵션 : 서브 프로토콜을 지정할 때 사용되는 문자열 | 문자열[]
//               없을 경우 빈 문자열을 넣은 것으로 간주해서 서브 프로토콜이 없음 

• open 이벤트 객체

  • 웹 소켓 객체를 생성하고 난 후 정상적으로 handshake가 일어나면 ‘open’ 이벤트가 발생한다.

  myWebSocket.addeventlistener('open',(event)=>{
   // event 형태는 아래와 같다.
  })
  
  {
     isTrusted: true,
  		bubbles: false,
  		cancelBubble: false,
  		...,
  		timeStamp: 106.09999996423721,
  		type: "open",
  }
  

연결 에러

• 만약 연결 시도 중 에러가 발생하면, onerror 헨들러가 실행
  • 연결 시도 중 에러라면 ‘error’이란 이름의 이벤트가 WebSocket 객체에 전달
  • 그로 인해 onerror 핸들러 실행
  • 물론 종료 이벤트도 발생하긴 함
• 연결 후에 연결이 종료되는 경우에는 onclose 핸들러가 실행
  • 종료 한다면, CloseEvent 이벤트가 WebSocket 객체로 전달
  • 그로 인해 onerror 핸들러가 실행

서버에 데이터 전송하기

• 생성한 WebSocket 객체에 send를 호출하여 서버로 데이터를 전송가능.
• 보낼 수 있는 데이터는 string, blob, buffer 배열

myWebSocket.send('LGTM')

• 주의할 점은 연결이 비동기 작업이기 때문에 바로 send를 호출할 경우 실패할 가능성이 있다는 점.

서버로부터 데이터 수신하기

• WebSocket은 event-driven API임
• 메시지가 수신되면 message 이벤트가 발생하고
• onmessage로 이벤트를 핸들링 가능하다.

myWebSocket.onmessage = function (event) {
  console.log(event.data);
};

// 완전히 같음.
myWebSocket.addEventListener("message",function (event) {
  console.log(event.data);
})

• message 이벤트 객체

  • 서버가 send 메서드로 데이터를 보내면 message Event가 발생한다.

  MessageEvent 
  	
  {
  	isTrusted: true,
  	bubbles: false,
  	cancelBubble:false,
  	data: 서버가 전달한 데이터 ,
  	...,
  	timeStamp: 3299.2999999523163
  	type: "message"
  }
  
  

연결을 종료하기