sockets issue

I got issue with the sockets not broadcasting the message to the frontend so If you know how to fix it please help
3 Replies
Vanilla
VanillaOP13mo ago
here is client side code:
import { useEffect, useState } from "react";
import io from "socket.io-client";

function App() {
const socket = io("http://localhost:3000");
const [roomID, setRoomID] = useState("");
const [message, setMessage] = useState("");
const [joined, setJoined] = useState(false);

useEffect(() => {
socket.on("connect", () => {
console.log(socket.connected);
});

socket.on("broadcast-message", (message) => {
console.log(message);
});

return () => {
socket.off("message-delivery");
socket.off("broadcast-message");
};
}, []);

function joinRoom() {
if (roomID.trim()) {
console.log(`joining room ${roomID}`);
socket.emit("joinRoom", roomID);

setJoined(true);
}
}

function sendMessage() {
socket.emit("sendMessage", {
room: roomID,
message,
});
}

return (
<>
{!joined ? (
<>
<h2>Chat App</h2>
<div className="container">
<label htmlFor="room">Enter room ID</label>
<input
type="text"
id="room"
value={roomID}
onChange={(e) => setRoomID(e.target.value)}
placeholder="Room ID..."
/>
<button onClick={joinRoom}>Join Room</button>

<h2>{message}</h2>
</div>
</>
) : (
<>
<label>Send Message</label>
<input
placeholder="message..."
id="message"
type="text"
value={message}
onChange={(e) => setMessage(e.target.value)}
/>
<button onClick={sendMessage}>Send</button>
</>
)}
</>
);
}

export default App;
here is client side code:
import { useEffect, useState } from "react";
import io from "socket.io-client";

function App() {
const socket = io("http://localhost:3000");
const [roomID, setRoomID] = useState("");
const [message, setMessage] = useState("");
const [joined, setJoined] = useState(false);

useEffect(() => {
socket.on("connect", () => {
console.log(socket.connected);
});

socket.on("broadcast-message", (message) => {
console.log(message);
});

return () => {
socket.off("message-delivery");
socket.off("broadcast-message");
};
}, []);

function joinRoom() {
if (roomID.trim()) {
console.log(`joining room ${roomID}`);
socket.emit("joinRoom", roomID);

setJoined(true);
}
}

function sendMessage() {
socket.emit("sendMessage", {
room: roomID,
message,
});
}

return (
<>
{!joined ? (
<>
<h2>Chat App</h2>
<div className="container">
<label htmlFor="room">Enter room ID</label>
<input
type="text"
id="room"
value={roomID}
onChange={(e) => setRoomID(e.target.value)}
placeholder="Room ID..."
/>
<button onClick={joinRoom}>Join Room</button>

<h2>{message}</h2>
</div>
</>
) : (
<>
<label>Send Message</label>
<input
placeholder="message..."
id="message"
type="text"
value={message}
onChange={(e) => setMessage(e.target.value)}
/>
<button onClick={sendMessage}>Send</button>
</>
)}
</>
);
}

export default App;
js and here is server side code:
const express = require("express");
const app = express();
const httpServer = require("http").createServer(app);

const io = require("socket.io")(httpServer, { cors: { origin: "*" } });

io.on("connection", (socket) => {
console.log(`The user with the id of ${socket.id} has been connected`);

socket.on("joinRoom", (ID) => {
socket.join(ID);
console.log(`A user with the id of ${socket.id} has joined the room ${ID}`);
});

socket.on("sendMessage", (INFO) => {
socket.to(INFO.room).emit("broadcast-message", INFO.message);
});

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

httpServer.listen(3000, () => {
console.log("Listening on port 3000...");
});
const express = require("express");
const app = express();
const httpServer = require("http").createServer(app);

const io = require("socket.io")(httpServer, { cors: { origin: "*" } });

io.on("connection", (socket) => {
console.log(`The user with the id of ${socket.id} has been connected`);

socket.on("joinRoom", (ID) => {
socket.join(ID);
console.log(`A user with the id of ${socket.id} has joined the room ${ID}`);
});

socket.on("sendMessage", (INFO) => {
socket.to(INFO.room).emit("broadcast-message", INFO.message);
});

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

httpServer.listen(3000, () => {
console.log("Listening on port 3000...");
});
bibamann
bibamann13mo ago
Phew - I'm currently doing a socketserver PHP wise with a Vue client. But can't you see by all your logs where's it's hanging?
Vanilla
VanillaOP13mo ago
I already fixed it thx
Want results from more Discord servers?
Add your server