Meteor WebSocket handshake error 400 with nginx - node.js

Question

I managed to deploy meteor on my infrastructure (Webfactions).
The application seems to work fine but I get the following error in the browser console when my application starts:
WebSocket connection to 'ws://.../websocket' failed: Error during WebSocket handshake: Unexpected response code: 400

Answer 1

WebSockets are fast and you don't have to (and shouldn't) disable them.
The real cause of this error is that Webfactions uses nginx, and nginx was improperly configured. Here's how to correctly configure nginx to proxy WebSocket requests, by setting proxy_set_header Upgrade $http_upgrade; and proxy_set_header Connection $connection_upgrade;:
# we're in the http context here
map $http_upgrade $connection_upgrade {
default upgrade;
'' close;
}
# the Meteor / Node.js app server
server {
server_name yourdomain.com;
access_log /etc/nginx/logs/yourapp.access;
error_log /etc/nginx/logs/yourapp.error error;
location / {
proxy_pass http://localhost:3000;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host; # pass the host header - http://wiki.nginx.org/HttpProxyModule#proxy_pass
proxy_http_version 1.1; # recommended with keepalive connections - http://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_http_version
# WebSocket proxying - from http://nginx.org/en/docs/http/websocket.html
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
}
}
This is an improved nginx configuration based on David Weldon's nginx config. Andrew Mao has reached a very similar configuration.
Remember to also set the HTTP_FORWARDED_COUNT environment variable to the number of proxies in front of the app (usually 1).

Answer 2

if you are receiving this error client side in the browser console, you can safely ignore it - it means that your hosting does not support websockets and meteor will fallback to using long polling instead
meteor apps deployed to heroku or any other platform without websockets will get the same error
update:
as of meteor v0.6.4 you can now set the environment variable DISABLE_WEBSOCKETS to prevent this attempt from occurring if you know it will fail
https://github.com/meteor/meteor/blob/devel/History.md
If you set the DISABLE_WEBSOCKETS environment variable, browsers will not attempt to connect to your app using Websockets. Use this if you know your server environment does not properly proxy Websockets to reduce connection startup time.

Answer 3

Concerning SEO: the failing websocket (code 400) also prevents Phantomjs for getting a decent pageload (and doesn't get terminated).
In my case, the new Nginx configuration from Dan prevents the failing of the websockets and lets Phantomjs load the page.

Answer 4

Found this in my search for this error when using AWS Elastic Load Balancer. Setting the environment variable works, but the better solution is to use the TCP protocol on the ELB instead of HTTPS. FYI.

Answer 5

We had the issue with disabled websocket when hosting Rocket Chat. Our users get "Websocket is disabled for this server" error when they tryed to connect to the server from mobile clients for iOS and Android.
Thanks to Dan's post, adding this lines to config helped us:
#websocket support
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
Thus way our config became like this:
map $http_upgrade $connection_upgrade {
default upgrade;
'' close;
}
server {
listen 443 ssl http2;
server_name our_rocketchat_domain_url.com;
ssl_certificate "/etc/letsencrypt/live/our_rocketchat_domain_url.com/fullchain.pem";
ssl_certificate_key "/etc/letsencrypt/live/our_rocketchat_domain_url.com/privkey.pem";
ssl_ciphers our_ciphers_list;
ssl_prefer_server_ciphers on;
ssl_protocols TLSv1.2 TLSv1.3;
access_log /var/log/nginx/our_rocketchat_domain_url.com.access.log;
error_log /var/log/nginx/our_rocketchat_domain_url.com.error.log warn;
location / {
proxy_buffers 16 4k;
proxy_buffer_size 2k;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Real-IP $remote_addr;
proxy_http_version 1.1;
proxy_pass http://ip_of_our_rocketchat:3000/;
#websocket support
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
}
}