How to proxy web sockets with Nginx ?

What are the websocket’s headers that have to be configured ?

First of all we have to know the two types of HTTP headers :

1- End to end headers : Which must be transmitted to the ultimate recipient of a request or response.

2- Hop by Hop headers : Is getting transferred between intermediate points, so those headers are not stored by caches or forwarded by proxies .

Check here to read about Hop by hop headers.

So as a Note:

Web Sockets rely on hop by hop headers especially( `Connection` and `Upgrade`) , and as we just knew that those headers can’t be forwarded through proxies

So we have to make sure in our server configuration that we forward them !.

Let’s get our hands dirty with the configuration:

Go to your terminal:

vim /etc/nginx/conf.d/your-website.com.conf

1- This how Nginx configuration looks like :

Want to read this story later? Save it in Journal.

server {
 
  listen        80;
  listen        [::]:80
  server_name   your-website.com
  location / {
   proxy_pass "http://localhost:8000";
  }
  error_page  404  /404.html;
   location = /40x.html{
   }
  error_page  500 502 503 504 /50x.html;
   location = /50x.html{
  } 
}

2- Let’s add socket io configuration to it, so the file will become like :

server {
 
  listen        80;
  listen        [::]:80
  server_name   your-website.com
  
  #this where socket io will be handling the request
  location /socket.io/ {
    proxy_pass "http://localhost:8000/socket.io/";
  }
  location / {
   proxy_pass "http://localhost:8000";
  }
  error_page  404  /404.html;
   location = /40x.html{
   }
  error_page  500 502 503 504 /50x.html;
   location = /50x.html{
  } 
}

3- Now we have to add the headers(connection and upgrade) to the socket io configuration, so the file will look like :

server {
 
  listen        80;
  listen        [::]:80
  server_name   your-website.com
  
  #this where socket io will be handling the request
  location /socket.io/ {
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_pass "http://localhost:8000/socket.io/";
  }
  location / {
   proxy_pass "http://localhost:8000";
  }
  error_page  404  /404.html;
   location = /40x.html{
   }
  error_page  500 502 503 504 /50x.html;
   location = /50x.html{
  } 
}

4- We have to add the HTTP version

explicitly we need to set the http version to 1.1 not 1.0

server {
 
  listen        80;
  listen        [::]:80
  server_name   your-website.com
  
  #this where socket io will be handling the request
  location /socket.io/ {
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_pass "http://localhost:8000/socket.io/";
  }
  location / {
   proxy_pass "http://localhost:8000";
  }
  error_page  404  /404.html;
   location = /40x.html{
   }
  error_page  500 502 503 504 /50x.html;
   location = /50x.html{
  } 
}

by the last previous change, we can say that we have the minimal configuration to have web socket request properly passed.

Now let’s see if the configuration is correct, go to the terminal and run

nginx -t

You should get that the syntax is ok as the following :

nginx: configuration file /etc/nginx/nginx.conf test is successful

In the end we have to restart nginx :

systemctl restart nginx

then run the following command to get the status of nginx:

systemctl status nginx

That’s it!.

You can also find more tech posts on my tech blog:

Thingy.dev

📝 Save this story in Journal.

👩‍💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.