How to configure NGINX for WebSocket

Hi,

I have failed to configure my nginx to serve websocket. Please have a look at my configuration files. Let me know what I should change.

My port 8080 is open

PHP

sudo docker ps CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES aee13a77bdb7 zhex900/orocommerce "run.sh" 12 days ago Up 12 days 0.0.0.0:80->80/tcp, 0.0.0.0:443->443/tcp, 0.0.0.0:3088->3088/tcp, 0.0.0.0:8080->8080/tcp orocommerce

1 2 3

sudo docker ps CONTAINER ID        IMAGE                 COMMAND             CREATED             STATUS              PORTS                                                                                      NAMES aee13a77bdb7        zhex900/orocommerce   "run.sh"            12 days ago         Up 12 days          0.0.0.0:80->80/tcp, 0.0.0.0:443->443/tcp, 0.0.0.0:3088->3088/tcp, 0.0.0.0:8080->8080/tcp   orocommerce

This is the javascript error:

PHP

WebSocket connection to 'wss://aws1.orotechnologies.com.au:8080/' failed: WebSocket opening handshake timed out

1	WebSocket connection to 'wss://aws1.orotechnologies.com.au:8080/' failed: WebSocket opening handshake timed out

PHP

app/console clank:server Starting Clank Launching Ratchet WS Server on: 0.0.0.0:8080

1 2 3

app/console clank:server Starting Clank Launching Ratchet WS Server on: 0.0.0.0:8080

PHP

websocket_bind_address: 0.0.0.0 websocket_bind_port: 8080 websocket_frontend_host: '*' websocket_frontend_port: 8080 websocket_backend_host: '*' websocket_backend_port: 8080

1 2 3 4 5 6

websocket_bind_address: 0.0.0.0     websocket_bind_port: 8080     websocket_frontend_host: '*'     websocket_frontend_port: 8080     websocket_backend_host: '*'     websocket_backend_port: 8080

PHP

