React连接Django Channels WebSocket报错“No route found”求助

你的问题核心是React侧使用的WebSocket URL与Django配置的WebSocket路由不匹配，导致找不到对应路径。

问题点拆解 #

1. Django的WebSocket路由要求路径以ws/开头：你的routing.py里配置的是r'ws/chat/(?P<room_name>\w+)/$'，意味着WebSocket连接必须包含ws前缀。
2. 路由要求路径结尾带斜杠：正则表达式中的/$表示路径必须以/结尾。
3. 你在React中使用的URL是ws://127.0.0.1:8000/chat/myroom，既缺少ws前缀，也没有结尾的斜杠，自然匹配不到路由。

修复步骤 #

修改React的roomPage.js中的WebSocket连接URL，同时利用你已经导入的useParams实现动态房间名（如果需要）：

import React from "react";
import useWebSocket, { ReadyState } from "react-use-websocket";
import { useParams } from "react-router-dom";

export default function RoomPage() {
  // 从路由参数获取房间名（假设你的React路由是 /room/:roomName）
  const { roomName } = useParams();
  
  // 构造正确的WebSocket URL：添加ws前缀，结尾加斜杠
  const socketUrl = `ws://127.0.0.1:8000/ws/chat/${roomName || 'myroom'}/`;

  const { readyState } = useWebSocket(socketUrl, {
    onOpen: () => {
      console.log("Connected!");
    },
    onClose: () => {
      console.log("Disconnected!");
    }
  });

  const connectionStatus = {
    [ReadyState.CONNECTING]: "Connecting",
    [ReadyState.OPEN]: "Open",
    [ReadyState.CLOSING]: "Closing",
    [ReadyState.CLOSED]: "Closed",
    [ReadyState.UNINSTANTIATED]: "Uninstantiated"
  }[readyState];

  return (
    <div>
      <span>The WebSocket is currently {connectionStatus}</span>
    </div>
  );
}

额外提示 #

• 如果你的React路由没有设置动态房间参数，直接写死URL的话，改为ws://127.0.0.1:8000/ws/chat/myroom/即可。
• 确认Django的ASGI配置已经正确挂载了WebSocket路由（通常在asgi.py中包含websocket_urlpatterns）。

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