nginx reverse proxy webSocket configuration

I recently used the webSocket protocol when working on a project, and webSocket was used in the WeChat applet. When using the wss protocol in the WeChat applet, the port cannot be set, and the default port 443 can only be used. My https is already listening to port 443. If webSocket is to listen to port 443, it will definitely not work. Find a way to solve it. So I thought of two ways to solve it. One solution is to deploy webSocket to another server, which is too expensive. Another way is to use nginx reverse proxy.

Because the webSocket protocol is upgraded based on the http protocol (see the figure below), you can use nginx reverse proxy webSocket.

From here As can be seen from the picture, the webSocket connection is established based on the http protocol.

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

Children’s shoes who are familiar with HTTP may have discovered that there are just a few more things in this handshake request similar to the HTTP protocol.

Upgrade: websocket
Connection: Upgrade

This is the core of Websocket. Tell Apache, Nginx and other servers: I initiated the Websocket protocol.

Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13

First of all, Sec-WebSocket-Key is a Base64 encode value, which is randomly generated by the browser. It tells the server: Peat, don’t fool me, I want to verify whether you are really a Websocket assistant. .

Finally, Sec-WebSocket-Version tells the server the Websocket Draft (protocol version) used. At the beginning, the Websocket protocol was still in the Draft stage, and there were all kinds of weird protocols, and there were also There are many strange and different things, such as Firefox and Chrome using different versions. At the beginning, there were too many Websocket protocols, which was a big problem. . But it’s okay now. It has been settled on a thing that everyone uses

Then the server will return the following things, indicating that the request has been accepted and the Websocket has been successfully established!

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

This is the last area responsible for HTTP. Tell the client that I have successfully switched the protocol~

Upgrade: websocket
Connection: Upgrade

is still fixed and tells the client that the Websocket protocol is about to be upgraded. At this point, HTTP has completed all its work, and the next step is to proceed completely in accordance with the Websocket protocol.

Once you understand the principle of the protocol, you can proceed to the next step.

First, nginx configures the https certificate.

The server certificate was configured by the boss, so I used it directly. . Check it yourself if needed. 0.0

Add the following configuration to the service node of the nginx configuration file

location /wss
        {
                 proxy_pass http://127.0.0.1:8888;
                 proxy_http_version 1.1;
                 proxy_set_header Upgrade $http_upgrade;
                 proxy_set_header Connection "Upgrade";
                proxy_set_header X-Real-IP $remote_addr;
         }

Explain the parameters

/wssThis is Just start by telling Nginx the URL to be proxied. Now my setting is wss. When I access my server https://abc.com/wss, Nginx will map my request to the local port 8888.

proxy_pass The URL to be proxied to, my proxy is to port 8888 of this machine.

proxy_http_version http version used when proxying.

Here comes the key point:

Key parameters of proxy webSocket

proxy_set_header Upgrade Set the Upgrade of the http request header during proxy to the request of the original http request Header, the request header of the wss protocol is websocket

proxy_set_header Connection. Because of the wss protocol of the proxy, the Connection of the http request header is set to Upgrade

proxy_set_header X-Real-IP sets the original http request to the proxy IP, fill in $remote_addr

As for the response parameters of the websocket protocol, you don’t need to worry about it during reverse proxy.

At this point, the configuration of Nginx reverse proxy webSocket is completed. Restart Nginx, try connecting with websocket, and fill in wss://abc.com/wss in the original wss address. If the websocket is successfully connected, it means that the Nginx reverse proxy websocket has been successful.

Summary

The current configuration is only the configuration when reverse proxying to this machine. If you want to reverse proxy to other hosts, the proxy may cross domains. The problem is that cross-domain configuration needs to be done in the Nginx reverse proxy.

Thinking

You can see this paragraph in the Nginx configuration file

location ~ .php$ {
      root html;
      fastcgi_pass 127.0.0.1:9000;
      fastcgi_index index.php;
      fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
      include fastcgi_params;
}

This is the php configuration file in Nginx, let me wipe it, how can I It looks so familiar, this configuration list is so similar to the websocket reverse proxy just now. I found out by searching the Internet that when Nginx handles PHP type requests, it sends the request to the fastcgi management process. The fascgi management process selects the cgi sub-process processing result and returns it to nginx, and php-fpm is a PHP FastCGI manager. nginx itself cannot handle PHP. It is just a web server. When a request is received, if it is a PHP request, it is sent to the PHP interpreter for processing and the result is returned to the client. Therefore, when Nginx handles PHP type requests, it is essentially implemented through the reverse proxy function.

We can expand our thinking and use Nginx reverse proxy to achieve more functions, such as proxying Tomcat

location /Tomcat
        {
                 proxy_pass http://127.0.0.1:8080;
                 proxy_http_version 1.1;
                proxy_set_header X-Real-IP $remote_addr;
         }

Of course, we can also use Nginx reverse proxy to achieve load balancing. I still want to do this. I haven’t tried it yet, I will add more when I use it in the future.

The above is the detailed content of nginx reverse proxy webSocket configuration. For more information, please follow other related articles on the PHP Chinese website!