Веб-приложение React + Django не показывает сообщения пользователя, хотя показывает сообщения сервера, которые управляются одной и той же логикой как во фронтенде, так и в бэкенде

Как сказано в заголовке, я пытаюсь сделать линкование с помощью websockets, вчера все шло более-менее гладко, не считая того, что открывалось несколько ws, поэтому, изменив кое-что вокруг и удалив <StrictMode>, я решил эту проблему, но понял, что пользователи больше не могут отправлять сообщения.

На Frontend это 2 tsx файла, я новичок в React и websockets, так что, возможно, я неправильно использую тип компонента или что-то еще idk.

Lobby.tsx :

import './Lobby.css';
import React, { useEffect, useState, useRef } from 'react';
import ChatLog from '../components/ChatLog';
import BattleShipGame from '../components/BattleShipGame';

const Lobby: React.FC = () => {
  const [messages, setMessages] = useState<{ message: string, username: string }[]>([]);
  const [message, setMessage] = useState('');
  const [ws, setWs] = useState<WebSocket | null>(null);
  const isWsOpen = useRef(false);

  useEffect(() => {
    const roomName = new URLSearchParams(window.location.search).get('room');
    const token = localStorage.getItem('accessToken');

    if (roomName && token && !isWsOpen.current) {
      console.log('Attempting to open WebSocket connection');
      const socket = new WebSocket(`ws://192.168.1.125:8000/ws/lobby/${roomName}/${token}/`);

      socket.onmessage = (event) => {
        const data = JSON.parse(event.data);
        console.log('Received WebSocket message:', data); 
        if (data.type === 'chat_message') {
          console.log('Received chat message:', data); 
          setMessages((prev) => {
            const newMessages = [...prev, { message: data.message, username: data.username }];
            console.log('Updating messages state with:', newMessages);
            return newMessages;
          });
        }
      };

      socket.onopen = () => {
        setWs(socket);
        isWsOpen.current = true;
        console.log('WebSocket connection established');
      };

      socket.onerror = (error) => {
        console.error('WebSocket error:', error);
      };

      socket.onclose = (event) => {
        console.log('WebSocket connection closed:', event);
        setWs(null);
        isWsOpen.current = false;
      };

      return () => {
        console.log('Cleaning up WebSocket connection');
        if (socket.readyState === WebSocket.OPEN) {
          socket.close();
          console.log('WebSocket connection closed by cleanup');
        }
      };
    }
  }, []);

  const sendMessage = () => {
    if (ws && message) {
      console.log('Sending message:', message);
      const username = localStorage.getItem('username');
      ws.send(JSON.stringify({ 'type': 'chat_message', 'message': message, 'username': username }));
      setMessage(''); 
    }
  };

  return (
    <div className='lobby-container'>
      {ws && <BattleShipGame ws={ws} />}
      <ChatLog messages={messages} message={message} setMessage={setMessage} sendMessage={sendMessage} />
    </div>
  );
};

export default Lobby;

ChatLog.tsx:

import './ChatLog.css';
import React from 'react';

interface ChatLogProps {
  messages: { message: string, username: string }[];
  message: string;
  setMessage: React.Dispatch<React.SetStateAction<string>>;
  sendMessage: () => void; 
}

const ChatLog: React.FC<ChatLogProps> = ({ messages, message, setMessage, sendMessage }) => {
  
  return (
    <div id="RoomActivityContainer">
      <div id="RoomActivityTitle">
        <span>Room Activity</span>
      </div>
      <div id="RoomActivityMessages">
        {messages.map((msg, index) => (
          <div key={index} className="message">
            <div className="msg-content">{msg.message}</div>
            <div className="msg-username-wrapper">
              <div>- </div>
              <div className="msg-username">{msg.username}</div>
            </div>
          </div>
        ))}
      </div>
      <div id="RoomActivityInput">
        <input
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          placeholder="send message"
          onKeyUp={(e) => {
            if (e.key === 'Enter') {
              sendMessage();
            }
          }}
        />
      </div>
    </div>
  );
};

export default ChatLog;

на бэкенде вот соответствующий код consumers.py:

Пробовал регистрировать все, и поток данных выглядит нормально, за исключением того, что когда бэкэнд отправляет msg обратно клиенту, он игнорируется (хотя сетевой монитор FireFox обнаруживает). Сетевая вкладка FireFox

Честно говоря, я понятия не имею, что попробовать, почему сообщения пользователей не отображаются, а сообщения сервера отображаются. Вот скриншоты консоли браузера и логов Django при входе в лобби и отправке сообщения "test"

Журналы консоли FireFox Журналы Django

Вернуться на верх