Cloudflare websocket reconnecting

Configuration
1

My setup: Cloudflare (https) → nginx (https) → home-assistant (https)

When accessing my site through cloudflare’s free account I get constant “reconnecting” toaster pop-up messages which causes the page to refresh. This happens ever 30~45 seconds and is very annoying. Under web-developers tools in chrome I see the following happening:

Request URL: wss://hass.example.com/api/websocket
Request Method: GET
Status Code: 521 Origin Down

Immediately following by a successful request:

Request URL: wss://hass.example.com/api/websocket
Request Method: GET
Status Code: 101 Switching Protocols

When I take Cloudflare out of the picture and hit nginx directly I do not see any 521 errors and the user experience is perfect.

For reference my nginx config is as follows:

}
events {
worker_connections 1024;
# multi_accept on;
}

http {
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
include /etc/nginx/mime.types;
default_type application/octet-stream;

  ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
  ssl_prefer_server_ciphers on;

  access_log /var/log/nginx/access.log;
  error_log /var/log/nginx/error.log;

  gzip on;
  gzip_disable "msie6";

map $http_upgrade $connection_upgrade {
    default upgrade;
    '' close;
}

upstream websocket {
    ip_hash;
    server 192.168.2.100:8123;
}

server {
    server_name hass.example.com;
    listen 443 ssl http2;
    add_header Strict-Transport-Security "max-age=31536000; includeSubdomains";

    access_log /var/log/nginx/hass.access.log;
    error_log /var/log/nginx/hass.error.log;

    ssl on;
    ssl_certificate /etc/letsencrypt/live/hass.example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/hass.example.com/privkey.pem;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers "EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH:!aNULL:!eNULL:!EXPORT:!DES:!MD5:!PSK:!RC4";
    ssl_prefer_server_ciphers on;
    ssl_session_cache shared:SSL:10m;

    proxy_buffering off;

    location / {
        proxy_pass https://websocket;
        proxy_http_version 1.1;
  proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
  proxy_buffering off;
        proxy_connect_timeout 86400;
        proxy_read_timeout 86400;
  proxy_send_timeout 86400;
    }
}

}

I know other people are using cloudflare and there is even a component for cloudflare users. I’ve searched the forums for this problem but haven’t seen this particular problem described anywhere. I must be doing something wrong. Any help is appreciated.

I should also mention I have disabled Cloudlfare’s Rocket Loader feature as described here: Cloudflare - Issues to be aware of