Socket join and socket.rooms not working

[TheresaRoss]

Server Side

    const onConnection = (socket) => {
    socket.on("join",async function(chat){
 
     const newchat = chat.toString()
      //console.log(chat+' dsdsss')
      await socket.join(newchat)
      console.log('joined    '+socket.rooms)
    })

     socket.on("leave",function(id){
  
      const newid = id.toString()
      console.log("leave "+newid)
      socket.leave(newid)
    })  

    messageHandler(io, socket); //handle message sent

  };

---

messageHandler

    export default (io, socket) => {
    const createdMessage = (msg) => {
    const newmsg = msg.toString()
    
    console.log(newmsg+' to send')
    
    socket.to(newmsg).emit("new","HI") //send to room newmsg
 
    console.table( socket.rooms)};
    }

---

Client

useEffect(() => {

    socketInitializer();
}, [props.chatroomid]); //will call reqChat everytime props changed

const socketInitializer = async () => {
    // We just call it because we don't need anything else out of it
   await fetch("/api/socket");
 
    if(props.chatroomid){socket.emit('join',props.chatroomid)}

  
    
    socket.on("new", (msg) => {

        //fail to use can't find bugs
        console.log('HIIIIIIIIIIIII')

    })
};

 
  socket.on("createdMessage", createdMessage);
  //when client emit createdMessage, do createdMessage
};

const sendMessage = async (e) => {
    e.preventDefault()
    socket.emit("createdMessage", props.chatroomid);//send message to api
  ...

}

So when I send message, I print socket.rooms and got these

| (iteration index) │ Values │
│ 0 │ '3ptQTvGcAMczDTV3AAAZ' │

which means user still didn't join any rooms(?) , and when I emit, it send "HI" to everyone including sender

props.chatroomid = chatroom name that I want to use (in number)

And every function is ran, as console.log works just fine

Any help would be appreciated.

[pushkarsingh019]

Hey,
so when you use react with socketio, the problem is that every time the app re-renders, the clientID changes, so even if you are making the client join a room, when you emit the message to the room, your client has already updated and is now existing with a different id. So when messages are emitted, it does not reflect on the client side as the client is not really in the room.

I was facing the same issue and I solved it by manually setting the clientId and persisting it.

here's what I did

On the client side,

const socket = io.connect(socketInUse, {
    transports: ["websocket"],
    query: "clientId=" + customId,
  });

here socketInUse is the link of my backend and I am setting the customId manually.

On the server side, I had to add a middleware with the following code.

io.use((socket, next) => {
    let clientId = socket.request._query['clientId'];
    if (clientId) {
        socket.clientId = clientId;
        next();
    } else {
        next(new Error('Authentication error'));
    }
});

So now every request you make to the socket server, you are passing the clientId as the params, and clientId should be the room name which you set in the client.

In my case, the clientId was the a variable called roomName, which was stored in the client state.

now, when you have added the above code onto the client and the backend, you can emit to your clients from the backend like this

io.on("connection", (socket) => {
  socket.on("someEvent", (dataFrom Client) => {
    // your program logic
   io.in(socket.clientId).emit('event', dataToSend)
})
})

Hope this helps..

[TheresaRoss]

Thanks!!!

[pushkarsingh019]

Does your app work now?

Saw your last commit titled, "give up". Hope this helps you to continue with your app...

[darrachequesne]

so when you use react with socketio, the problem is that every time the app re-renders, the clientID changes

Hmm, that should not happen. Could you please share the code you are using? Are you calling io() in your React hook?

[pushkarsingh019]

Here are some screenshots for the client side code...

If I console.log the socket.id, with every re-render the clientId changes, making it difficult to emit messages to a given room.

[darrachequesne]

Could you please try to move the initialization of the client in its own file:

// socket.js
import { io } from "socket.io-client";

export const socket = io();

And in your root component:

import { socket } from "./socket.js";

function App() {
  const [isConnected, setIsConnected] = useState(socket.connected);

  useEffect(() => {
    socket.on('connect', () => {
      setIsConnected(true);
    });

    socket.on('disconnect', () => {
      setIsConnected(false);
    });

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

  return (
    // ...
  );
}

Note: you shouldn't have listeners in the other components, because you may receive message while the component is not mounted.