KPC
Kevin Powell - Community•2w ago
chikanlegbees

Socket.emit() and socket.on() 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 😦
2 Replies
dys 🐙
dys 🐙•2w ago
useEffect is run twice in strict development mode. useEffect should return a function that tears down whatever the setup builds. In your case, something like: return () => { socket.disconnect() }. I wouldn't think that would cause the issue you're seeing though. I notice that socket.emit("login", data.id) only has one parameter. Is that where you're authenticating? Should it have a user id & a password? Or, is socket a state variable that persists between mountings?
chikanlegbees
chikanlegbeesOP•2w ago
I think I’ve fixed it… I needed to wrap my emit in a socket.on(connect) event ?

Did you find this page helpful?