Web Socket

웹 소켓은 사용자의 브라우저와 서버 사이의 인터액티브 통신 세션을 설정할 수 있게 하는 고급 기술입니다. 개발자는 웹 소켓 API를 통해 서버로 메시지를 보내고 서버의 응답을 위해 서버를 폴링하지 않고도 이벤트 중심 응답을 받는 것이 가능합니다.

interface

WebSocket

웹 소켓 서버로 연결하고 연결을 통해 데이터를 보내고 받는 기본 인터페이스.
WebSocket 객체는 웹 소켓 서버 연결의 생성과 관리 및 연결을 통한 데이터 송수신 API를 제공합니다.
WebSocket() 생성자를 통해 WebSocket 객체를 생성할 수 있습니다.

• 생성자
  새로운 WebSocket 객체를 생성해 반환합니다.

WebSocket()

• properties

WebSocket.binaryType
연결에 사용되는 이진 데이터의 유형입니다.

WebSocket.bufferedAmount (Read only)
큐에 대기 중인 데이터의 바이트 수입니다.

WebSocket.extensions (Read only)
서버에서 선택한 확장입니다.

WebSocket.protocol (Read only)
서버에서 선택한 하위 프로토콜입니다.

WebSocket.readyState (Read only)
연결의 현재 상태입니다.

WebSocket.url (Read only)
WebSocket의 절대 URL입니다.

• methods

WebSocket.close()
연결을 닫습니다.

WebSocket.send()
전송할 데이터를 큐에 등록합니다.

• Event
  addEventListener() 메서드를 사용하거나, WebSocket 인터페이스의 oneventname 속성에 수신기를 할당해서 아래의 이벤트를 수신할 수 있습니다.

- close : WebSocket의 연결이 닫힐 때 발생합니다. onclose 속성으로도 수신할 수 있습니다.
- error : WebSocket의 연결이 일부 데이터 전송의 실패 등, 오류로 인해 닫힐 때 발생합니다. onerror 속성으로도 수신할 수 있습니다.
- message : WebSocket으로 데이터를 수신했을 때 발생합니다. onmessage 속성으로도 수신할 수 있습니다.
- open : WebSocket 연결이 열렸을 때 발생합니다. onopen 속성으로도 수신할 수 있습니다.

// 예제
// WebSocket 연결 생성
const socket = new WebSocket('ws://localhost:8080');

// 연결이 열리면
socket.addEventListener('open', function (event) {
    socket.send('Hello Server!');
});

// 메시지 수신
socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
});

CloseEvent

연결이 종료 되었을 때 웹 소켓 객체에 의해 전달된 이벤트
웹 소켓 객체의 onclose 속성으로 정의된 listener에 의해 전달됨

• 생성자
  새로운 CloseEvent를 생성해 반환합니다.

CloseEvent()

• properties
  부모인 Event 객체의 inherits properties 상속

CloseEvent.code (Read only)
server에서 전달받은 close code를 포함한 unsigned short 반환

CloseEvent.reason (Read only)
server가 connection을 close한 이유가 담긴 string
특정 서버와 sub-protocol에 의해 특정됨

CloseEvent.wasClean (Read only)
connection이 cleanly하게 closed 되었는지 의미하는 boolean값

• methods
  부모인 Event 객체의 method 상속

MessageEvent

서버로 부터 메시지가 수신 되었을 때 웹 소켓 객체에 의해 전달된 이벤트
웹 소켓 객체의 onmessage 속성으로 정의된 listener에 의해 전달됨

• 생성자
  새로운 MessageEvent를 생성합니다.

MessageEvent()

• properties
  부모인 Event 객체의 속성을 상속

MessageEvent.data (Read only)
emitter에 의해 보내진 데이터인 DOMString, Blob를 포함

• methods
  부모인 Event 객체의 method 상속

WebSocket client application 작성

