React Django WebSocket 连接挑战

Question

我面临的挑战是尝试将我的 Django 后端与 React 前端应用程序连接起来。我得到的错误是：

WebSocket connection to 'ws://localhost:8000/ws/week/' failed: _callee$ @ Week.jsx:77

这里是 Week.jsx 代码：

export default function Week(props) {
  const [scoops, setScoops] = useState([]);
  const ws = useRef(null);

  useEffect(async () => {
    ws.current = new WebSocket("ws://" + window.location.host + "/ws/week/");
    ws.current.onopen = () => console.log("ws opened");
    const res = await fetch("/api/scoops/week/");
    const data = await res.json();
    setScoops(data);
  }, []);

  const rows = [];

  for (let i = 0; i < scoops.length; i++) {
    rows.push(createData(i, scoops[i]?.rank, scoops[i]?.title, scoops[i]?.url));
  }

  return <Base rows={rows} duration="Week" />;
}

这里是服务器终端日志：

System check identified no issues (0 silenced).
December 08, 2021 - 10:59:59
Django version 3.2.8, using settings 'app.settings'
Starting ASGI/Channels version 3.0.4 development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
HTTP GET /week/ 200 [0.02, 127.0.0.1:62685]
HTTP GET /api/scoops/week/ 200 [0.14, 127.0.0.1:62685]
WebSocket HANDSHAKING /ws/week/ [127.0.0.1:62695]
WebSocket DISCONNECT /ws/week/ [127.0.0.1:62695]

任何帮助将不胜感激。

谢谢！

Answer 1

该错误是由于我的服务器代码不接受来自前端的连接造成的。将以下代码添加到 consumers.py 修复了问题：

class ChatConsumer(WebsocketConsumer):
    def connect(self):
        self.accept()

还对 routing.py 进行了更改，现在看起来像这样：

from django.urls import re_path

from . import consumers

websocket_urlpatterns = [
    re_path(r"ws/week/", consumers.ChatConsumer.as_asgi()),
]

React Django WebSocket 连接挑战

React Django WebSocket connection challenge

django

websocket

reactjs

django-channels