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
Vanilla
Vanilla•11mo 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
Vanilla
Vanilla•11mo ago
No description
Vanilla
Vanilla•11mo ago
that's what I get in the end
Rägnar O'ock
Rägnar O'ock•11mo 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
Vanilla
Vanilla•11mo ago
GitHub
GitHub - GeorgeBazerashvili/chat-REST
Contribute to GeorgeBazerashvili/chat-REST development by creating an account on GitHub.
Vanilla
Vanilla•11mo ago
here is back
Vanilla
Vanilla•11mo ago
GitHub
GitHub - GeorgeBazerashvili/chat-CLIENT
Contribute to GeorgeBazerashvili/chat-CLIENT development by creating an account on GitHub.
Vanilla
Vanilla•11mo 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"
Want results from more Discord servers?
Add your server