WebSocket

  • WebSocketIt is a kind ofSupport two-way communicationNetwork communication protocol.
  • That means the server canActively push information to the client, the client can alsoSending information to the server
  • It is a kind of server push technology.

Features:

(1) Based on THE TCP protocol, the implementation of the server is relatively easy.

(2) Good compatibility with HTTP protocol. The default ports are also 80 and 443, and the handshake phase uses THE HTTP protocol, so it is not easy to mask the handshake and can pass through various HTTP proxy servers.

(3) The data format is relatively lightweight, with low performance overhead and efficient communication.

(4) Can send text, can also send binary data (bloB object or Arraybuffer object)

(5) The received data type can be specified using binaryType, explicitly specifying the binary data type received

(6) There is no same-origin restriction, and the client can communicate with any server.

(7) The protocol identifier is WS (handshake HTTP) (if encrypted, WSS (TCP +TLS)), and the server URL is the URL.

WebSocket object

WebSocket objects provide apis for creating and managing WebSocket connections and for sending and receiving data over that connection.

Construct a WebSocket using the WebSocket() constructor.

Why do you need WebSockets

Hypertext Transfer Protocol (HTTP) Protocol

A stateless, application-layer, request/response protocol that uses extensible semantics and self-describing message formats to interact flexibly with web-based hypertext information systems.

  • Because HTTP communication can only be initiated by the client and the server returns the query result, the SERVER cannot actively push information to the client through THE HTTP protocol.

The server has continuous state changes that the client has trouble keeping track of.

  • We can only use polling: every once in a while, a query is sent out to see if the server has any new information. The most typical scenario is a chat room.

  • Polling is inefficient and a waste of resources (because you have to keep connections open, or HTTP connections open);

Chrome request list: Analyze WebSocket

Filters (filter resources XHR, JS, WS, CSS, WS, etc.) :

  • By type: WS
  • Attribute filtering: is: running

Your table column Frames

Data: message payload. If the message is plain text, it is displayed directly. Display the opcode name and code (Continuation Frame, Binanry Frame, Connection Close Frame, Ping Frame, or Pong Frame) Length: Length of message payload in bytes Time: Time of receiving or sending.

The message color

  • The text message sent to the server is light green
  • The received text message is white
  • The WebSocket opcode is light yellow
  • Errors are light red

WbeSocket cost vs. HTTP

1. Real-time and scalability. Simplicity is sacrificed.

Network efficiency vs. statelessness: Request 1 sacrifices simplicity and visibility based on request 2

The WebSocket heartbeat is kept compared to HTTP

  • (HTTP persistent connections can only be based on simple timeouts (usually 65s))
  • Websocket links are based onThe ping/ Pong heartbeat mechanism is maintained

Design philosophy: Expose TCP to the upper layer under Web constraints

metadata

  • The HTTP header stores metadata.
  • The application layer transferred over webSocket stores metadata

Frame based: not byte stream based (HTTP, TCP)

  • Each frame is either storedThe character data, or bearingbinarydata

Browser-based same-origin policy model (invalid for non-browsers)

You can use headers such as access-control-allow-origin

Based on theURI,The child agreementsupportThe same port as the hostMultiple services on the

Frame format diagram

ABNF Describes the frame format

ws-frame = frame-fin ; 1 bit in length frame-rsv1 ; 1 bit in length frame-rsv2 ; 1 bit in length frame-rsv3 ; 1 bit in length frame-opcode ; 4 bits in length frame-masked ; 1 bit in length frame-payload-length ; Three lengths [frame-masking-key]; 32 bits in length frame-payload-data ; n*8 bits in ; length, where ; n >= 0Copy the code

Red: the 2-byte header of the frame that must exist

Data frame format: Rsv reserved value

RSV1/RSV2/RSV3: The default value is 0, which is determined by the extension only when the Extension is used

Data frame format: frame type

  • Persist frame 0: continues the previous frame
  • Non-control frame 1: text frame (UTF-8) 2: binary frame 3-7: Reserved for non-control frames
  • Control frame 8: close frame 9: heartbeat frame Ping A: heartbeat frame Pong B-F: Control frame reserved

URI format

WSS – URI: WSS ://[host][:port][path][? Query] Port port the default value is 443

The client provides the information

Host, port Host port schema: Resource based on SSL: URI Handshake random number: SEC-websocket-key Selected sub-protocol: sec-websocket-protocol: sec-websocket-Extensions CORS: Origin

How do I prove that the handshake was accepted by the server? Accident prevention

Sec-websocket-key random number in request sec-websocket-key: A1EEou7Nnq6+BBZoAZqWlg== Sec- Websocket-Accept proof value GUID (RFC4122) : 258eAFa5-E914-47da-95ca-C5ab0dc85b11

• Value construction rule: BASE64(SHA1(sec-websocket-keyguID))

• Splice value: A1EEou7Nnq6+BBZoAZqWlg== 258EAFa5-E914-47da-95ca-C5AB0dc85B11

• SHA1 value: 713 f15ece2218612fcadb1598281a35380d1790f

The BASE 64 values: cT8V7OIhhhL8rbFZgoGjU4DReQ8 =

Eventually the head: Sec – WebSocket – Accept: cT8V7OIhhhL8rbFZgoGjU4DReQ8 =