WebSocket combined with Nginx for domain name and WSS protocol access

Get a quick look at WebSocket

Today, many Web sites are polled for the technology they use to implement push technology. Polling is at a specific time interval (such as every 1 seconds), the browser makes an HTTP request to the server, and then the server returns the latest data to the client's browser. This traditional pattern has the obvious disadvantage that the browser needs to constantly make requests to the server, however the HTTP request may contain a longer header, where the really valid data may be a small part, obviously wasting a lot of bandwidth and other resources.
In this case, HTML5 defines the WebSocket protocol to better conserve server resources and bandwidth, and to communicate in real time.
WebSocket a protocol for full-duplex communication on a single TCP connection. Makes data exchange between client and server easier, allowing the service side to proactively push data to the client. In the WebSocket API, the browser and server only need to complete a handshake, the two directly can create a persistent connection, and two-way data transmission.

The above information is excerpted 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 client and server, reduce system resource overhead, only need one HTTP handshake, the entire communication process is established in a connection/state, also avoids the non-state of HTTP, the service side will remain connected with the client, Until you close the request, at the same time by the original client actively asked to convert to the server has information when the push. Of course, it can also do real-time communication, better binary support, support extensions, better compression, and so on.

Recommend a know up called ovear of the netizen about WebSocket principle answer, hip-hop style popular, simply do not praise! Address: htt P S://w w 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 is ws and WSS?

Websocket uses ws or wss the Uniform Resource identifier, similar to HTTP or HTTPS , which wss represents the Websocket above TLS, is equivalent to HTTPS. Such as:

Ws://example.com/chatwss://example.com/chat

By default, the WS protocol for Websocket uses port 80, and the WSS protocol uses 443 ports by default when running over TLS. In fact, WSS is the WS SSL-based secure transmission, and HTTPS as the same kind of truth.

If your site is HTTPS protocol, then you can not use, the ws:// browser will block off the connection, and HTTPS does not allow the same HTTP request, such as:
650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/539095/201706/539095-20170622132037304-957589823. PNG "alt=" Ws_https "style=" border:0px; "/>

Mixed content:the page at ' https://domain.com/' is 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 is available over WSS.

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

Changed, Error!!!
650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/539095/201706/539095-20170622132057038-755170502. PNG "alt=" Wss_ip "style=" border:0px; "/>

vm512:35 WebSocket connection to ' WSS://IP address: Port number/websocket ' Failed:error in connection Establishment:net::err_ssl_ Protocol_error

Obviously the SSL protocol error, the description is the certificate problem. Remember, this is the way we have been to IP地址 + 端口号 connect the WebSocket, this does not have a certificate exists well, besides the generation of the environment you also want to use IP地址 + 端口号 this way to connect WebSocket? Definitely not, to use the domain name method to connect WebSocket.

Nginx config domain name support WSS

No nonsense, directly in the configuration HTTPS domain name 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 again connect try, no accident will see 101 status code:
650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/539095/201706/539095-20170622132017570-2009453161. PNG "alt=" upgrade_101 "style=" border:0px; "/>

This completes, in Httpps under the domain name way connection WebSocket, can happily play.

Explain the Nginx configuration a little bit
Nginx has been supporting WebSocket since version 1.3 and can do reverse proxy and load balancing for WebSocket applications.
The WebSocket and HTTP protocols are different, but the handshake in WebSocket is compatible with the handshake in HTTP, which uses the Upgrade protocol header in HTTP to upgrade the connection from HTTP to WebSocket, and when a client sends a Connection: Upgrade request header, Ng Inx is not known, so when the Nginx proxy server intercepts a request from a client, it is Upgrade necessary to explicitly set the Connection Upgrade header information and return the response using 101 (Exchange Protocol) to establish a tunnel between the client and the proxy server and the back-end server to support WebSocket.

Of course, it is also important to note that WebSockets is still affected by the Nginx default of 60 seconds of proxy_read_timeout. This means that if you have a program that uses WebSockets but may not send any data for more than 60 seconds, you either need to increase the timeout or implement a ping message to keep in touch. There are additional benefits to using Ping's workaround to find out if the connection was accidentally closed.

For more specific documentation, see Nginx official documentation: HT T P://n g i n x. o r g/e n/d o cs/h t p/w e bs o C K et. Html

Summarize

This article mainly to understand the basic principles of WebSocket and some uses, and to solve in the actual development of the use of the pit, HTTPS using the WSS protocol, and with Nginx use domain name method to establish a connection, do not use IP地址 + 端口号 the connection WebSocket, Because this approach is not elegant enough.

WebSocket combined with Nginx for domain name and WSS protocol access