server { listen 80 default_server; #port_in_redirect off; server_name $host; root /var/www/web; #include /etc/nginx/snippets/letsencrypt.conf; if ( -f /srv/orocrm.maintance ) { return 503 'Sorry, we are on maintenance, please try again after several seconds.'; } index app.php; # redirect to https only when it is not load balance # load balance will use http # if ($remote_addr != 45.76.118.143) { # return 301 https://$host$request_uri; # } try_files $uri $uri/ @rewrite; location @rewrite { rewrite ^/(.*)$ /app.php/$1; } location / { proxy_pass $host:8080; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header Host $host; } # deny access to .htaccess files, if Apache's document root # concurs with nginx's one location ~ /\.ht { deny all; } # Set static files cache lifetime location ~* ^[^(\.php)]+\.(jpg|jpeg|gif|png|ico|css|pdf|ppt|txt|bmp|rtf|js)$ { access_log off; # disable logs expires 1h; # cahe 1h add_header Cache-Control public; } location ~ [^/]\.php(/|$) { fastcgi_split_path_info ^(.+?\.php)(/.*)$; if (!-f $document_root$fastcgi_script_name) { return 404; } fastcgi_pass unix:/var/run/php-fpm.sock; fastcgi_index app.php; include fastcgi_params; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; fastcgi_param PATH_INFO $fastcgi_path_info; fastcgi_param SYMFONY_ENV prod; fastcgi_intercept_errors on; fastcgi_ignore_client_abort off; fastcgi_connect_timeout 30; fastcgi_send_timeout 3600; fastcgi_read_timeout 3600; fastcgi_buffer_size 128k; fastcgi_buffers 4 256k; fastcgi_busy_buffers_size 256k; fastcgi_temp_file_write_size 256k; } } server { server_name $host; listen 443 ssl http2 default_server; listen [::]:443 ssl http2 default_server ipv6only=on; # aws1.orotechnologies.com.au is the host url e.g. app1.orocampus.com.au ssl_certificate /etc/letsencrypt/live/aws1.orotechnologies.com.au/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/aws1.orotechnologies.com.au/privkey.pem; ssl_trusted_certificate /etc/letsencrypt/live/aws1.orotechnologies.com.au/fullchain.pem; include /etc/nginx/snippets/ssl.conf; root /var/www/web; index app.php; try_files $uri $uri/ @rewrite; location @rewrite { rewrite ^/(.*)$ /app.php/$1; } # deny access to .htaccess files, if Apache's document root # concurs with nginx's one location ~ /\.ht { deny all; } # Set static files cache lifetime location ~* ^[^(\.php)]+\.(jpg|jpeg|gif|png|ico|css|pdf|ppt|txt|bmp|rtf|js)$ { access_log off; # disable logs expires 1h; # cahe 1h add_header Cache-Control public; } location ~ [^/]\.php(/|$) { fastcgi_split_path_info ^(.+?\.php)(/.*)$; if (!-f $document_root$fastcgi_script_name) { return 404; } fastcgi_pass unix:/var/run/php-fpm.sock; fastcgi_index app.php; include fastcgi_params; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; fastcgi_param PATH_INFO $fastcgi_path_info; fastcgi_param SYMFONY_ENV prod; fastcgi_intercept_errors on; fastcgi_ignore_client_abort off; fastcgi_connect_timeout 30; fastcgi_send_timeout 3600; fastcgi_read_timeout 3600; fastcgi_buffer_size 128k; fastcgi_buffers 4 256k; fastcgi_busy_buffers_size 256k; fastcgi_temp_file_write_size 256k; } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122

server {     listen       80  default_server;     #port_in_redirect off;     server_name $host;     root /var/www/web;       #include /etc/nginx/snippets/letsencrypt.conf;       if ( -f /srv/orocrm.maintance ) {         return 503 'Sorry, we are on maintenance, please try again after several seconds.';     }       index app.php;     # redirect to https only when it is not load balance     # load balance will use http   #  if ($remote_addr != 45.76.118.143) {   #      return 301 https://$host$request_uri;   #  }     try_files $uri $uri/ @rewrite;     location @rewrite {         rewrite ^/(.*)$ /app.php/$1;     }       location / {         proxy_pass $host:8080;         proxy_http_version 1.1;         proxy_set_header Upgrade $http_upgrade;         proxy_set_header Connection "upgrade";         proxy_set_header Host $host;    }       # deny access to .htaccess files, if Apache's document root     # concurs with nginx's one     location ~ /\.ht {         deny  all;     }       # Set static files cache lifetime     location ~* ^[^(\.php)]+\.(jpg|jpeg|gif|png|ico|css|pdf|ppt|txt|bmp|rtf|js)$ {         access_log off; # disable logs         expires 1h; # cahe 1h         add_header Cache-Control public;     }       location ~ [^/]\.php(/|$) {         fastcgi_split_path_info ^(.+?\.php)(/.*)$;         if (!-f $document_root$fastcgi_script_name) {             return 404;         }         fastcgi_pass unix:/var/run/php-fpm.sock;         fastcgi_index app.php;         include fastcgi_params;         fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;         fastcgi_param  PATH_INFO        $fastcgi_path_info;         fastcgi_param  SYMFONY_ENV      prod;         fastcgi_intercept_errors        on;         fastcgi_ignore_client_abort     off;         fastcgi_connect_timeout         30;         fastcgi_send_timeout            3600;         fastcgi_read_timeout            3600;         fastcgi_buffer_size             128k;         fastcgi_buffers                 4   256k;         fastcgi_busy_buffers_size       256k;         fastcgi_temp_file_write_size    256k;     } } server { server_name $host; listen 443 ssl http2 default_server; listen [::]:443 ssl http2 default_server ipv6only=on;              # aws1.orotechnologies.com.au is the host url e.g. app1.orocampus.com.au ssl_certificate /etc/letsencrypt/live/aws1.orotechnologies.com.au/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/aws1.orotechnologies.com.au/privkey.pem; ssl_trusted_certificate /etc/letsencrypt/live/aws1.orotechnologies.com.au/fullchain.pem; include /etc/nginx/snippets/ssl.conf;   root /var/www/web; index app.php;         try_files $uri $uri/ @rewrite;         location @rewrite {              rewrite ^/(.*)$ /app.php/$1;         }         # deny access to .htaccess files, if Apache's document root     # concurs with nginx's one     location ~ /\.ht {         deny  all;     }       # Set static files cache lifetime     location ~* ^[^(\.php)]+\.(jpg|jpeg|gif|png|ico|css|pdf|ppt|txt|bmp|rtf|js)$ {         access_log off; # disable logs         expires 1h; # cahe 1h         add_header Cache-Control public;     }     location ~ [^/]\.php(/|$) {         fastcgi_split_path_info ^(.+?\.php)(/.*)$;         if (!-f $document_root$fastcgi_script_name) {             return 404;         }         fastcgi_pass unix:/var/run/php-fpm.sock;         fastcgi_index app.php;         include fastcgi_params;         fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;         fastcgi_param  PATH_INFO        $fastcgi_path_info;         fastcgi_param  SYMFONY_ENV      prod;         fastcgi_intercept_errors        on;         fastcgi_ignore_client_abort     off;         fastcgi_connect_timeout         30;         fastcgi_send_timeout            3600;         fastcgi_read_timeout            3600;         fastcgi_buffer_size             128k;         fastcgi_buffers                 4   256k;         fastcgi_busy_buffers_size       256k;         fastcgi_temp_file_write_size    256k;     }   }

Topic

[jderdziakParticipant]

Hello zhex900,

Please see this article for detailed nginx configuration:

https://www.nginx.com/blog/websocket-nginx/

Also try to run:

Shell

app/console clank:server -vvv

1	app/console clank:server -vvv

To see if there is no error messages there.

Regards
Jakub

[zhex900Participant]

Hi tried to follow this blog. But I struggle to fully understand it.

I tried to add this to my port 443 server block. But this gives a http status 400 error. What location should I use?

PHP

location / { # switch off logging # access_log off; # redirect all HTTP traffic to localhost:8080 proxy_pass http://localhost:8080; proxy_set_header X-Real-IP $remote_addr; proxy_set_header Host $host; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # WebSocket support (nginx 1.4) proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

location / {         # switch off logging #        access_log off;           # redirect all HTTP traffic to localhost:8080         proxy_pass http://localhost:8080;         proxy_set_header X-Real-IP $remote_addr;         proxy_set_header Host $host;         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;           # WebSocket support (nginx 1.4)         proxy_http_version 1.1;         proxy_set_header Upgrade $http_upgrade;         proxy_set_header Connection "upgrade";     }

[mmiasnikovParticipant]

Hello, zhex900.

As far as you use secure (WSS) connection, you need to

1) configure reverse proxy before clank server, that will transfer WSS inbound traffic to unsecure local Clank server, namely:

Shell

server { # This is your reqular configuration for SSL connections to website listen 443 ssl; server_name example.com www.example.com ssl_certificate_key /etc/ssl/private/example.com.key; ssl_certificate /etc/ssl/private/example.com.crt.fullchain; ssl_protocols TLSv1.2; ssl_ciphers EECDH+AESGCM:EDH+AESGCM:AES2; # ... # ... Other website instructions here ... # ... # You need to add additional "location" section for Websockets requests handling location /ws { # redirect all traffic to localhost:8080; proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-NginX-Proxy true; proxy_set_header X-Forwarded-Proto $scheme; proxy_pass http://127.0.0.1:8080/; proxy_redirect off; proxy_read_timeout 86400; # enables WS support proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; # prevents 502 bad gateway error proxy_buffers 8 32k; proxy_buffer_size 64k; reset_timedout_connection on; error_log /var/log/nginx/oro_wss_error.log; access_log /var/log/nginx/oro_wss_access.log; } # ... error_log /var/log/nginx/oro_https_error.log; access_log /var/log/nginx/oro_https_access.log; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

server {     # This is your reqular configuration for SSL connections to website     listen 443 ssl;     server_name example.com www.example.com          ssl_certificate_key /etc/ssl/private/example.com.key;     ssl_certificate /etc/ssl/private/example.com.crt.fullchain;     ssl_protocols TLSv1.2;     ssl_ciphers EECDH+AESGCM:EDH+AESGCM:AES2;          # ...     # ... Other website instructions here ...     # ...          # You need to add additional "location" section for Websockets requests handling     location /ws {         # redirect all traffic to localhost:8080;         proxy_set_header Host $http_host;         proxy_set_header X-Real-IP $remote_addr;         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;         proxy_set_header X-NginX-Proxy true;         proxy_set_header X-Forwarded-Proto $scheme;           proxy_pass http://127.0.0.1:8080/;         proxy_redirect off;         proxy_read_timeout 86400;           # enables WS support         proxy_http_version 1.1;         proxy_set_header Upgrade $http_upgrade;         proxy_set_header Connection "upgrade";           # prevents 502 bad gateway error         proxy_buffers 8 32k;         proxy_buffer_size 64k;           reset_timedout_connection on;           error_log /var/log/nginx/oro_wss_error.log;         access_log /var/log/nginx/oro_wss_access.log;     }          # ...          error_log /var/log/nginx/oro_https_error.log;     access_log /var/log/nginx/oro_https_access.log; }

2) correctly route websocket_frontend_… parameters to this reverse proxy URL:

YAML

websocket_bind_address: 0.0.0.0 websocket_bind_port: 8080 websocket_frontend_host: "*" websocket_frontend_port: 443 websocket_frontend_path: "ws" websocket_backend_host: "*" websocket_backend_port: 8080 websocket_backend_path: ""

1 2 3 4 5 6 7 8

websocket_bind_address:  0.0.0.0 websocket_bind_port:     8080 websocket_frontend_host: "*" websocket_frontend_port: 443 websocket_frontend_path: "ws" websocket_backend_host:  "*" websocket_backend_port:  8080 websocket_backend_path:  ""

Actually, there is developer manual for your case How to configure WSS connection

Please, let me know if you still have any questions.

[zhex900Participant]

I think I fixed it!

I have added this to my http block. The error is gone. How do I check if the websocket is working?

PHP

map $http_upgrade $connection_upgrade { default upgrade; '' close; } upstream websocket { server localhost:3088; }

1 2 3 4 5 6 7 8

map $http_upgrade $connection_upgrade {         default upgrade;         '' close;     }       upstream websocket {         server localhost:3088;     }

PHP

websocket_bind_address: 0.0.0.0 websocket_bind_port: 3088 websocket_frontend_host: '*' websocket_frontend_port:3088 websocket_backend_host: '*' websocket_backend_port: 8080

1 2 3 4 5 6

websocket_bind_address: 0.0.0.0     websocket_bind_port: 3088     websocket_frontend_host: '*'     websocket_frontend_port:3088     websocket_backend_host: '*'     websocket_backend_port: 8080

[mmiasnikovParticipant]

Example of test case:

Scenario: Maintenance mode notifications

1) Install OpoPlatform application and configure websockets connection

2) Login as admin (or any other backend user) and go to any admin area page

3) Switch on maintenance mode (by type command app/console lexik:maintenance:lock in server console)

4) On opened in browser OroPlatform admin page must appear flash message with notification

