我面临的挑战是尝试将 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]
任何帮助将不胜感激。
谢谢你！
该错误是由于我的服务器代码不接受来自前端的连接造成的。将以下代码添加到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()),
]
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
