Django+Vue聊天应用WebSocket连接失败：No route found for path

你遇到的「No route found for path 'ws/rooms/759b9a8262ea4b7/'」错误，根源是路由配置不匹配+前后端参数名不一致，下面一步步给你拆解和修复：

1. 路由正则写法完全错误 #

你的core/routing.py里用了Django的url()函数（基于正则表达式的路由），但却写了<uri>这种Django 2.0+才有的path()语法，还被转义成了<uri>，这导致正则根本无法匹配实际请求路径。

原错误代码：

from django.conf.urls import url
from core import consumers
websocket_urlpatterns = [
  url(r'^ws/rooms/<uri>/', consumers.ChatConsumer),
]

2. 前后端参数名不匹配 #

前端连接时用的是房间id（${this.$route.params.id}），但后端路由里定义的参数名是uri，消费者代码里也是取uri参数，就算路由能匹配，也会因为找不到uri参数报错。

完整修复步骤 #

第一步：修正核心模块路由 #

把路由改成正则格式，同时将参数名改为id和前端保持一致：

from django.conf.urls import url
from core import consumers

websocket_urlpatterns = [
    # 用正则匹配任意非斜杠的字符作为房间ID，且匹配结尾的斜杠
    url(r'^ws/rooms/(?P<id>[^/]+)/$', consumers.ChatConsumer),
]

如果你的Django版本是3.2及以上，也可以用re_path替代url（两者功能完全一致）。

第二步：修正消费者的参数获取 #

把消费者里的uri相关代码改成id，和路由的命名组对应：

class ChatConsumer(WebsocketConsumer):
    def connect(self):
        # 替换uri为id，和路由参数名一致
        self.room_id = self.scope['url_route']['kwargs']['id']
        self.room_group_name = 'chat_%s' % self.room_id
        async_to_sync(self.channel_layer.group_add)(
            self.room_group_name,
            self.channel_name
        )
        self.accept()

    def disconnect(self, close_code):
        async_to_sync(self.channel_layer.group_discard)(
            self.room_group_name,
            self.channel_name
        )

    # 其他方法保持不变即可

第三步：确认前后端路径一致性 #

确保前端WebSocket连接的路径结尾带斜杠（和路由正则里的/$对应），你的前端代码已经符合要求，无需修改：

connectToWebSocket () {
  const chatSocket = new WebSocket(
    `ws://localhost:8000/ws/rooms/${this.$route.params.id}/`
  )
  chatSocket.onopen = this.onOpen
  chatSocket.onclose = this.onClose
  chatSocket.onmessage = this.onMessage
  chatSocket.onerror = this.onError
},

做完这些修改后，重启Django Channels服务器，应该就能正常建立WebSocket连接了。

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