In the last article, we learned that socket. IO is a wrapped library based on engine. IO. If you don’t know engine. IO, you can click on engine

1. An overview of the

Socket. IO is a Client-Server real-time communication library based on Websocket. The socket. IO layer uses engine. IO to encapsulate a protocol.

See package.json for their dependencies

2. Introduction of WebSocket

Websocket definition reference specification rfc6455

Websocket is a protocol that provides bidirectional communication between a client (which provides an unreliable secret key) and a server (which verifies the key).

Before the WebSocket protocol, polling technology would be used to provide real-time two-way push messages between the client and the server. The client would send messages to the server through XHR or JSONP and receive messages from the server through event callback.

Although this technology can also ensure two-way communication, but there is an inevitable problem, is the performance problem. The client constantly sends requests to the server. If the number of concurrent requests on the client is too large, the pressure on the server will increase. Therefore, Websocket was born to solve this pain point.

Here are some more nouns:

  • Long pollingThe client sends a message to the serverxhrRequest, the server receives andholdRequest until there is a new messagepushTo the client, the system disconnects the connection. The client then processes thatresponseThen send a new request to the server. And so on.

HTTP1.1 uses long connections by default. If HTTP is used for long connections, the following message is added to the response header: Connection:keep-alive

  • Short polling:

No matter whether the client receives the response data from the server, the client periodically sends requests to the server to check whether the data is updated.

  • A long connectionRefers to the oneTCPThe connection can send multiple packets inTCPIf no packets are sent while the connection is holding, both parties need to send themThe heartbeat packetsTo maintain the connection.

Connection process: Establish connection — data transfer –… Send heartbeat packet, maintain connection. — Data transfer — Close the connection

  • Short connectionWhen the communication parties have data interaction, establish aTCPConnection, disconnect the connection after the data is sent.

Connection process: Establish connection — data transfer — Disconnect –… — Establish a connection — Transfer data — disconnect

Tips

There is a misconception here that the concepts of long and short connections essentially refer to TCP connections at the transport layer, since connections are long by default after HTTP1.1. There is no short connection (HTTP1.0 uses short connections by default), and most short and long connections on the web are essentially TCP connections. HTTP uses the advantage of long connection: when we request a webpage resource, there will be a lot of JS, CSS and other resource files, if the use of short connection, it will open a lot of TCP connections, if the client request number is too large, resulting in too many TCP connections, causing pressure on the server can be imagined.

  • Simplex data can be transmitted in a unique direction and can only be transmitted in a single fixed direction of the sender and receiver.
  • Half duplex means that both parties are both receivers and senders, but only one direction is allowed at a time.
  • Full-duplex: The two devices can send and receive data at the same time.

Tips

Simplex, half-duplex, and full-duplex are all based on the TCP protocol (transport layer) and are not to be confused with the application layer.

3. What is Websocket

Websocket protocol is also based on TCP protocol, is a kind of duplex communication technology, reuse HTTP handshake channel.

The default Websocket request protocol is ws:// and the default port is 80. The request protocol for TLS encryption is WSS ://, port :443.

3.1 the characteristics of

  • Supports browser /Nodejs environment
  • Support for two-way communication
  • Easy to use API
  • Support binary transmission
  • Reduce the amount of data transferred

3.2 Establishing a Connection

Websocket reuses the HTTP handshake channel. The client sends an HTTP request and carries Connection: Upgrade and Upgrade: websocket in the request header. After identifying the header, the server upgrades the protocol and uses the WebSocket protocol for data communication.

Parameters that

  • Request URLRequest server address
  • Request MethodRequest mode (support get/ POST /option)
  • Status Code 101 Switching Protocols

RFC 7231 specification definition

When the 101 request status code is received, it indicates that the server understands and agrees with the client’s request and changes the Upgrade Header field. The server must also generate the corresponding Upgrade value in Response.

  • Connection Sets the upgrade header to notify the server that the request type needs to be upgraded to webSocket. Upgrade_mechanism specification

  • Host Hostname of the server

  • Origin Client hostname:port

  • The sec-websocket-Extensions client initiates a list of requests to the server for the server to select and return in response

  • Sec-websocket-key the value of the sec-websocket-key is calculated using an algorithm defined in the specification, so it is not secure, but can prevent some misdirected WebSocket requests.

  • Sec-websocket-accept calculation formula: 1. Obtain the client request header value: sec-websocket-key 2. Use magic number magic = ‘258eafa5-e914-47DA-95ca-c5ab0dc85b11’ 3. Use SHA1 for encryption calculation. SHA1 (sec-websocket-key + magic) 4. Convert the value to base64

  • Sec-websocket-protocol Specifies a limited number of WebSocket protocols. It can be a list of protocols. The server returns the first supported value in the list in Response.

  • Sec-websocket-version Specifies the WebSocket protocol Version used for communication. Latest version :13, Historical version

  • Upgrade notifies the server that the Upgrade protocol type is Websocket

3.3 Data frame Format

Reference for data format definition: specification RFC6455

