An overview of the

This article is the first WebSocket series, mainly introduces the basic protocol knowledge and API related to WebSocket. Due to the chaotic distribution of WebSocket in MDN, it is not easy for beginners to get started. Therefore, this paper summarizes the relevant basic knowledge and usage methods.

The main contents of this paper are as follows:

  • This section describes basic concepts of WebSocket
  • Initial reading of the WebSocket protocol
  • WebSocket related API analysis
  • Use of WebSocket in online projects

In this article, you will learn the basics of WebSocket and how it is used in an online environment.

WebSocket is introduced

WebSockets are an advanced technology for creating bidirectional sessions between servers. With this API you can send messages to the server and receive event-driven responses without polling the server for data.

Above is the description of WebSocket in MDN. Two-way session means that both the client and the server can transfer data to each other through WebSocket. That is, the server can push data to the client, and the client can also transfer data through WebSocket.

Why use WebSocket

When not using WebSocket, if we need to establish a long connection, there are several methods:

  • polling
  • Long polling (common)
  • SSE(Server Send Event)

Below, we carry on brief introduction to these several.

polling

Polling is one of the earliest ways to simulate long connections on the client side. It simulates the client sending data to the server by sending HTTP requests periodically from the client, and the data on the server is returned after the client sends HTTP requests.

This approach allows the client data to arrive almost in real time, but the downside is obvious: the server data needs to be returned only after the client requests it. If HTTP requests are spaced too short, it can cause a lot of network overhead; If the interval is too long, this will cause the data to not be delivered in a timely manner.

Long polling

Long polling is an improvement on polling. When the client sends an HTTP request and the server receives it, the server does not return the request. Within a certain amount of time (typically 30 seconds, because HTTP generally judges timeouts to be 30 seconds), if the server has no data, it responds to the request; When the server has data to send, it immediately passes the data to the client through the response to the HTTP request. After receiving the response, the client immediately initiates the next HTTP request.

This scheme can solve the problem that the server data cannot be transferred in time in polling, but the problem that the network cost is too high still cannot be solved.

SSE(Server Send Event)

SSE is a new protocol for the server to push data to the client. It realizes single data push through SSE protocol. The disadvantage of SSE is that data can only be transferred from the server to the client, but not from the client to the server.

WebSocket solves this problem

WebSocket can effectively solve the following problems:

  1. Bandwidth issues: Websockets have smaller protocol headers than HTTP and are delivered on demand.
  2. Data real-time issues: WebSocket can deliver data in real time with less latency compared to polling and long polling.
  3. State issues: WebSocket can maintain a specific state after establishing a connection, as opposed to HTTP stateless requests.

Other benefits can be found in Wikipedia.

The WebSocket protocol

Now that you know why WebSocket is needed, let’s take a look at the WebSocket protocol.

The WebSocket protocol is upgraded through HTTP. You only need to add two handshakes on the basis of HTTP to establish a WebSocket connection (if SSL encryption is required, SSL handshake is also required). For details about the handshake, see the WebSocket document. The following Header fields are briefly introduced.

The request Header

The request Header is as follows:

GET /chatHTTP / 1.1Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Origin: http://example.com
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version13:Copy the code

Among them:

  • Host: server.example.com: indicates the WebSocket address to be connected.
  • Connection: Upgrade: The HTTP connection needs to be upgraded.
  • Upgrade: websocket: Updates an HTTP connection to a WebSocket connection.
  • Sec-WebSocket-Key:dGhlIHNhbXBsZSBub25jZQ==: WebSocket connection key generated by the client.
  • Sec-WebSocket-Protocol: chat, superchat: Specifies which protocols are acceptable to the client.
  • Sec-WebSocket-Version: 13: WebSocket version number.

The response headers

HTTP / 1.1101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
Sec-WebSocket-Protocol: chat
Copy the code

Among them:

  • Upgrade: websocketConfirm that the HTTP connection is upgraded to a WebSocket connection.
  • Connection: Upgrade: Confirm to upgrade the HTTP connection.
  • Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo: Server Indicates the server key generated based on the connection key of the client.
  • Sec-WebSocket-Protocol: chat: Indicates the selected WebSocket protocol.

The WebSocket API is introduced

With a preliminary understanding of the WebSocket protocol, let’s look at how to use WebSocket in specific scenarios.

There are not many WebSocket apis, so let’s use them in the order they are used:

  • Establish a connection
  • Messages are received
  • Send a message
  • Close the connection

To introduce one by one, the specific MDN data can be seen here.

Establish a connection

The WebSocket establishes a connection by initializing the instance and confirms the connection through the open event callback function, as shown in the following example:

const webSocket = new WebSocket('ws://server.example.com');

webSocket.addEventListener('open', (event) => {
    // The connection was successfully established
});
Copy the code

When WebSocket establishes a WS connection, the URL can be a domain name or an IP address. However, when the connection is WSS (encrypted WebSocket), the URL must be a domain name, because a certificate needs to be configured for the domain name.

Messages are received

WebSocket receives messages through message events.

socket.addEventListener('message'.function (event) {
    console.log('Message from server', event.data);
});
Copy the code

WebSocket can pass String, ArrayBuffer, and Blob data types, so it can be any one of them when receiving a message. Of these, String and ArrayBuffer are used the most.

  • If it is a String, it can be converted directly to a String handler, such as JSON.

  • If it is of the binary ArrayBuffer type, you will need to use the DataView for processing, which will be covered in the second article of this series.

Send a message

WebSocket uses the send method to send messages.

webSocket.send(data);
Copy the code

The data field in the example could also be one of the three data types described in the received message as String, ArrayBuffer, or Blob. Blob is a type of file data type that I won’t go into here. The ones we use most are Strings and ArrayBuffers.

  • StringThe type only needs to be passed a string tosendMethod as an argument.
  • ArrayBufferType requires passing an ArrayBuffer object as an argument, which is also covered in part 2 of this series.

Close the connection

Passive close

When the server actively closes the WebSocket connection, it sends a close packet to the client through the WebSocket, and the WebSocket close event is triggered.

webSocket.addEventListener('close', (closeEvent) => {
    
});
Copy the code

Note: WebSocket connections are not closed passively when the network is disconnected because no closed packets are received.

Take the initiative to close

The client can actively close the long connection using the close method provided by WebSocket.

webSocket.close();
Copy the code

Currently this method takes two parameters (not supported in some versions, see the MDN documentation for details) :

  • The first parameter indicates the status number of the closed connection. The default is 1000, indicating that the connection is closed properly.
  • The second argument, the closure reason, is a UTF-8 text no longer than 123 bytes.

conclusion

This article mainly introduces the basic knowledge of WebSocket.

Through the WebSocket long connection, the client and server can conduct a large amount of data transfer without causing related performance problems, which brings great functionality enhancement to the Web side. At present, the Web side can use WebSocket to develop IM related functions, or real-time collaboration and other functions that require a large amount of data interaction with the server side, and do not need to use the Hack method of long polling as before to achieve.

Details of how to use it and how to use it online will be covered in the next few blog posts in this series.