Behind a reverse proxy

You will find below the configuration needed for deploying a Socket.IO server behind a reverse-proxy solution, such as:

In a multi-server setup, please check the documentation here.

NginX

Content of /etc/nginx/nginx.conf:

  1. http {
  2.   server {
  3.     listen 80;
  5.     location / {
  6.       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  7.       proxy_set_header Host $host;
  9.       proxy_pass http://localhost:3000;
  11.       proxy_http_version 1.1;
  12.       proxy_set_header Upgrade $http_upgrade;
  13.       proxy_set_header Connection "upgrade";
  14.     }
  15.   }
  16. }

Related:

If you only want to forward the Socket.IO requests (for example when NginX handles the static content):

  1. http {
  2.   server {
  3.     listen 80;
  4.     root /var/www/html;
  6.     location /socket.io/ {
  7.       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  8.       proxy_set_header Host $host;
  10.       proxy_pass http://localhost:3000;
  12.       proxy_http_version 1.1;
  13.       proxy_set_header Upgrade $http_upgrade;
  14.       proxy_set_header Connection "upgrade";
  15.     }
  16.   }
  17. }

Or with a custom path:

  1. http {
  2.   server {
  3.     listen 80;
  4.     root /var/www/html;
  6.     location /my-custom-path/ {
  7.       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  8.       proxy_set_header Host $host;
  10.       proxy_pass http://localhost:3000;
  12.       proxy_http_version 1.1;
  13.       proxy_set_header Upgrade $http_upgrade;
  14.       proxy_set_header Connection "upgrade";
  15.     }
  16.   }
  17. }

In that case, the server and the client must be configured accordingly:

Server

  1. import { Server } from "socket.io";
  3. const io = new Server({
  4.   path: "/my-custom-path/"
  5. });

Client

  1. import { io } from "socket.io-client";
  3. const socket = io({
  4.   path: "/my-custom-path/"
  5. });

Apache HTTPD

Content of /usr/local/apache2/conf/httpd.conf:

  1. Listen 80
  3. ServerName example.com
  5. LoadModule mpm_event_module             modules/mod_mpm_event.so
  7. LoadModule authn_file_module            modules/mod_authn_file.so
  8. LoadModule authn_core_module            modules/mod_authn_core.so
  9. LoadModule authz_host_module            modules/mod_authz_host.so
  10. LoadModule authz_groupfile_module       modules/mod_authz_groupfile.so
  11. LoadModule authz_user_module            modules/mod_authz_user.so
  12. LoadModule authz_core_module            modules/mod_authz_core.so
  14. LoadModule headers_module               modules/mod_headers.so
  15. LoadModule lbmethod_byrequests_module   modules/mod_lbmethod_byrequests.so
  16. LoadModule proxy_module                 modules/mod_proxy.so
  17. LoadModule proxy_balancer_module        modules/mod_proxy_balancer.so
  18. LoadModule proxy_http_module            modules/mod_proxy_http.so
  19. LoadModule proxy_wstunnel_module        modules/mod_proxy_wstunnel.so
  20. LoadModule rewrite_module               modules/mod_rewrite.so
  21. LoadModule slotmem_shm_module           modules/mod_slotmem_shm.so
  22. LoadModule unixd_module                 modules/mod_unixd.so
  24. User daemon
  25. Group daemon
  27. ProxyPass / http://localhost:3000/
  28. RewriteEngine on
  29. RewriteCond %{HTTP:Upgrade} websocket [NC]
  30. RewriteCond %{HTTP:Connection} upgrade [NC]
  31. RewriteRule ^/?(.*) "ws://localhost:3000/$1" [P,L]
  33. ProxyTimeout 3

Related:

Node.js http-proxy

Installation: npm i http-proxy

  1. const httpProxy = require("http-proxy");
  3. httpProxy
  4.   .createProxyServer({
  5.     target: "http://localhost:3000",
  6.     ws: true,
  7.   })
  8.   .listen(80);

Documentation

Caddy 2

Content of Caddyfile for Caddy 2

  1. example.com {
  2.   rewrite /path /path/
  3.   handle_path /path/* {
  4.     rewrite * /socket.io{path}
  5.     reverse_proxy localhost:3000
  6.   }
  7. }

Related