Django WebSocket连接失败求助：本地简易聊天应用报错

错误现象 #

控制台报错：

WebSocket connection to 'ws://127.0.0.1:8000/ws/chat/room/' failed:

问题代码中的错误点及修复方案 #

1. Consumer中拼写错误导致连接失败 #

consumer.py的connect方法存在两处关键拼写错误，会直接导致连接时抛出异常，进而被服务器拒绝：

• self.scope["url_route"]["kwarges"]["room_name"] → kwarges应为kwargs
• await self.channel_layer.group_discard(...) → 正确方法名是group_remove

修复后的consumer.py代码：

import json
from channels.generic.websocket import AsyncWebsocketConsumer

class ChatRoomConsumer(AsyncWebsocketConsumer):
    async def connect(self):
        # 修正kwargs拼写错误
        self.room_name = self.scope["url_route"]["kwargs"]["room_name"]
        self.room_group_name = "chat_%s" % self.room_name
        await self.channel_layer.group_add(self.room_group_name, self.channel_name)
        await self.accept()
        # 发送测试消息
        await self.channel_layer.group_send(
            self.room_group_name,
            {
                "type": "tester_message",
                "tester": "hello world",
            },
        )

    async def tester_message(self, event):
        tester = event["tester"]
        await self.send(text_data=json.dumps({"tester": tester}))

    async def disconnect(self, close_code):
        # 修正group_remove方法名
        await self.channel_layer.group_remove(self.room_group_name, self.channel_name)

2. HTML中的拼写错误（不影响连接但需修正） #

chatroom.html中onmessage处理函数里的massege应为message，修正后：

<div id="user-hello"></div>
{{room_name|json_script:"room-name"}}
<script>
    const roomName = JSON.parse(document.getElementById('room-name').textContent);
    const chatSocket = new WebSocket(
        'ws://' + window.location.host + '/ws/chat/' + roomName + '/'
    );
    
    // 修正massege为message
    chatSocket.onmessage = function(e){
        const data = JSON.parse(e.data);
        console.log(data);
        document.querySelector('#user-hello').innerHTML = data.tester;
    }
</script>

3. 路由正则匹配优化 #

routing.py中的正则r"ws/chat/(?P<room_name>\w+)/$"仅匹配字母、数字和下划线，若你的room_name包含其他字符（如连字符），需调整为更宽松的规则：

websocket_urlpatterns = [
    re_path(r"ws/chat/(?P<room_name>[^/]+)/$", consumers.ChatRoomConsumer.as_asgi()),
]

4. 确认ASGI路由整合正确 #

确保项目根目录的core/routing.py正确整合HTTP与WebSocket路由：

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

application = ProtocolTypeRouter({
    "http": get_asgi_application(),
    "websocket": AuthMiddlewareStack(
        URLRouter(
            chat.routing.websocket_urlpatterns
        )
    ),
})

验证修复效果 #

1. 重启Django开发服务器（必须重启，否则代码修改不生效）
2. 访问房间页面（如http://127.0.0.1:8000/chat/room/）
3. 检查控制台是否消除连接错误，同时查看#user-hello元素是否显示"hello world"

内容的提问来源于stack exchange，提问作者Oula R.