Refer to the scene

Server update The front-end page is partially refreshed to update the information returned by the server.

What is a webScocket?

Its biggest characteristic is that the server can take the initiative to push information to the client, the client can also take the initiative to send information to the server, is a real two-way equal dialogue, belongs to a server push technology. In the WebSocket API, the browser and the server only need to do a handshake, and then a fast channel is formed between the browser and the server. Data can be transmitted directly between the two.

The characteristics of

2. It has good compatibility with HTTP. The default ports are 80 and 443, and HTTP is adopted in the handshake phase. 3. Lightweight data format, low performance overhead and efficient communication. 4. You can send text or binary data. 5. The client can communicate with any server without source restriction. 6. The protocol identifier is WS (or WSS if encrypted), and the server URL is the URL.

webSocket API

1. WebSocket constructor

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

The URL is the server address, and the second parameter, protocol, is optional, specifying an acceptable subprotocol.

2.webSocket.readyState

The readyState property returns the current state of the instance object, of which there are four types.

CONNECTING: The value is 0, indicating that a connection is being established. OPEN: the value is 1, indicating that the connection is successful and communication can be started. CLOSING: A value of 2 indicates that the connection is CLOSING. CLOSED: the value is 3, indicating that the connection is CLOSED or fails to be opened

Here is an example

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;
}
Copy the code

3.webSocket.onopen

The onopen property of the instance object, which specifies the callback function if the connection is successful.

ws.onopen = function () {
  console.log('Websocket connection successful')}Copy the code

4.webSocket.onclose

The onClose property of the instance object, which specifies the callback function if the connection is closed.

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

5.webSocket.onmessage

The onMessage property of the instance object, which specifies the callback function to receive data from the server.

ws.onmessage = function(event) {
  var data = event.data;
  // Process data
};
Copy the code

Note: The server data can be textual or binary (bloB objects or Arraybuffer objects).

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"); }}Copy the code

In addition to dynamically determining the data type received, you can explicitly specify the binary data type received using the binaryType attribute.

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

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

6.webSocket.send()

The send() method of the instance object is used to send data to the server. Example of sending a Blob object.

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

7.webSocket.onerror

The onError property of the instance object, which specifies the callback function when an error is reported.

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

socket.addEventListener("error".function(event) {
  // handle error event
});
Copy the code

Ruan teacher’s webSocket article