channels working in runserver but "Still in CONNECTING state" then "ERR_CONNECTION_TIMED_OUT" in production

[Adam]

Hello,

I am following "getting started" in the django channel docs as well as "django channels form the ground up" https://artandlogic.com/2016/06/django-channels-ground-part-2/  tutorial in the django,  using REDIS, NGINX and GUNICORN on digital ocean.

Based on console errors in the browser, I used this code  modified from modified from the docs to test the channel in my browser (JavaScript):

    socket = new WebSocket("wss://" + window.location.host + ":8001/chat");

Then the rest is copied directly:

    socket.onopen = function() {
        socket.send("hello world");
    }

    // Call onopen directly if socket is already open
    if (socket.readyState == WebSocket.OPEN) socket.onopen();

 As the title states, the JavaScript test works on the run server -   python manage.py runserver 0.0.0.0:8000 but not o the production server.

Here is the terminal response to the run server command:

Performing system checks...

System check identified no issues (0 silenced).
October 30, 2017 - 10:40:10
Django version 1.11, using settings 'dojos.settings'
Starting Channels development server at http://0.0.0.0:8000/
Channel layer default (channels_panel.apps.DebugChannelLayer)
Quit the server with CONTROL-C.
2017-10-30 10:40:10,203 - INFO - worker - Listening on channels http.request, websocket.connect, websocket.disconnect, websocket.receive
2017-10-30 10:40:10,205 - INFO - worker - Listening on channels http.request, websocket.connect, websocket.disconnect, websocket.receive
2017-10-30 10:40:10,206 - INFO - worker - Listening on channels http.request, websocket.connect, websocket.disconnect, websocket.receive
2017-10-30 10:40:10,208 - INFO - server - HTTP/2 support not enabled (install the http2 and tls Twisted extras)
2017-10-30 10:40:10,208 - INFO - server - Using busy-loop synchronous mode on channel layer
2017-10-30 10:40:10,209 - INFO - server - Listening on endpoint tcp:port=8000:interface=0.0.0.0
2017-10-30 10:40:10,210 - INFO - worker - Listening on channels http.request, websocket.connect, websocket.disconnect, websocket.receive

And then to the JavaScript test:

[2017/10/30 10:41:07] HTTP GET /favicon.ico 200 [0.24, 75.82.191.111:35111]
[2017/10/30 10:41:16] WebSocket HANDSHAKING /chat/ [75.82.191.111:47589]
[2017/10/30 10:41:16] WebSocket CONNECT /chat/ [75.82.191.111:47589]

On the production server, here is the console error:

VM381:1 Uncaught DOMException: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state.
    at <anonymous>:1:8
(anonymous) @ VM381:1
VM379:1 WebSocket connection to 'wss://joinourstory.com:8001/chat' failed: Error in connection establishment: net::ERR_CONNECTION_TIMED_OUT

These things seem to be relevant:

SETTINGS.PY copied exactly tutorial:

REDIS_HOST = os.environ.get('REDIS_HOST', 'localhost')

CHANNEL_LAYERS = {
    "default": {
        "BACKEND": "asgi_redis.RedisChannelLayer",
        "CONFIG": {
            "hosts": [("localhost", 6379)],
        },
        "ROUTING": "dojos.routing.channel_routing",
    },
}

 ROUTING.PY and CONSUMERS.PY copied exactly from the docs.

Here is the supervisor configuration:

[program:dojos]
command=/home/adam/dojos/bin/gunicorn_start
user=adam
autostart=true
autorestart=true
redirect_stderr=true
stdout_logfile=/home/adam/logs/gunicorn-error.log

[program:server_workers]
command=/home/adam/dojos/venv/bin/python /home/adam/dojos/manage.py runworker
directory=/home/adam/dojos
user=adam
autostart=true
autorestart=true
redirect_stderr=true
stopasgroup=true

[program:server_interface]
command=/home/adam/dojos/venv/bin/daphne -b 127.0.0.1 -p 8001 dojos.asgi:channel_layer
directory=/home/adam/dojos
autostart=true
autorestart=true
stopasgroup=true
user=adam

This seems to be working as this is the response to sudo supervisorctl status:

dojos                            RUNNING   pid 27834, uptime 0:22:29
server_interface                 RUNNING   pid 27835, uptime 0:22:29
server_workers                   RUNNING   pid 27836, uptime 0:22:29

Here is the nginx config file (NOTE I HAVE TO USE SSL)

# Enable upgrading of connection (and websocket proxying) depending on the
# presence of the upgrade field in the client request header
map $http_upgrade $connection_upgrade {
    default upgrade;
    '' close;
}

# Create an upstream alias to where we've set daphne to bind to
upstream dojos {
    server 127.0.0.1:8001;
}

server {
    listen 80;

    server_name joinourstory.com www.joinourstory.com;

    return 301 https://$server_name$request_uri;
}

server {

    listen 443 ssl;

    server_name joinourstory.com www.joinourstory.com;

    ssl on;

    ssl_certificate /etc/nginx/ssl/chainedcert.crt;
    ssl_certificate_key  /etc/nginx/ssl/josserver.key;

    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
    ssl_ciphers REDACTED

    location = /favicon.ico { access_log off; log_not_found off; }

    location /static/ {
             root /home/adam/dojos;
    }

    location /media/ {
              root /home/adam/dojos;
    }

    location / {

    # Pass request to the upstream alias
    proxy_pass http://unix:/home/adam/gunicorn.sock;

    # Require http version 1.1 to allow for upgrade requests
    proxy_http_version 1.1;

    # We want proxy_buffering off for proxying to websockets.
    proxy_buffering off;

    # http://en.wikipedia.org/wiki/X-Forwarded-For
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    # enable this if you use HTTPS:
    proxy_set_header X-Forwarded-Proto https;

    # pass the Host: header from the client for the sake of redirects
    proxy_set_header Host $http_host;

    # We've set the Host header, so we don't need Nginx to muddle
    proxy_redirect off;

   # Depending on the request value, set the Upgrade and connection
   proxy_set_header Upgrade $http_upgrade;

   proxy_set_header Connection $connection_upgrade;

}

}

The  nginx-error.log is empty and everything else on the site seems to be working fine.

Please help!

Thanks Adam

[Adam]

Anybody?