KPC
Kevin Powell - Community•2w ago
chikanlegbees

React socket.emit() not working when app is refreshed ?

hey guys so im currently using socket.io for a real time chat app and my issue is that i have a useEffect which runs only on component mount okay and that fires socket.connect() and then socket.emits an event but for some reason when i refresh the app the component mounts right? and that should fire the emit event right? but it doesnt? its not received in the backend for some reason ive added console.logs to ensure my useEffect runs and it does but in the backend i dont get any logs from the event it should catch 😦 now it does work when i visit another component and get back to the component that has the socket event but for some reason it doesn't work on app refresh in the browser id like some help ill paste the code below 
// frontend
useEffect(() => {
    const token = localStorage.getItem("token");
    const data = jwtDecode(token);
    setMyData(data);
    mydataRef.current = data;
    if (!socket.connected) {
      socket.connect();
    }
    console.log("data id", data.id);
    socket.emit("login", data.id);
    console.log("socket emitted");
  }, []);

// backend
io.on("connection", (socket) => {
  console.log("A user connected:", socket.id);
  // Listen for message send requests
  socket.on("login", async (userId) => {
    console.log(`Received login event for userId: ${userId}`);
    const groups = await allGroups(userId);
    users[userId] = socket.id;
    console.log("all users connected", users);
    groups.forEach((group) => {
      socket.join(group.id);
      console.log(`User ${userId} joined room: ${group.id}`);
    });
    const data = await updateUserOnline(userId, true);
    socket.broadcast.emit("receiveOnline", data);
  });
// frontend
useEffect(() => {
    const token = localStorage.getItem("token");
    const data = jwtDecode(token);
    setMyData(data);
    mydataRef.current = data;
    if (!socket.connected) {
      socket.connect();
    }
    console.log("data id", data.id);
    socket.emit("login", data.id);
    console.log("socket emitted");
  }, []);

// backend
io.on("connection", (socket) => {
  console.log("A user connected:", socket.id);
  // Listen for message send requests
  socket.on("login", async (userId) => {
    console.log(`Received login event for userId: ${userId}`);
    const groups = await allGroups(userId);
    users[userId] = socket.id;
    console.log("all users connected", users);
    groups.forEach((group) => {
      socket.join(group.id);
      console.log(`User ${userId} joined room: ${group.id}`);
    });
    const data = await updateUserOnline(userId, true);
    socket.broadcast.emit("receiveOnline", data);
  });
im getting this console.log("A user connected:", socket.id); on the terminal but not console.log(Received login event for userId: ${userId}); when i refresh 😦
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?