Maintenance mode
The website is currently down for maintenance and cannot respond to your request. It should be back online shortly, please try to re-access in a few minutes.
Sorry for the inconvenience. If you need more information please contact your Administrator.

5) Switch off maintenance mode (by type command app/console lexik:maintenance:unlock in server console)

6) Maintenance notification message must disappear.

But I think it won’t work, because in your case (and as usual) ‘websocket_bind_port’ and ‘websocket_backend_port’ should be the same (websocket_bind_address – it’s where is running Clank server. websocket_backend_… params – it’s where PHP server application send (publish) and receive data. websocket_frontend_… params – it’s where JS client (site) application send and receive data).

[zhex900Participant]

This is a message I get when I turn on maintenance mode. I don’t think this a flash message. I have also change made the websocket_bind_port and websocket_backend_port the same port. Port 8080.

Is this the correct maintenance notification message?

PHP

websocket_bind_address: 0.0.0.0 websocket_bind_port: 8080 websocket_frontend_host: '*' websocket_frontend_port: 3088 websocket_backend_host: '*' websocket_backend_port: 8080 web_backend_prefix: /admin

1 2 3 4 5 6 7

websocket_bind_address: 0.0.0.0     websocket_bind_port: 8080     websocket_frontend_host: '*'     websocket_frontend_port: 3088     websocket_backend_host: '*'     websocket_backend_port: 8080     web_backend_prefix: /admin

