Meteor WebSocket handshake error 400 with nginx

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

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 2

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 3

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 4

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.