Django Channels部署服务器后WebSocket连接404错误求助

核心问题分析 #

你遇到的Error during WebSocket handshake: Unexpected response code: 404，本质是前端请求的WebSocket URL没有被后端Daphne服务正确匹配或转发，结合你的代码和部署场景，按以下步骤排查：

1. 修复前端WebSocket URL的两处错误 #

模板字符串语法错误 #

你前端代码中WebSocket URL使用了单引号包裹，ES6模板字符串必须用反引号`才能解析${}变量，否则请求的是字面量URL，直接导致404：

// 错误写法
const chatSocket = new WebSocket('wss://${window.location.host}/ws/chat/${group_id}/');

// 正确写法
const chatSocket = new WebSocket(`wss://${window.location.host}/ws/chat/${group_id}/`);

路径与后端路由不匹配 #

前端请求路径是/ws/chat/13/，但后端routing.py的正则存在两个问题：

• 正则未加^锚定开头，可能导致部分匹配失败；
• 路由写的是wss/chat/，但前端请求的是ws/chat/（少了一个s）。

修改路由正则：

websocket_urlpatterns = [
    re_path(r'^ws/chat/(?P<group_id>[^/]+)/$', consumers.ChatConsumer.as_asgi()),
]

2. 配置Nginx反向代理转发WebSocket请求 #

服务器部署时，必须通过Nginx将WebSocket请求转发到Daphne，否则请求会被普通HTTP服务器（如Gunicorn）处理，导致404。添加以下Nginx配置：

location /ws/ {
    proxy_pass http://127.0.0.1:8000;  # 对应Daphne监听的端口
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

配置完成后重启Nginx服务：systemctl restart nginx

3. 完善Channels路由配置 #

你的routing.py仅配置了WebSocket协议处理，缺少HTTP协议的ASGI应用，会导致Daphne无法正常解析路由规则，补充如下：

from django.core.asgi import get_asgi_application  # 新增导入

application = ProtocolTypeRouter({
    "http": get_asgi_application(),  # 新增HTTP请求处理
    "websocket": AuthMiddlewareStack(
        URLRouter(
            websocket_urlpatterns
        )
    ),
})

4. 验证Daphne服务状态 #

• 查看Daphne运行日志，确认服务是否正常启动、无报错：

  journalctl -u daphne.service -f
  

• 确认Daphne监听的端口和IP正确，若为远程服务器，需确保监听0.0.0.0而非仅127.0.0.1。

5. 匹配HTTP/HTTPS与WebSocket协议 #

根据网站协议动态选择WebSocket协议，避免混合协议导致的错误：

const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
const chatSocket = new WebSocket(`${protocol}//${window.location.host}/ws/chat/${group_id}/`);

内容的提问来源于stack exchange，提问作者Tejinder Singh