WebSocket connection failed: Insufficient resources , chat react app with useEffects

Question

I'm having an issue with WebSocket. I'm using mqtt and react. The problem is that after sending 10+ messages on my chat, i get an error: mqtt.js:2202 WebSocket connection to 'ws://broker.emqx.io:8083/mqtt' failed: Insufficient resources. in the console. I can still sent messages though, but there are tons of same erros happening again and again. This is how my code looks like:

import React, { useEffect, useState } from "react";
import { v4 as uuidv4 } from "uuid";
import mqtt from "mqtt/dist/mqtt";
import { connect } from "react-redux";
import { useParams } from "react-router-dom";
import { withRouter } from "react-router";
// mqtt.connect("ws://broker.emqx.io:8083/mqtt")
const Chatroom = ({ usersLogged }) => {
  const { id } = useParams();

  const user = usersLogged.login;

  const [connectionStatus, setConnectionStatus] = useState(false);
  const [messages, setMessages] = useState([]);
  const [recivedMessage, setRecivedMessage] = useState(
    `${user} dołączyłeś do czatu`
  );
  const [NewMessage, setNewMessage] = useState("");
  const [Client, setClient] = useState(
    mqtt.connect("ws://broker.emqx.io:8083/mqtt")
  );
  useEffect(() => {
    if (!connectionStatus) {
      setClient(mqtt.connect("ws://broker.emqx.io:8083/mqtt"));
      setConnectionStatus(true);
    }
  }, []);
  useEffect(() => {
    if (id) {
      Client.subscribe(id);
    }
  }, [id]);

  useEffect(() => {
    Client.on("message", function (topic, messag) {
      const wiadomosc = messag.toString();
      setRecivedMessage(wiadomosc);
    });
  }, [Client]);
  useEffect(() => {
    setMessages((prevState) => [...prevState, recivedMessage]);
  }, [recivedMessage]);
  let view = messages.map((elem) => <div key={uuidv4()}> {elem} </div>);

  const ChangeHandler = (e) => {
    setNewMessage(e.target.value);
  };
  const sendMessage = (event) => {
    Client.publish(id.toString(), user + ": " + NewMessage);
    setNewMessage("");
    event.preventDefault();
  };

  return (
    <div className="Chatroom">
      <h1 className="title"> Chat in room: {id} </h1>
      <h3>{view}</h3>
      <h3>
        <form onSubmit={sendMessage}>
          <label className="ChatForm">
            Message:
            <input type="text" value={NewMessage} onChange={ChangeHandler} />
          </label>
          <input type="submit" value="Send" />
        </form>{" "}
      </h3>
    </div>
  );
};

const mapStateToProps = (state) => {
  return {
    usersLogged: state.users.loggedUsers,
  };
};

export default withRouter(connect(mapStateToProps, null)(Chatroom));

It happens no matter if im sending messages from two browser or from just one.

Answer 1

import React, { useEffect, useState } from "react";
import { v4 as uuidv4 } from "uuid";
import mqtt from "mqtt/dist/mqtt";
import { connect } from "react-redux";
import { useParams } from "react-router-dom";
import { withRouter } from "react-router";
// mqtt.connect("ws://broker.emqx.io:8083/mqtt")
const Chatroom = ({ usersLogged }) => {
  const { id } = useParams();

  const user = usersLogged.login;

  const [connectionStatus, setConnectionStatus] = useState(false);
  const [messages, setMessages] = useState([]);
  const [recivedMessage, setRecivedMessage] = useState(
    `${user} do??czy?e? do czatu`
  );
  const [NewMessage, setNewMessage] = useState("");
  const [Client, setClient] = useState(null);
  useEffect(() => {
    mqttConnect("ws://broker.emqx.io:8083/mqtt");
  }, []);

  const mqttConnect = (host) => {
    setClient(mqtt.connect(host));
  };

  useEffect(() => {
    if (!connectionStatus) {
      setClient(mqtt.connect("ws://broker.emqx.io:8083/mqtt"));
      setConnectionStatus(true);
    }
  }, []);
  useEffect(() => {
    if (Client) {
      Client.subscribe(id);
    }
  }, [Client]);

  useEffect(() => {
    if (Client) {
      Client.on("message", function (topic, messag) {
        const wiadomosc = messag.toString();
        setRecivedMessage(wiadomosc);
      });
    }
  }, [Client]);
  useEffect(() => {
    setMessages((prevState) => [...prevState, recivedMessage]);
  }, [recivedMessage]);
  let view = messages.map((elem) => <div key={uuidv4()}> {elem} </div>);

  const ChangeHandler = (e) => {
    setNewMessage(e.target.value);
  };
  const sendMessage = (event) => {
    Client.publish(id.toString(), user + ": " + NewMessage);
    setNewMessage("");
    event.preventDefault();
  };

  return (
    <div className="Chatroom">
      <h1 className="title"> Chat in room: {id} </h1>
      <h3>{view}</h3>
      <h3>
        <form onSubmit={sendMessage}>
          <label className="ChatForm">
            Message:
            <input type="text" value={NewMessage} onChange={ChangeHandler} />
          </label>
          <input type="submit" value="Send" />
        </form>{" "}
      </h3>
    </div>
  );
};

const mapStateToProps = (state) => {
  return {
    usersLogged: state.users.loggedUsers,
  };
};

export default withRouter(connect(mapStateToProps, null)(Chatroom));

this now works, thanks