0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 +-+-+-+-+-------+-+-------------+-------------------------------+ |F|R|R|R| opcode|M| Payload len | Extended payload length | |I|S|S|S| (4) |A| (7) | (16/64) | |N|V|V|V| |S| | (if payload len==126/127) | | |1|2|3| |K| | | +-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - + | Extended payload length continued, if payload len == 127 | + - - - - - - - - - - - - - - - +-------------------------------+ | |Masking-key, if MASK set to 1 | +-------------------------------+-------------------------------+ | Masking-key (continued) | Payload  Data | +-------------------------------- - - - - - - - - - - - - - - - + : Payload Data continued ... : + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + | Payload Data continued ... | +---------------------------------------------------------------+Copy the code
  • FIN: 1 bit If the bit value is 1, this ismessageThe final fragment (fragment), if 0, this is amessageThe first segment of the.
  • RSV1, RSV2, RSV3: 1 bit Each. The default value is 0. If a non-zero value is received and no negotiation extension definition is performed, the default value is 0websocketThe connection failed.
  • Opcode: 4 bits Based on the opcode (Opcode), parse payload data (Payload data). If an undefined opcode is received, it should be disconnectedwebsocketThe connection.
  • Mask: 1 bit Specifies whether the Payload data is required for the mask operation. If set to 1, then inMasking-keyA mask key is defined and used to invert the payload data (unmask) operation. All data frames sent from the client to the server (frame),mask is set to 1.
  • Payload length: 7 bits, 7+16 bits, or 7+64 bits Indicates the payload data length.
  • Masking-key: 0 or 4 bytes All data frames sent from the client to the server are masked. Mask is 1, and the data payload carries a 4-byte Masking key. If the Mask is 0, there is no Masking-key.
  • Payload data: (x+y) bytes

3.4 Heartbeat Detection

In order to ensure that the long connection between the client and the server is normal, sometimes the server does not trigger the onClose event even if the client connection is broken, which may lead to invalid connection holding. Therefore, a mechanism is needed to ensure that the connection between the two ends is in good condition, and heartbeat detection is such a mechanism. The client sends heartbeat packets to the server at regular intervals, and the server returns a response indicating that the connection is normal.

4. Socket. IO

Socket. IO differs from engine. IO in that socket. IO does not provide connectivity directly, but in the engine.

Socket. IO provides a Namespace concept. When the client creates a new long connection, a new Namespace is assigned to distinguish between them.

According to the flow chart, it can be seen that:

  • There are three ways to create a long connection:websocket,xhr,jsonp. The latter two are simulated using long polling.
  • Long polling means that the client sends it oncerequestWhen the server has a message push, it pushes a messageresponseTo the client. The client receivesresponseAfter that, it will send againrequestThe process is repeated until one end disconnects.
/ / lookup the source code
var parsed = url(uri)
var source = parsed.source
var id = parsed.id
var path = parsed.path
// Find the same room
var sameNamespace = cache[id] && path in cache[id].nsps
If the room number already exists, create a new connection
var newConnection = sameNamespace
// ...
Copy the code

Socket. IO also supports built-in multiplexing, which means that each Packet always belongs to the given namespace and is identified by path (e.g. / XXXX).

Socket. IO can emit a message before the open, and the message will be emitted after the open. Engine. IO must wait until open before sending messages.

Socket. IO also supports reconnection.

5. Socket. IO workflow

What happens when you create a long connection using socket. IO? Let’s enter the text below:

const socket = io('http://localhost', {
  path: '/myownpath'
});
Copy the code

First, socket. IO sends an HTTP request with Upgrade protocol (Connection:Upgrade, Upgrade:websocket) information in the request header, telling the server to prepare to establish a Connection. At this time, the response data returned by the back end. Data format is as follows:

0{"sid":"ab4507c4-d947-4deb-92e4-8a9e34a9f0b2"."upgrades": ["websocket"]."pingInterval":25000."pingTimeout":60000}
Copy the code
  • 0Representative:openlogo
  • sid: session id
  • Upgrades: Type of upgrade protocols
  • pingInterval:pingInterval time of
  • PingTimeout: Checks the connection timeout duration

When the client receives the response, the scoke. IO will determine whether the current client environment supports Websocket. If supported, establish a WebSocket connection, otherwise use long polling(XHR, jSONP) for two-way data communication.

6. Socket. IO protocol parsing

The data format defined in socket. IO protocol is called Pakcet, and each Packet contains the object value of NSP.

Packet

The encoding package can be UTF8 or binary data in the following encoding format:

< package type ID >

Such as:

2probe

Packet type ID is an integer with the following meanings:

  • 0 open When a new transport is opened, the server detects and sends it
  • 1 Close Requests to close the transmission, but does not disconnect the connection
  • 2 pingThe server should return a file containing the same datapongPacket reply
  • 3 pongIssued by the server in response to the clientping packet
  • 4 messageFor real data, the client and server should call in the callbackdata
// The server sends
send('4HelloWorld')
// The client receives the data and invokes the callback
socket.on('message'.function (data) { console.log(data); });
// The client sends
send('4HelloWorld')
// The server receives the data and invokes the callback
socket.on('message'.function (data) { console.log(data); })
Copy the code
  • 5 upgrade 在engine.ioBefore switching the transport, it tests whether the server and client can communicate over the transport. If this test is successful, the client sends an upgrade packet asking the server to flush the cache on the old transport and switch to the new transport.
  • 6 noop noopPacket. Mainly used in receiving incomingwebsocketEnforces polling cycles when connecting.
    1. The client connects through the new transport
    2. Client send2send
    3. The server receives and sends3probe
    4. The client ends and sends5
    5. The server flushes and closes the old transport connection and switches to the new transport connection

7. Socket. IO Family bucket

The difference between

  • Engine.io – Parser Is a JAVASCRIPT parser encoded by the engine. IO protocol. Engine. IO protocol specification

  • socket.io

  • socket.io-client

  • socket.io-parser

  • socket.io-adapter

  • socket.io-redis

  • engine.io

  • engine.io-client