Nginx learning reverse proxy WebSocket configuration example

write at the beginning

Last year, I made an APP for scoring competitions. For specific needs, teachers in the same group can communicate with each other, and notify the same group members in time, what operations other team members have performed (of course, this is only for specific operations).

Implementation plan

Using the relatively mature WebSocket technology at present, the WebSocket protocol provides a choice for creating webapps that require real-time two-way communication between the client and the server. Part of HTML5, WebSocket can make development of such apps much easier than the original method of developing such apps. Most of the current browsers support WebSocket, such as Firefox, IE, Chrome, Safari, Opera, and more and more server frameworks now also support WebSocket.

WebSocket Cluster

In the actual production environment, multiple WebSocket servers must have high performance and high availability, so the WebSocket protocol needs a load balancing layer. NGINX supports WebSocket since 1.3, which can be used as a reverse proxy and load for WebSocket programs balanced.

Nginx configuration

Note: According to the official document, Nginx supports websocket reverse proxy only after version 1.3, so if you want to use the function that supports websocket, you must upgrade to version 1.3 or later

NGINX supports WebSockets by allowing a tunnel to be established between the client and the backend server. In order for NGINX to send an Upgrade request from a client to a backend server, the Upgrade and Connection headers must be set explicitly.

Code example:

upstream wsbackend { server 127.0.0.1:8080; server 127.0.0.1:8081;
 } server { listen 80; server_name ws.52itstyle.com; location / { proxy_pass   http://wsbackend; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade";
         }
 }

Front-end configuration:

$(function(){
     socket.init();
 }); //Nginx reverse proxy implements websocket var basePath = "ws://ws.52itstyle.com//acts_competition/";
 socket = { webSocket : "", init : function() { if ('WebSocket' in window) {
             webSocket = new WebSocket(basePath+'webSocketServer');
         } else if ('MozWebSocket  ' in window) {
             webSocket = new MozWebSocket(basePath+"webSocketServer");
         } else {
             webSocket = new SockJS(basePath+"sockjs/webSocketServer");
         }
         webSocket.Onerror= function(event) { //alert("Websockt connection error, please refresh the page and try again!") };
         webSocket.Onopen= function(event) {

         };
         webSocket.Onmessage= function(event) {

                 };
     }, sendData : function(data) {
         webSocket. send(data);
     },
 }

Finally, just restart Nginx.

Challenges Faced by Reverse Proxy Servers Supporting WebSockets

• WebSocket is end-to-end, so when a proxy server intercepts an Upgrade request from a client, it needs to send its own Upgrade request to the backend server, also including the appropriate headers.

• Because WebSocket is a long-lived connection, unlike HTTP’s typical short-lived connections, the reverse proxy server needs to allow connections to remain open instead of closing them when they appear to be idle.