1. Websocket protocol history

HTTP polling is divided into polling and long polling diagramsCopy the code

Before Websocket, HTTP polling was required to implement bidirectional communication between the client and server.

1. ** polling ** : the browser starts a timer through JS, and the browser sends requests to the server at fixed intervals to ask whether the server has any new messages. - Disadvantages of polling: not enough real-time; 2. ** Long polling ** : when a browser sends a request to the server, the server will wait for a period of time to process it (reply to a message), which can solve the real-time problem. - Cons: Wasteful server resources (a server running in multi-threaded mode leaves most threads hanging most of the time) When there is no data transmission in HTTP connection for a long time, any gateway on the link may close the connection, and the gateway cannot control the connection.Copy the code

So, in HTML5, the webSocket protocol is added to establish an unrestricted two-way communication channel between the browser and the server.

Why webSocket connection can achieve full duplex communication but HTTP connection can not?

It is divided into two points: 1. HTTP protocol is built on TCP protocol, TCP protocol itself realizes full duplex communication, but HTTP protocol's request-reply mechanism limits the full duplex communication; 2. 2. Websocket connection established, equivalent to a simple provision, the next communication protocol, do not use HTTP protocol, directly send data to each other ~Copy the code

Websocket protocol: uses the URI of WS or WSS, where WSS indicates the websocket using TLS.

Ws :// Data is not encrypted WSS :// Websocket based on TLS, the transport security layer encrypts data at the sender and decrypts data at the receiverCopy the code

Advantages of webSocket:

2. Stronger real-time performance: Because the protocol is full-duplex, the server can actively send data to the client at any time; 3. Maintain connection state: Websocket needs to create a connection first, which makes it a stateful protocol, and part of the state information can be omitted during communication. 4. Better binary support: Websocket defines binary frames 5. Can support extension: Websocket defines the extension, users can extend the protocol, to achieve part of the custom sub-protocol;Copy the code
  • HTTP Determines whether to Upgrade to the Websocket protocol by checking whether Connection: Upgrade and Upgrade: websocket are contained in the header.
  • In addition, there are other headers;
  • When the server agrees to a WebSocket connection, the response code 101 is returned.
  • Its API is simple

What happens after the WebSocket protocol is established?

Once the socket protocol is established, you should listen for four events on the socket: open: the connection is established. Message: data is received. Error: indicates a websocket error. Close: The connection is closed.Copy the code

Common operations: Send messages: socket.send(data); Close connection: socket([code],[reason]);

Reference:

- WebSocket:https://www.liaoxuefeng.com/wiki/1022910821149312/1103303693824096 - WebSocket: https://zh.javascript.info/websocket - you don't know the WebSocket: https://juejin.cn/post/6854573221241421838 - three minutes to learn front - WeChat public numberCopy the code