Kevin Powell - Community•13mo ago

Socket.io

how does it work that sometimes sockets work just fine but sometimes it just stops working at all? Even though everything looks correct?

8 Replies

VanillaOP•13mo ago

  Frontend:
useEffect(() => {
    socket.on("send-info", (room) => {
      // console.log(room);
      if (rooms.length < 5) setRooms((prev) => [...prev, room]);
    });

    return () => {
      socket.disconnect();
    };
  }, [socket]);

  function createRoom() {
    if (room.trim()) {
      socket.emit("addroom", room.trim());
      setActive(false);
    }
  }

  function handleSubmit(e) {
    createRoom();
    e.preventDefault();
  }

  Frontend:
useEffect(() => {
    socket.on("send-info", (room) => {
      // console.log(room);
      if (rooms.length < 5) setRooms((prev) => [...prev, room]);
    });

    return () => {
      socket.disconnect();
    };
  }, [socket]);

  function createRoom() {
    if (room.trim()) {
      socket.emit("addroom", room.trim());
      setActive(false);
    }
  }

  function handleSubmit(e) {
    createRoom();
    e.preventDefault();
  }

Backend:

io.on("connection", (socket) => {
  // console.log(`user with id of ${socket.id} has joined`);

  socket.on("addroom", (room) => {
    socket.emit("send-info", room);
  });

  socket.on("disconnect", () => {
    `User with id of ${socket.id} has been disconnected.`;
  });
});

io.on("connection", (socket) => {
  // console.log(`user with id of ${socket.id} has joined`);

  socket.on("addroom", (room) => {
    socket.emit("send-info", room);
  });

  socket.on("disconnect", () => {
    `User with id of ${socket.id} has been disconnected.`;
  });
});

I map the array in this component like this:

{source.rooms.length === 0 ? (
        <p className="mt-1 ml-2 text-xl font-mono">No rooms yet</p>
      ) : (
        <div>
          {source.rooms.map((room, index) => {
            return (
              <div
                key={index}
                className="border-2 border-black rounded-md p-2 bg-gray-500 flex flex-col justify-center text-center mt-1 relative"
              >
                <i
                  className="absolute -top-1 right-0 text-lg font-bold rounded-full border-black text-black bg-white px-1"
                  onClick={(e) => {
                    source.rooms.length -= 1;
                    e.target.parentNode.remove();
                  }}
                >
                  X
                </i>
                <p>Join the room: {room}</p>
                <button className="bg-popup-bg" onClick={joinRoom}>
                  Join
                </button>
              </div>

{source.rooms.length === 0 ? (
        <p className="mt-1 ml-2 text-xl font-mono">No rooms yet</p>
      ) : (
        <div>
          {source.rooms.map((room, index) => {
            return (
              <div
                key={index}
                className="border-2 border-black rounded-md p-2 bg-gray-500 flex flex-col justify-center text-center mt-1 relative"
              >
                <i
                  className="absolute -top-1 right-0 text-lg font-bold rounded-full border-black text-black bg-white px-1"
                  onClick={(e) => {
                    source.rooms.length -= 1;
                    e.target.parentNode.remove();
                  }}
                >
                  X
                </i>
                <p>Join the room: {room}</p>
                <button className="bg-popup-bg" onClick={joinRoom}>
                  Join
                </button>
              </div>

source is useContext that imports those useStates It should obviously work but it's not working 😄 can someone help? Edit: on frontend code I added

socket.on("connecet", () => {
   console.log("socket connected")
})

socket.on("connecet", () => {
   console.log("socket connected")
})

but it's not happening

VanillaOP•13mo ago

VanillaOP•13mo ago

that's what I get in the end

Rägnar O'ock•13mo ago

Can you provide a link to the repo with your code? It's most likely a configuration issue either in your project or your server but without access to the whole code (or a reproduction of the issue) it's hard to say anything

VanillaOP•12mo ago

https://github.com/GeorgeBazerashvili/chat-REST

GitHub

GitHub - GeorgeBazerashvili/chat-REST

Contribute to GeorgeBazerashvili/chat-REST development by creating an account on GitHub.

VanillaOP•12mo ago

here is back

VanillaOP•12mo ago

https://github.com/GeorgeBazerashvili/chat-CLIENT

GitHub

GitHub - GeorgeBazerashvili/chat-CLIENT

Contribute to GeorgeBazerashvili/chat-CLIENT development by creating an account on GitHub.

VanillaOP•12mo ago

and that's front well cors was pointed to the localHost before and defaultURL was pointed to localhost of backend also I get this error on back: "Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client"

Gaming

Programming

Socket.io