React Django WebSocket 连接挑战答案

【问题标题】：React Django WebSocket connection challengeReact Django WebSocket 连接挑战
【发布时间】：2022-01-13 03:30:06
【问题描述】：

我面临的挑战是尝试将我的 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]

任何帮助将不胜感激。

谢谢！

【问题讨论】：

socket连接好像失败了，尝试添加错误处理程序socket.addEventListener('error', function (event) { console.log('WebSocket error: ', event); });查看更多信息。
这是我添加事件监听器drive.google.com/file/d/1Y3mc88uUZI1GctDFuY9juc4QIOm-8Ogo/…后得到的错误信息
在我看来服务器代码有问题，它不接受客户端连接。
我写了一个非常简单的consumer.py来开始，你认为这可能是导致问题的原因吗？ drive.google.com/file/d/10lpelDA3vZ0sTjnnWFjYnXB8Q7qcMbs-/view

标签： reactjs django websocket django-channels

【解决方案1】：

该错误是由于我的服务器代码不接受来自前端的连接造成的。将以下代码添加到 consumer.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()),
]

【讨论】：