Задача соединения React Django WebSocket

Проблема, с которой я столкнулся, заключается в попытке соединить мой Django backend с React frontend приложением. Ошибка, которую я получаю, выглядит так:

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]

Любая помощь будет искренне признательна.

Спасибо!

Ошибка была результатом того, что код моего сервера не принимал соединение от фронтенда. Добавление следующего кода в 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()),
]
Вернуться на верх