Django Channels WebSocket连接失败：换前端CSS框架后失效

核心问题定位 #

启动服务器时无ASGI/Channels提示，说明当前运行的是传统WSGI服务器，而非ASGI服务器，WebSocket请求无法被Channels处理，这是连接失败的根本原因。同时你的asgi.py存在缺失导入的问题，会导致ASGI应用初始化失败。

修复步骤 #

1. 补全asgi.py的缺失导入 #

你的asgi.py中使用了AuthMiddlewareStack和os但未导入，修改后代码如下：

import os
from channels.routing import ProtocolTypeRouter, URLRouter
from channels.auth import AuthMiddlewareStack
from django.core.asgi import get_asgi_application

import apps.conversation.routing as conversation_routing
import apps.twikkerprofile.routing as core_routing
import apps.feed.routing as feed_routing

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

application = ProtocolTypeRouter({
    "http": get_asgi_application(),
    "websocket": AuthMiddlewareStack(
        URLRouter(
            conversation_routing.websocket_urlpatterns +
            core_routing.websocket_urlpatterns +
            feed_routing.websocket_urlpatterns
        )
    )
}) 

2. 使用ASGI服务器启动项目 #

停止当前的python manage.py runserver，改用Daphne或Uvicorn启动ASGI服务：

• 使用Daphne（Channels官方推荐）：

daphne twikker.asgi:application

• 或使用Uvicorn：

python -m uvicorn twikker.asgi:application

启动后会看到类似WebSocket support enabled的提示，说明Channels已正常加载。

3. 优化前端WebSocket地址适配 #

确保前端WebSocket地址兼容HTTP/HTTPS环境，避免协议不匹配导致的连接失败：

// 根据当前页面协议自动选择ws/wss
const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
const tweekSocket = new WebSocket(
    protocol + window.location.host + '/ws/tweek/'
);

const likeSocket = new WebSocket(
    protocol + window.location.host + '/ws/like/'
);

4. 检查Django配置完整性 #

确认settings.py中已正确配置Channels：

• INSTALLED_APPS包含channels：

INSTALLED_APPS = [
    # ... 其他应用
    'channels',
]

• 配置CHANNEL_LAYERS（开发环境可使用内存层）：

CHANNEL_LAYERS = {
    "default": {
        "BACKEND": "channels.layers.InMemoryChannelLayer"
    }
}

验证 #

启动ASGI服务器后，打开前端页面，检查浏览器控制台是否还有WebSocket连接错误，同时查看服务器日志是否有WebSocket连接成功的记录。

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