基于Django Channels的异步聊天室Heroku部署后WebSocket 404问题

核心问题 #

你遇到的404错误本质是Gunicorn作为WSGI服务器无法处理WebSocket的ASGI请求——本地runserver会自动切换到ASGI模式处理WebSocket，但Gunicorn只能处理HTTP请求，所以WebSocket请求找不到对应路由。直接用Daphne崩溃则需要排查启动配置和依赖问题。

步骤1：修正Procfile，使用Daphne启动应用 #

Gunicorn不支持ASGI协议，必须用Daphne（Channels官方推荐的ASGI服务器）替换。修改你的Procfile内容：

web: daphne dating_app.asgi:application --port $PORT --bind 0.0.0.0

• $PORT是Heroku自动分配的端口，必须使用这个变量，不能硬编码端口号
• 0.0.0.0确保服务绑定到所有网络接口，适配Heroku的容器环境

步骤2：验证ASGI配置文件正确性 #

确保dating_app/asgi.py正确配置了Channels的协议路由，示例如下：

import os
from django.core.asgi import get_asgi_application
from channels.routing import ProtocolTypeRouter, URLRouter
from channels.auth import AuthMiddlewareStack
# 替换为你的聊天应用路由模块
import chat.routing

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'dating_app.settings')

application = ProtocolTypeRouter({
    # 处理常规HTTP请求
    "http": get_asgi_application(),
    # 处理WebSocket请求，添加认证中间件（可选但推荐）
    "websocket": AuthMiddlewareStack(
        URLRouter(
            chat.routing.websocket_urlpatterns
        )
    ),
})

如果你的路由结构和教程一致，这个配置应该能正确转发WebSocket请求到ChatConsumer。

步骤3：修复Redis连接配置（避免解析异常） #

虽然直接传入REDISCLOUD_URL理论上可行，但部分场景下URL解析会出错，建议拆分URL参数：

import os
from urllib.parse import urlparse

redis_url = urlparse(os.getenv("REDISCLOUD_URL", "redis://localhost:6379"))

CHANNEL_LAYERS = {
    "default": {
        "BACKEND": "channels_redis.core.RedisChannelLayer",
        "CONFIG": {
            "hosts": [(redis_url.hostname, redis_url.port)],
            "password": redis_url.password,
        },
    },
}

用urlparse拆分后能明确传递主机、端口和密码，避免隐式解析错误。

步骤4：排查Daphne崩溃的具体原因 #

如果替换Procfile后Daphne崩溃，用以下命令查看实时日志定位问题：

heroku logs --tail

常见崩溃原因及解决：

• 依赖缺失/版本不兼容：确保requirements.txt包含channels、daphne、channels_redis，且版本匹配（比如Channels 4.x需要Daphne 4.x，Python 3.8+）
• Redis连接失败：用heroku config:get REDISCLOUD_URL验证环境变量是否存在，再通过heroku run python -c "import os; import redis; r = redis.from_url(os.getenv('REDISCLOUD_URL')); print(r.ping())"测试连接
• ASGI应用路径错误：确认dating_app.asgi:application的路径正确，ASGI文件没有语法错误

步骤5：前端WebSocket连接适配 #

确保前端WebSocket连接使用wss://（对应HTTPS环境），而非ws://，比如：

const ws = new WebSocket(`wss://${window.location.host}/ws/chat/kitchen/`);

Heroku默认使用HTTPS，用ws://会被强制跳转或拒绝连接。

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