[mmiasnikovParticipant]

No, should be exactly flash message – it’s the sense of real-time comet (websocket) connection.

If you set websocket_frontend_port: 3088, then you should configure this port (3088) in your NGINX config to receive SSL requests and then proxy these SSL requests in background to your clank server on 8080 port.

Something like this:

Shell

server { # This is your reqular configuration for SSL connections to website listen 3088 ssl; server_name example.com www.example.com ssl_certificate_key /etc/ssl/private/example.com.key; ssl_certificate /etc/ssl/private/example.com.crt.fullchain; ssl_protocols TLSv1.2; ssl_ciphers EECDH+AESGCM:EDH+AESGCM:AES2; # ... # ... Other website instructions here ... # ... location / { # redirect all traffic to localhost:8080; proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-NginX-Proxy true; proxy_set_header X-Forwarded-Proto $scheme; proxy_pass http://127.0.0.1:8080/; proxy_redirect off; proxy_read_timeout 86400; # enables WS support proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; # prevents 502 bad gateway error proxy_buffers 8 32k; proxy_buffer_size 64k; reset_timedout_connection on; error_log /var/log/nginx/oro_wss_error.log; access_log /var/log/nginx/oro_wss_access.log; } # ... error_log /var/log/nginx/oro_https_error.log; access_log /var/log/nginx/oro_https_access.log; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

server {     # This is your reqular configuration for SSL connections to website     listen 3088 ssl;     server_name example.com www.example.com          ssl_certificate_key /etc/ssl/private/example.com.key;     ssl_certificate /etc/ssl/private/example.com.crt.fullchain;     ssl_protocols TLSv1.2;     ssl_ciphers EECDH+AESGCM:EDH+AESGCM:AES2;          # ...     # ... Other website instructions here ...     # ...          location / {         # redirect all traffic to localhost:8080;         proxy_set_header Host $http_host;         proxy_set_header X-Real-IP $remote_addr;         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;         proxy_set_header X-NginX-Proxy true;         proxy_set_header X-Forwarded-Proto $scheme;         proxy_pass http://127.0.0.1:8080/;         proxy_redirect off;         proxy_read_timeout 86400;         # enables WS support         proxy_http_version 1.1;         proxy_set_header Upgrade $http_upgrade;         proxy_set_header Connection "upgrade";         # prevents 502 bad gateway error         proxy_buffers 8 32k;         proxy_buffer_size 64k;         reset_timedout_connection on;         error_log /var/log/nginx/oro_wss_error.log;         access_log /var/log/nginx/oro_wss_access.log;     }          # ...          error_log /var/log/nginx/oro_https_error.log;     access_log /var/log/nginx/oro_https_access.log; }

[Author]

Replies