title: 502 Bad Gateway during WebSocket handshake
body: <p>my app uses:</p>
  
  <ul>
  <li><p>django-channels</p></li>
  <li><p>nginx</p></li>
  <li><p>daphne (Django Channels HTTP/WebSocket server)</p></li>
  </ul>
  
  <p>In my frontend html file, there are a few javascript lines like this:</p>
  
  <pre><code>socket = new WebSocket("ws://" + window.location.host);
  socket.onmessage = function(e) {
  ...
  </code></pre>
  
  <p>This websockets part of the app doesn't work. When I load the page my Chrome Web Inspector says:</p>
  
  <pre><code>Request URL:ws://myapphostname/
  **502 Bad Gateway**
  </code></pre>
  
  <p>the rest of the site loads ok.</p>
  
  <p>I start daphne with:
      daphne -b 0.0.0.0 -p 8001 ...</p>
  
  <p>and nginx config is this:</p>
  
  <pre><code>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;
          }
  }
  </code></pre>
  
  <p>Hostfile for myapphostname on my host machine is set of course and points to the IP of app (running in a vm via vagrant).</p>
  
  <p>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.</p>
  
  <p>I wonder in which direction I could move to further debug the problem.</p>