Shulou(Shulou.com)06/02 Report--

A quick look at WebSocket

Nowadays, many websites use polling technology in order to implement push technology. Polling is when a browser sends HTTP requests to a server at specified intervals (e.g., every 1 second), and the server returns the latest data to the client browser. This traditional model brings obvious disadvantages, that is, the browser needs to constantly send requests to the server, however, HTTP requests may contain long headers, in which the real valid data may only be a small part, obviously this will waste a lot of bandwidth and other resources.

In this case, HTML5 defines the WebSocket protocol, which can better save server resources and bandwidth, and can communicate in real time.

WebSocket A protocol for full-duplex communication over a single TCP connection. This makes it easier to exchange data between the client and the server, allowing the server to actively push data to the client. In the WebSocket API, the browser and server only need to complete a handshake, and the two can directly create a persistent connection and perform two-way data transmission.

The above information is taken from Wikipedia (ht t p s: / / z h . w i ki p e d i a .o r g / w i ki / W e b So cket）

Simply put, WebSocket is to reduce the number of connections between the client and the server, reduce the system resource overhead, only need an HTTP handshake, the entire communication process is established in a connection/state, it also avoids the HTTP non-state, the server will always keep connected with the client, until you close the request, at the same time by the original client initiative to ask, converted to push when the server has information. Of course, it can also do real-time communication, better binary support, support for expansion, better compression effects and other advantages.

Recommend a netizen called Ovear on the WebSocket principle answer, hip-hop style popular science text, simply do not praise! Address: htt p s :/ /w . z hi h u .c o m / q ue s t i o n /2 0 2 1 5 5 61 / a n s w e r/ 4 0 3 1 69 53

What the hell are ws and wss?

Websocket uses the uniform resource identifier ws or wss, similar to HTTP or HTTPS, where wss represents Websocket over TLS, equivalent to HTTPS. For example:

ws://example.com/chatwss://example.com/chat

By default, the WS protocol for Websocket uses port 80; when running on top of TLS, the WSS protocol defaults to port 443. In fact, wss is ws SSL-based secure transmission, the same reason as HTTPS.

If your website is HTTPS protocol, then you can not use ws://, the browser will block the connection, and HTTPS does not allow HTTP requests, as shown below:

Mixed Content: The page at 'https://domain.com/' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://x.x.x.x:xxxx/'. This request has been blocked; this endpoint must be available over WSS.

In this case, there is no doubt that we need to use wss:\\security protocol, we can not simply change ws:\\to wss:\\line? Then try it.

It's been corrected, it's been reported incorrectly!!!

VM512:35 WebSocket connection to 'wss://IP Address: PortNumber/websocket' failed: Error in connection establishment: net::ERR_SSL_PROTOCOL_ERROR

Obviously SSL protocol error, indicating that the certificate problem. Remember, at this time we have always taken the IP address + port number this way to connect to WebSocket, there is no certificate at all, and you also need to use IP address + port number to connect to WebSocket in the generated environment? Definitely not, ah, to use the domain name way to connect WebSocket ah.

Nginx configuration domain name support WSS

No nonsense, directly in the configuration HTTPS domain name position to add the following configuration:

location /websocket { proxy_pass http://backend; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade";}

Then take the domain name to try again, no accident will see 101 status code:

This is done, in HTTPPS domain name connection WebSocket, you can have fun playing.

Explain Nginx configuration a little bit

Nginx has supported WebSocket since version 1.3 and can do reverse proxy and Load Balancer for WebSocket applications.

WebSocket is different from HTTP, but the handshake in WebSocket is compatible with the handshake in HTTP. It uses the Upgrade protocol header in HTTP to upgrade the connection from HTTP to WebSocket. When the client sends a Connection: When the Upgrade request header is intercepted, Nginx does not know, so when the Nginx proxy server intercepts an Upgrade request from a client, it needs to explicitly set the Connection and Upgrade header information, and use 101 (exchange protocol) to return a response, establishing a tunnel between the client and the proxy server and the backend server to support WebSocket.

Of course, it should also be noted that WebSockets are still affected by Nginx's default proxy_read_timeout of 60 seconds. This means that if you have a program that uses WebSockets but doesn't send any data for more than 60 seconds, you'll either need to increase the timeout or implement a ping message to stay in touch. The ping workaround has the added benefit of discovering if a connection has been accidentally closed.

For more detailed documentation, see the official documentation of Nginx: ht t p :/ / n g i n x. o r g /e n / d o cs / h t t p/ w e bs o c k et . html

summarize

This article mainly understands the basic principle of WebSocket and some uses, and solves the pit encountered in the actual development and use process, the problem of using wss protocol under HTTPS, and the use of domain name to establish a connection with Nginx, do not use IP address + port number to connect WebSocket, because this method is not elegant enough.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.