In real time chatting

[dhruvinvaghani001]

in real time chat we set our message context with updated message and set it . but actually its not tru because if reciver selected conversation is diffrent then also he find your mesdsage but it should not let's take and example
if there is thee user jhon , bob and alice now jhon and bob doing chat (online) in this code if jhon send message to bob and if selected conversation of bob is alice then also it shows new upcoming message but bob and alice neve do chat new upcoming message is actully of jhon if we refresh it then it comes propely due to context refresh in this case .

to solve this :
we have to check if selected conversation id is same as reciver id then and then update message context otherwise dont update context of message.

`const useListenMessages = () => {
const { socket } = useSocketContext();
const { messages, setMessages, selectedConversation } = useConversation();
const { user } = useAutherContext();

useEffect(() => {
socket?.on("new-message", ( newMessage ) => {
const check = newMessage.receiverId == selectedConversation.id
console.log(selectedConversation);
newMessage.shake = true;
const sound = new Audio(notificationSound);
sound.play();

  if (check) {
    setMessages([...messages, newMessage]);
  }
});

return () => {
  socket?.off("new-message");
};

}, [socket, messages, setMessages]);
};

export default useListenMessages;`

[anmolpal2001]

in real time chat we set our message context with updated message and set it . but actually its not tru because if reciver selected conversation is diffrent then also he find your mesdsage but it should not let's take and example if there is thee user jhon , bob and alice now jhon and bob doing chat (online) in this code if jhon send message to bob and if selected conversation of bob is alice then also it shows new upcoming message but bob and alice neve do chat new upcoming message is actully of jhon if we refresh it then it comes propely due to context refresh in this case .

to solve this : we have to check if selected conversation id is same as reciver id then and then update message context otherwise dont update context of message.

`const useListenMessages = () => { const { socket } = useSocketContext(); const { messages, setMessages, selectedConversation } = useConversation(); const { user } = useAutherContext();

useEffect(() => { socket?.on("new-message", ( newMessage ) => { const check = newMessage.receiverId == selectedConversation.id console.log(selectedConversation); newMessage.shake = true; const sound = new Audio(notificationSound); sound.play();

  if (check) {
    setMessages([...messages, newMessage]);
  }
});

return () => {
  socket?.off("new-message");
};

}, [socket, messages, setMessages]); };

export default useListenMessages;`

When sender sends the message and selectedConversation id is the sender's id in the receiver's window, the messages window is not updating automatically it require reload of the page, can you provide any solution for this ??

[pushpakrai1607]

To address the issue in the code, you can modify the condition inside the socket.on("new-message") event listener to ensure that the message update only occurs when the selected conversation ID matches the receiver's ID. Here's the updated code snippet:

const useListenMessages = () => {
  const { socket } = useSocketContext();
  const { messages, setMessages, selectedConversation } = useConversation();
  const { user } = useAutherContext();

  useEffect(() => {
    socket?.on("new-message", (newMessage) => {
      // Check if the receiver ID matches the selected conversation ID
      const isReceiverSelectedConversation = newMessage.receiverId === selectedConversation.id;

      // Update message context only if receiver ID matches selected conversation ID
      if (isReceiverSelectedConversation) {
        newMessage.shake = true;
        const sound = new Audio(notificationSound);
        sound.play();
        setMessages([...messages, newMessage]);
      }
    });

    return () => {
      socket?.off("new-message");
    };
  }, [socket, messages, setMessages, selectedConversation.id]);
};

export default useListenMessages;

In this updated code:

• I added a condition isReceiverSelectedConversation to check if the receiverId of the new message matches the id of the selected conversation.
• If the condition is met, the message context is updated with the new message. Otherwise, the context remains unchanged.
• I also included selectedConversation.id in the dependency array of the useEffect hook to ensure that the effect re-runs whenever the selected conversation changes.

[dhruvinvaghani001]

there should be error in the socket logic so when a new message is sent then on receiver side socket event not recived properly and setMessages not run so updated messages not set directly

[johnjehiel]

you also need to add the selectedConversation in the use effect to update the message when the respective user is selected,
`
const useListenMessages = () => {
// . . .

useEffect(() => {
	//. . .
}, [socket, setMessages, messages ,selectedConversation]);

};
export default useListenMessages;`

[satt-hri]

[setMessages] is a function and does not need to be passed.