WebSocket 클라이언트 애플리케이션은 WebSocket API 를 사용하여 WebSocket 프로토콜을 사용하는 WebSocket 서버 와 통신 합니다.

WebSocket 객체 생성

WebSocketWebSocket 프로토콜을 사용하여 통신하려면 WebSocket 객체를 생성해야합니다.
이렇게 하면 자동으로 서버에 대한 연결을 열려고 시도합니다.

WebSocket 생성자는 하나의 필수 매개변수와 하나의 선택적 매개변수를 허용합니다

webSocket = new WebSocket(url, protocols);

• url
  연결할 URL입니다. 이는 WebSocket 서버가 응답할 URL이어야 합니다. 
• protocols (optional)
  단일 프로토콜 문자열, 또는 프로토콜 문자열 배열입니다. 이러한 문자열은 단일 서버가 여러 WebSocket 하위 프로토콜을 구현할 수 있도록 하위 프로토콜을 나타내는 데 사용됩니다.
  프로토콜 문자열을 지정하지 않으면 빈 문자열이 가정됩니다.

대상이 엑세스를 허용하지 않는 경우(안전하지 않은 연결을 사용하려 시도하는 경우) WebSocket 객체는 SecurityError를 발생사킵니다.

// 예제
const exampleSocket = new WebSocket("wss://www.example.com/socketserver", "protocolOne");

// exampleSocket.readyState === 'CONNECTING'
// exampleSocket.readyState === 'OPEN' => 데이터 송수신 연결 준비 완료됨

서버로 데이터 보내기

연결을 열면 서버로 데이터 전송을 시작할 수 있습니다.
보내려는 각 메시지에 대해 WebSocket 객체의 send() 메서드를 호출할 수 있습니다.

exampleSocket.send("Here's some text that the server is urgently awaiting!");
// string, Blob, or ArrayBuffer 전송 가능

exampleSocket.onopen = (event) => {
// onopen event handler를 통해 연결이 설정된 후에만 send()메서드를 호춣하도록 작성 가능
  exampleSocket.send("Here's some text that the server is urgently awaiting!");
};

JSON을 이용해 객체를 전송할 수도 있습니다(대부분 상황일테다)

// Send text to all users through the server
function sendText() {
  // Construct a msg object containing the data the server needs to process the message from the chat client.
  const msg = {
    type: "message",
    text: document.getElementById("text").value,
    id:   clientID,
    date: Date.now()
  };

  // Send the msg object as a JSON-formatted string.
  exampleSocket.send(JSON.stringify(msg));

  // Blank the text input element, ready to receive the next line of text from the user.
  document.getElementById("text").value = "";
}

서버에서 데이터 수신

메시지가 수신되면 WebSocket 객체에 message 이벤트가 전송됩니다.
이벤트에 대해 'message' listener를 추가하거나,
onmessage event handler를 사용해 이를 처리할 수 있습니다.

exampleSocket.onmessage = (event) => {
  console.log(event.data);
}

연결 닫기

WebSocket 연결이 종료되면 close() 메서드를 호출합니다.

exampleSocket.close()

네트워크 연결을 닫기 전에 bufferedAmount 속성을 검사해,
아직 전송되지 않은 데이터가 있는지 확인할 수 있습니다.
→ 해당 값이 0이 아닌 경우, 보류 중인 데이터가 존재한다는 뜻!

보안 고려 사항

WebSocket은 혼합 콘텐츠 환경에서 사용하면 안 됩니다.
즉 HTTPS를 사용하여 로드된 페이지에서 비보안 WebSocket 연결을 열면 안 되며, 그 반대의 경우도 마찬가지입니다.
이제 대부분의 브라우저는 안전한 WebSocket 연결만 허용하며, 더 이상 안전하지 않은 컨텍스트에서의 사용을 지원하지 않습니다.

https://developer.mozilla.org/ko/docs/Web/API/WebSockets_API
https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications