How to determine whether the protocol is Websocket in Http Header

[[398343]]

This article is reprinted from the WeChat public account "Learn Front-end in Three Minutes", author sisterAn. Please contact the WeChat public account "Learn Front-end in Three Minutes" to reprint this article.

introduction

First, to answer this question, http determines whether the current protocol needs to be upgraded to websocket by judging whether the header contains Connection: Upgrade and Upgrade: websocket. Let's take a look at the WebSocket protocol and its origin.

WebSocket Origin

Before WebSocket, if two-way communication between the client and the service is required, it needs to be implemented through HTTP polling. HTTP polling is divided into polling and long polling:

Among them, polling means that the browser starts a timer through JavaScript, and then sends requests to the server at fixed intervals to ask the server whether there is any new message. Disadvantages:

• Not real-time enough
• Frequent requests will put great pressure on the server

Long polling means that when a browser sends a request, the server will wait for a while and reply only when there is a message. This mechanism temporarily solves the real-time problem, but it brings new problems:

• A server running in multi-threaded mode will cause most threads to be suspended most of the time, greatly wasting server resources.
• If an HTTP connection has no data transmission for a long time, any gateway on the link may close the connection, but the gateway is beyond our control.

Therefore, HTML5 adds the WebSocket protocol, which can establish an unrestricted two-way communication channel between the browser and the server.

Why can WebSocket connections achieve full-duplex communication but HTTP connections cannot?

In fact, the HTTP protocol is built on the TCP protocol. The TCP protocol itself implements full-duplex communication, but the request-response mechanism of the HTTP protocol limits full-duplex communication. After the WebSocket connection is established, it is actually just a simple provision: Next, we will not use the HTTP protocol for communication, but send data directly to each other.

Advantages of WebSocket:

• Less control overhead: After the connection is established, when the server and client exchange data, the packet header used for protocol control is relatively small
• Stronger real-time performance: Since the protocol is full-duplex, the server can actively send data to the client at any time
• Maintaining connection status: Unlike HTTP, WebSocket needs to establish a connection first, which makes it a stateful protocol, and some state information can be omitted during subsequent communication
• Better binary support: WebSocket defines binary frames, which makes it easier to handle binary content than HTTP.

Supports extensions: WebSocket defines extensions, and users can extend the protocol and implement some customized sub-protocols

WebSocket Protocol

WebSocket uses a Uniform Resource Identifier (URI) of ws or wss, where wss indicates WebSocket using TLS.

ws:// data is not encrypted and is visible to any middleman.

wss:// is a WebSocket based on TLS, similar to HTTPS being HTTP based on TLS). The transport security layer encrypts the data at the sender and decrypts it at the receiver.

http determines whether it needs to be upgraded to the websocket protocol by checking whether the header contains Connection: Upgrade and Upgrade: websocket. In addition, there are other headers:

• Sec-WebSocket-Key: A security key randomly generated by the browser
• Sec-WebSocket-Version : WebSocket protocol version
• Sec-WebSocket-Extensions: Used to negotiate the WebSocket extensions to be used in this connection
• Sec-WebSocket-Protocol ：Protocol

When the server agrees to the WebSocket connection, it returns a response code of 101.

Test address: https://www.websocket.org/echo.html

Once the socket is established, we should listen for events on the socket. There are 4 events in total:

• open : The connection has been established
• message: received data
• error ：WebSocket error
• close : The connection is closed

If we want to send a message, we can use socket.send(data)

 let socket = new WebSocket( "wss://echo.websocket.org" ) 
 
 socket.onopen = function (e) {
  console.log( "[open] Connection established" )
 // Send a message
  socket.send( "My name is an" )
 } 
 
 socket.onmessage = function (event) {
  console.log(`[message] Data received from server: ${event.data}`)
 } 
 
 socket.onclose = function (event) {
 // ...
 } 
 
 socket.onerror = function (error) {
  console.log(`[error] ${error.message}`)
 }

Summarize

WebSocket uses the uniform resource identifier of ws or wss. It determines whether it needs to be upgraded to the websocket protocol by judging whether the header contains Connection: Upgrade and Upgrade: websocket. In addition, it also contains headers such as Sec-WebSocket-Key and Sec-WebSocket-Version. When the server agrees to the WebSocket connection, it returns a response code of 101. Its API is very simple.

method:

• socket.send(data)
• socket.close([code], [reason])

event:

• open
• message
• error
• close

refer to:

WebSocket: https://www.liaoxuefeng.com/wiki/1022910821149312/1103303693824096

WebSocket: https://zh.javascript.info/websocket

You don't know WebSocket: https://juejin.cn/post/6854573221241421838

Source: https://github.com/Advanced-Frontend/Daily-Interview-Question