Location>code7788 >text

webSocket protocol

Popularity:805 ℃/2024-10-22 17:53:25

What is websocket?

Before understanding websockets let's first talk about HTTP.
First of all, we imagine that most of the users in the operation of the web page, the user clicks a button on the page front-end will be sent to the back-end server to send an HTTP request , the back-end to return an HTTP response.
But this approach is all predicated on the premise that the user's own request (clicking on the page) is too passive, and the server only responds after the request!

So how can I get the server to send the user an unsolicited message so he can be a little more proactive?
webSocket was born

Pain points solved by webSocket

What was the solution when using HTTP for this scenario in the past when there were no webSockets?
Way one:
Allow users to receive information and make changes to a web page without doing anything.
The previous way is in the front-end code constantly send HTTP requests to the back-end server at regular intervals, and the server receives the request and sends the corresponding message to the front-end accordingly.
But this is a pseudo-server push who is not server-initiated, but ratherFront-end sneak requests to the serverIt's just imperceptible to the user.
Such as code scanning login will be used in this way, in this operation the front-end actually do not know whether the user has scanned the code, just constantly with 1 to 2 seconds to send a request to the back-end to ask. (HTTP Timed Polling)

Way two:
Like the above way we enter the developer mode in the web page will see a lot of HTTP requests backend server records, which consumes bandwidth at the same time will also increase the burden on the server. Is there a better way to solve this problem?
There is! Very much so! Very much so! And it's very inexpensive to implement! Also known as "long polling."
We change the timeout to something longer like 30 seconds, and within 30 seconds as soon as the server receives the scan request it will immediately return to the client for login.
If it takes more than 30 seconds it is considered a timeout but the next request is sent immediately. This is a perfect solution to the number of HTTP requests and thus reduces the server's overhead.
So this mechanism of initiating a request and waiting for feedback from the server for a longer period of time is called long polling mechanism.

Long polling is also used when consumers fetch data in the popular message queue rocketMQ.
And this technique of pushing data from the server to the browser without the user's perception is server push technology.

But! But! But!Both approaches are still essentially front-end active server passive!
So a new application-layer webSocket protocol based on TCP was designed

How webSocket is used

In the normal access to the page will usually start with the HTTP protocol handshake, when you need to use the webSocket connection will be in the HTTP request to add a special Header header
As:

connection: Upgrade is used to indicate that the browser wants to upgrade the protocol.
Upgrade: webSocket is used to indicate that the client wants to upgrade to the webSocket protocol.
Sec-WebSocket-Key:base64

This is also supported by the server then it will be upgraded to the webSocket protocol and then the webSocket handshake process will start to take place
According to the Sec-WebSocket-Key algorithm to come up with a new string, put it in the HTTP ses-ws-accept and add 101 back to the browser.

HTTP/1.1 101 Switching Protocols //101Refers to protocol switching
ses-ws-accept
Upgrade: websocket
Connection: Upgrade

The browser uses the same algorithm to convert the BASE64 code into another string, and if it matches the string passed from the server then the authentication passes.

webSocket and HTTP

They're both TCP-based protocols.
webSocket after three TCP handshake three times to upgrade the HTTP protocol into the webSocket protocol, the subsequent two sides will communicate through the webSocket protocol

Packets are called frames in webSocket, the following figure shows the data format of a frame

  • opcode
    Here it is labeled what type of data frame this is. For example, 1 is the text type (String type), 2 is a binary packet, and 8 is a close connection signal.
  • payload
    The length of the data you want to transfer, in bytes

webSocket perfectly inherits TCP's duplex capability and also provides a solution to sticky packets, which is suitable for most scenarios where servers and clients interact frequently.
E.g. web chat, small program games, coordinated office software
Supplement:
websock only in the process of establishing a connection will use HTTP, after upgrading to the webSocket protocol has nothing to do with HTTP, HTTP only played a brief role in the toolman.