title: How to display the lastmessage sent when user is not inside the chat?
body: <p>I currently have 2 screens an all messages screen which includes all the chats i participated in and a chat screen which is the actual chat itself.</p>
  <p>In my chat screen i successfully implemented sockets, so when both users are on the chat screen at the same time messages are getting exchanged live.</p>
  <p>My problem:</p>
  <p>If user 1 is on the allmessages screen and user 2 is inside the chat. And user 2 sends user 1 a message, user 1's screen does not automatically update with the last message for the conversation the message was sent to, I need to either scroll to refresh or navigate from one page to the other in order for it to appear.</p>
  <p>I got suggested to use socket on the allmessages screen to listen to any event change.</p>
  <p>In my database I have a conversations table and a messages table. The conversation table has the following fields: id, user1, user2, postId, lastMessage. The messages table has the following fields:id, senderID, receiverID, conversationId, message.</p>
  <p>CLIENT</p>
  <p>Chatscreen.js</p>
  <pre><code>useEffect(() =&gt; {
  const newsocket =io.connect(&quot;IP:PORT&quot;)
  setMessages(message.Messages)
  
  newsocket.on('connect', msg =&gt; {
  console.log(`user: ${user.id} has joined conversation ${message.id}`)
  setSocket(newsocket)
  newsocket.emit('subscribe', message.id);
   });
  
  newsocket.on(&quot;send_message&quot;, (msg) =&gt; {
  console.log(&quot;this is the chat messages:&quot;, msg);
  setMessages(messages =&gt; messages.concat(msg))
  });
  
  return(()=&gt;newsocket.close());
  
  }, []);
  
  const onSend = (ConversationId,senderId,receiverId,message) =&gt; {
  console.log(&quot;sent&quot;)
  const to = (user.id===route.params.message.user1? 
  route.params.message.user2:route.params.message.user1)
  socket.emit('message', { to: to, from: user.id, message,ConversationId });
  setText(&quot;&quot;)
  messagesApi.sendMessage({ConversationId,senderId,receiverId,message});
  };
  </code></pre>
  <p>allmessagesScreen.js</p>
  <pre><code>const [posts, setPosts] = useState([]);
  const [error, setError] = useState(false);
  const [loading, setLoading] = useState(false);
  const[page,setPage]=useState(0);
  const [refreshing, setRefreshing] = useState(false);
  
  const loadPosts = async () =&gt; {
  setLoading(true);
  const response = await messagesApi.getMessages();
  setLoading(false);
  
  if(refreshing) setRefreshing(false);
  
  if (!response.ok) return setError(true);
  
  setError(false);
  
  setPosts(response.data)
  };
  
  useEffect(() =&gt; {
  const unsubscribe = navigation.addListener('focus', () =&gt; {
  loadPosts();
  });
  return unsubscribe;
  }, [navigation]);
  
  return(
  
  &lt;FlatList
      data={posts}
      keyExtractor={(post) =&gt; post.id.toString()}
      renderItem={({ item,index }) =&gt; (
        &lt;MessagesList
        title={item.Post.title}
          subTitle={item.Messages[0].message}
          onPress={() =&gt; navigation.navigate(routes.CHAT,{message:item,index})}
        /&gt;
      )}
      refreshing={refreshing}
      onRefresh={() =&gt; {
        loadPosts()
      }}
    /&gt;
  </code></pre>
  <p>SERVER</p>
  <pre><code>io.on('connection',(socket)=&gt;{
  console.log('User '+socket.id+' connected')
  
  socket.on('subscribe', (room)=&gt; {
  console.log('joining room', room);
  socket.join(room);
  });
  
  socket.on('message', (data) =&gt; {
  console.log(data)
  console.log('sending room post',data.ConversationId)
  io.sockets.in(data.ConversationId).emit('send_message', { message: 
  data.message, receiverId: 
  data.to,senderId:data.from,conversationId:data.ConversationId });
  })
  })
  </code></pre>
  <p>I gave the following a try, my console logs are getting printed but the functionality still doesn't work.</p>
  <p>CLIENT</p>
  <p>Chatscreen.js</p>
  <pre><code>useEffect(() =&gt; {
  const newsocket =io.connect(&quot;IP:PORT&quot;)
  setMessages(message.Messages)
  
  newsocket.on('connect', msg =&gt; {
  console.log(`user: ${user.id} has joined conversation ${message.id}`)
  setSocket(newsocket)
  newsocket.emit('subscribe', message.id);
   });
  
  newsocket.on(&quot;send_message&quot;, (msg) =&gt; {
  console.log(&quot;this is the chat messages:&quot;, msg);
  setMessages(messages =&gt; messages.concat(msg))
  });
  
  return(()=&gt;newsocket.close());
  
  }, []);
  
  const onSend = (ConversationId,senderId,receiverId,message) =&gt; {
  console.log(&quot;sent&quot;)
  const to = (user.id===route.params.message.user1? 
  route.params.message.user2:route.params.message.user1)
  socket.emit('message', { to: to, from: user.id, message,ConversationId });
  setText(&quot;&quot;)
  messagesApi.sendMessage({ConversationId,senderId,receiverId,message});
  };
  </code></pre>
  <p>allmessagesScreen.js</p>
  <pre><code>const [posts, setPosts] = useState([]);
  const [error, setError] = useState(false);
  const [loading, setLoading] = useState(false);
  const[page,setPage]=useState(0);
  const [refreshing, setRefreshing] = useState(false);
  
  const loadPosts = async () =&gt; {
  setLoading(true);
  const response = await messagesApi.getMessages();
  setLoading(false);
  
  if(refreshing) setRefreshing(false);
  
  if (!response.ok) return setError(true);
  
  setError(false);
  
  setPosts(response.data)
  };
  
    useEffect(() =&gt; {
    const newsocket =io.connect(&quot;http://ip:port&quot;)
    loadPosts()
  
     newsocket.on('connect', msg =&gt; {
      console.log(`waiting for user: ${user.id} to join a conversation`) //this gets printed 
      setSocket(newsocket)
      newsocket.emit('waiting', user.id);
     });
  
   newsocket.on(&quot;send_message&quot;, (msg) =&gt; {
    console.log(&quot;this is the last message:&quot;, msg); //this doesnt get printed 
  });
     }, []);
  
  return(
  
  &lt;FlatList
      data={posts}
      keyExtractor={(post) =&gt; post.id.toString()}
      renderItem={({ item,index }) =&gt; (
        &lt;MessagesList
        title={item.Post.title}
          subTitle={item.Messages[0].message}
          onPress={() =&gt; navigation.navigate(routes.CHAT,{message:item,index})}
        /&gt;
      )}
      refreshing={refreshing}
      onRefresh={() =&gt; {
        loadPosts()
      }}
    /&gt;
  </code></pre>
  <p>SERVER</p>
  <pre><code>io.on('connection',(socket)=&gt;{
  console.log('User '+socket.id+' connected')//this gets printed 
  
  socket.on('subscribe', (room)=&gt; {
  console.log('joining room', room);//this gets printed 
  socket.join(room);
  });
  
  socket.on('message', (data) =&gt; {
  
  console.log(data) //this gets printed 
  console.log('sending room post',data.ConversationId) //this gets printed 
  io.sockets.in(data.ConversationId).emit('send_message', { message: 
  data.message, receiverId: 
  data.to,senderId:data.from,conversationId:data.ConversationId }); 
  })
  
  socket.on('waiting', (user)=&gt; {
  console.log('user', user, 'is waiting.');//this gets printed 
  });
  
  })
  </code></pre>