502 Bad Gateway during WebSocket handshake

Question

my app uses:

• django-channels

• nginx

• daphne (Django Channels HTTP/WebSocket server)

In my frontend html file, there are a few javascript lines like this:

socket = new WebSocket("ws://" + window.location.host);
socket.onmessage = function(e) {
...

This websockets part of the app doesn't work. When I load the page my Chrome Web Inspector says:

Request URL:ws://myapphostname/
**502 Bad Gateway**

the rest of the site loads ok.

I start daphne with: daphne -b 0.0.0.0 -p 8001 ...

and nginx config is this:

server {
    listen 80;
    server_name myapphostname;

    location / {
            proxy_pass http://0.0.0.0:8001;
            proxy_http_version 1.1;
            proxy_buffering off;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";

            proxy_redirect     off;
            proxy_set_header   Host $http_host;
            proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header   X-Forwarded-Host $server_name;
        }
}

Hostfile for myapphostname on my host machine is set of course and points to the IP of app (running in a vm via vagrant).

At the moment I'm not sure if the misconfiguration of my app is more no the nginx site or more on the websockets backend part.

I wonder in which direction I could move to further debug the problem.