WebSocket connection to 'wss://...' failed: (Django + Gunicorn + Nginx + Daphne)

Question

I'm getting an error while connecting the websocket. And I have read similar Q&A on stackoverflow but still not working for me. I've been trying all sorts of ways for days but still can't make the connection. This is my mistake

The server I use is: Django + Gunicorn + Nginx + Daphne

Browser error

WebSocket connection to 'wss://mydomain/ws/some_url/' failed: 

Below is my config on the server

Ngnix config:

server {
    server_name ****** mydomain www.mydomain;

    location = /favicon.ico { access_log off; log_not_found off; }
    location /static/ {
        alias /home/django/magi/src/staticfiles/;
    }
    
    location / {
        include proxy_params;
        proxy_pass http://unix:/run/gunicorn.sock;
    }
    

   location /ws/ {
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_redirect off;
        proxy_pass http://127.0.0.1:8001;
    }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/mydomain/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/mydomain/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot


}server {
    if ($host = www.mydomain) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    if ($host =mydomain) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    server_name ****** mydomain www.mydomain;
    listen 80;
    return 404; # managed by Certbot




}

If you need to check any files, please comment below so I can add them!

Thank you very much

Answer 1

This issue is probably because you haven't added an upstream block in the Nginx configuration which will allow your WebSocket requests to get redirected on port 8001. your Nginx config should be like below:

upstream channels-backend {
 server localhost:8001;
}

server {
    server_name ****** mydomain www.mydomain;

    location = /favicon.ico { access_log off; log_not_found off; }
    location /static/ {
        alias /home/django/magi/src/staticfiles/;
    }
    
    location / {
        include proxy_params;
        proxy_pass http://unix:/run/gunicorn.sock;
    }
    

   location /ws/ {
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_redirect off;
        proxy_pass http://127.0.0.1:8001;
    }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/mydomain/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/mydomain/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot


}server {
    if ($host = www.mydomain) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    if ($host =mydomain) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    server_name ****** mydomain www.mydomain;
    listen 80;
    return 404; # managed by Certbot

}

Also, try to first remove the SSL configuration for HTTPS and WSS you did by using Certbot and make sure everything is working under HTTP and WS. If it is still not working on WSS even after adding the upstream block, check for redirect config added by Certbot, try to remove them, and test it.

server {
    if ($host = www.mydomain) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    if ($host =mydomain) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    server_name ****** mydomain www.mydomain;
    listen 80;
    return 404; # managed by Certbot

}