Блог

Я использую react и asp.net core SignalR все работает нормально на серверной части, но в интерфейсном браузере я получаю ошибки при установлении соединения с сервером. Ошибка: Не удалось вызвать «Объединенную комнату» из-за ошибки на сервере.

Я новичок, и я не понимаю, почему я попадаю undefined в connection переменную

Мой App.js код:

 function App() {
  const [connection, setConnection] = useState();
  const [messages, setMessages] = useState([]);
  const [users, setUsers] = useState([]);

  const joinRoom = async (user, room) => {
    try {
      const connection = new HubConnectionBuilder()
        .withUrl("https://localhost:44316/chat")
        .configureLogging(LogLevel.Information)
        .build();

      connection.on("ReceiveMessage", (user, message) => {
        setMessages(messages => [...messages, { user, message }]);
      });

      connection.on("UsersInRoom", (users) => {
        setUsers(users);
      });

      connection.onclose(e => {
        setConnection();
        setMessages([]);
        setUsers([]);
      });

      await connection.start();
      await connection.invoke("JoinRoom", { user, room });
      setConnection(connection);
    } catch (e) {
      console.log(e);
    }
  }

  const sendMessage = async (message) => {
    try {
      await connection.invoke("SendMessage", message);
    } catch (e) {
      console.log(e);
    }
  }

  const closeConnection = async () => {
    try {
      await connection.stop();
    } catch (e) {
      console.log(e);
    }
  }

  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route exact path="/login" component={Login} />
      <Route exact path="/register" component={Register} />
      <Route exact path="/notify"  component={Notify} />
      <Route exact path="/chat"  render={(props) => <Chat {...props} sendMessage={sendMessage} messages={messages} users={users} closeConnection={closeConnection} joinRoom={joinRoom}/>}/>      
      <Route exact path="/groups"  component={Groups} />
      <Route exact path="/sendnotify"  component={SendNotification} />

      <Route component={Error} />
    
    </Switch>
  );
}
 

и код компонента чата-это:

 const Chat = ({ sendMessage, messages, users, closeConnection, joinRoom }) => {
  const currentUser = JSON.parse(localStorage.getItem('user'));
  useEffect(() => {
    if (localStorage.getItem("user") === null) {
      joinRoom("test","1");
    }
    else{
      joinRoom(currentUser.name,1);
    }
  }, []);

  return (
    <React.Fragment>
      <Navbar />
      <h1 className="homeH1">Chat</h1>
      <HomeMenu />
      <div className="chatContainer">
      <ConnectedUsers users={users} />
    <div className='chat'>
        <MessageContainer messages={messages} />
        <SendMessageForm sendMessage={sendMessage} />
    </div>

      </div>
      <Footer />
    </React.Fragment>
  );
};