[Web API] WebSocket

The WebSocket API

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

 

Writing WebSocket client applications

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

 

WebSocket

WebSocket.binaryType

- Value: "blob" or "arraybuffer", 연결에 사용되는 binary data type

WebSocket.readyState

- Value: 0(CONNECTING), 1(OPEN), 2(CLOSING), 3(CLOSED)

let webSocket = new WebSocket('ws://192.168.0.2:3000');

// webSocket.binaryType = "blob"; // default
webSocket.binaryType = "arraybuffer"

WebSocket 생성자 함수의 인수로 WebSocket 서버의 URL을 전달한다.

binaryType 속성으로 서버에서 전송된 Binary Data을 어떤 타입으로 해석하느냐를 결정한다.

message 이벤트 핸들러에서 타입에 따라 분기해서 사용가능하다.

 

WebSocket.send()

- Parameters: ArrayBuffer, Blob, ArrayBufferView

WebSocket.close()

- WebSocket connection 끊기

btnBlob.onclick = () => {
    let blob = new Blob(["abcd"]);
    webSocket.send(blob);
};

btnArrayBuffer.onclick = () => {
    let aBuffer = new ArrayBuffer(8);
    let int8Arr = new Int8Array(aBuffer);
    int8Arr.forEach((v, i) => { int8Arr[i] = 0x61 + i; });
    webSocket.send(aBuffer);
};

btnString.onclick = () => {
    webSocket.send('msg from client');
};

일반적인 배열이나 일반 객체를 보내면 toString() 메소드로 형변환되어 전송된다.

 

WebSocket.onmessage

- EventListener: 서버에서 message가 왔을 때

webSocket.onmessage = (evt) => {
    let message = evt.data;
    if (typeof message == 'string') {
        // ...
    } else if (message instanceof Blob) {
        // in case of binaryType = "blob"
        // ...
    } else if (message instanceof ArrayBuffer) {
        // in case of binaryType = "arraybuffer"
        // ...
    } else {
        // ...
    }
}

Binary Data는 WebSocket.binaryType의 설정값에 따라 다른 데이터 형을 가진다.

 

WebSocket.onopen

- EventListener: WebSocket.readyState가 1(OPEN)으로 변할 때

WebSocket.onerror

- EventListener: 오류발생시

WebSocket.onclose

- EventListener: WebSocket.readyState가 3(CLOSED)으로 변할 때

webSocket.onopen = () => console.log('connection success');
webSocket.onclose = () => console.log('connection closed');
webSocket.onerror = err => console.error(err);

 

 

Writing WebSocket servers

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