웹소켓의 장면 응용

응용 장면

서버 업데이트 프런트엔드 페이지도 부분적으로 리셋하고 서버 쪽에서 되돌아오는 정보를 업데이트합니다

웹소켓이란 무엇입니까?

그것의 가장 큰 특징은 서버가 클라이언트에게 주동적으로 정보를 전송할 수 있고 클라이언트도 주동적으로 서버에 정보를 전송할 수 있다는 것이다. 이것은 진정한 쌍방향 평등 대화로 의 하나에 속한다.WebSocket API에서 브라우저와 서버는 ，만 하면 브라우저와 서버 사이에 빠른 채널이 형성된다.양자 간에 직접 데이터가 서로 전송될 수 있다

기타 특징은 다음과 같습니다.

1. TCP 프로토콜 위에 구축하면 서버 측의 실현이 비교적 쉽다.2. HTTP 프로토콜과 호환성이 좋습니다.기본 포트도 80 및 443이며 HTTP 프로토콜을 사용하는 악수 단계이기 때문에 여러 HTTP 프록시 서버를 통해 악수를 차단하기가 쉽지 않습니다.3. 데이터 형식이 비교적 가볍고 성능 비용이 적으며 통신이 효율적이다.4. 텍스트를 보낼 수도 있고 바이너리 데이터를 보낼 수도 있다.5. 소스 제한이 없으므로 클라이언트는 임의의 서버와 통신할 수 있습니다.6. 프로토콜 식별자는 ws(암호화되면 wss)이고 서버 주소는 URL입니다.

webSocket API

1. WebSocket 구조 함수

var ws = new WebSocket('url', [protocol]);

url는 서버 주소이고 두 번째 매개 변수protocol는 선택할 수 있으며 받아들일 수 있는 하위 프로토콜을 지정합니다.
2.webSocket.readyState readyState 속성은 실례 대상의 현재 상태를 되돌려줍니다. 모두 네 가지가 있습니다.
연결 중입니다.OPEN: 값은 1입니다. 연결이 성공했고 통신이 가능합니다.CLOSING: 값은 2입니다. 연결이 닫히고 있음을 나타냅니다.CLOSED: 값이 3이면 연결이 종료되었거나 연결을 열 수 없음을 나타냅니다.
다음은 하나의 실례이다

switch (ws.readyState) {
  case WebSocket.CONNECTING:
    // do something
    break;
  case WebSocket.OPEN:
    // do something
    break;
  case WebSocket.CLOSING:
    // do something
    break;
  case WebSocket.CLOSED:
    // do something
    break;
  default:
    // this never happens
    break;
}

3.webSocket.onopen
연결 성공 후 콜백 함수를 지정하는 데 사용되는 실례 대상의 onopen 속성입니다.

ws.onopen = function () {
  console.log('websocket ')
}

4.webSocket.onclose
연결이 닫힌 후의 리셋 함수를 지정하는 데 사용되는 실례 대상의 onclose 속성입니다.

ws.onclose = function(event) {
  var code = event.code;
  var reason = event.reason;
  var wasClean = event.wasClean;
  // handle close event
};

5.webSocket.onmessage
서버 데이터를 받은 후 콜백 함수를 지정하는 데 사용되는 실례 대상의 onmessage 속성입니다.

ws.onmessage = function(event) {
  var data = event.data;
  //  
};

서버 데이터는 텍스트일 수도 있고 바이너리 데이터일 수도 있습니다. (blob 대상이나 Arraybuffer 대상)

ws.onmessage = function(event){
  if(typeof event.data === String) {
    console.log("Received data string");
  }
  if(event.data instanceof ArrayBuffer){
    var buffer = event.data;
    console.log("Received arraybuffer");
  }
}

동적 판단으로 받은 데이터 형식을 제외하고binary Type 속성을 사용하여 받은 바이너리 데이터 형식을 현시적으로 지정할 수 있습니다.

ws.binaryType = "blob";
ws.onmessage = function(e) {
  console.log(e.data.size);
};

//   ArrayBuffer  
ws.binaryType = "arraybuffer";
ws.onmessage = function(e) {
  console.log(e.data.byteLength);
};

6.webSocket.send()
실례 대상의 send() 방법은 서버에 데이터를 보내는 데 사용됩니다.ws.send('your message'); Blob 객체를 보내는 예입니다.

var file = document.querySelector('input[type="file"]').files[0];
ws.send(file);

7.webSocket.onerror
오류가 발생했을 때의 리셋 함수를 지정하는 데 사용되는 실례 대상의 onerror 속성입니다.

socket.onerror = function(event) {
  // handle error event
};

socket.addEventListener("error", function(event) {
  // handle error event
});

문장은 완 선생님 블로그에서 발췌한 것이다