当用户不在聊天中时，如何显示发送的最后一条消息？

Question

我目前有2个屏幕，一个所有的消息屏幕，其中包括我参与的所有聊天和一个聊天屏幕，这是实际的聊天本身。

在我的聊天屏幕中，我成功地实现了套接字，所以当两个用户同时在聊天屏幕上时，消息就会实时交换。

客户

ChatScreen.js

useEffect(() => {
const newsocket =io.connect("IP:PORT")
setMessages(message.Messages)

newsocket.on('connect', msg => {
console.log(`user: ${user.id} has joined conversation ${message.id}`)
setSocket(newsocket)
newsocket.emit('subscribe', message.id);
 });

newsocket.on("send_message", (msg) => {
console.log("this is the chat messages:", msg);
setMessages(messages => messages.concat(msg))
});

return(()=>newsocket.close());

}, []);

const onSend = (ConversationId,senderId,receiverId,message) => {
console.log("sent")
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("")
messagesApi.sendMessage({ConversationId,senderId,receiverId,message});
};

AllMessagessCreen.js

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 () => {
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(() => {
const unsubscribe = navigation.addListener('focus', () => {
loadPosts();
});
return unsubscribe;
}, [navigation]);

return(

<FlatList
    data={posts}
    keyExtractor={(post) => post.id.toString()}
    renderItem={({ item,index }) => (
      <MessagesList
      title={item.Post.title}
        subTitle={item.Messages[0].message}
        onPress={() => navigation.navigate(routes.CHAT,{message:item,index})}
      />
    )}
    refreshing={refreshing}
    onRefresh={() => {
      loadPosts()
    }}
  />

io.on('connection',(socket)=>{
console.log('User '+socket.id+' connected')

socket.on('subscribe', (room)=> {
console.log('joining room', room);
socket.join(room);
});

socket.on('message', (data) => {
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 });
})
})

useEffect(() => {
const newsocket =io.connect("IP:PORT")
setMessages(message.Messages)

newsocket.on('connect', msg => {
console.log(`user: ${user.id} has joined conversation ${message.id}`)
setSocket(newsocket)
newsocket.emit('subscribe', message.id);
 });

newsocket.on("send_message", (msg) => {
console.log("this is the chat messages:", msg);
setMessages(messages => messages.concat(msg))
});

return(()=>newsocket.close());

}, []);

const onSend = (ConversationId,senderId,receiverId,message) => {
console.log("sent")
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("")
messagesApi.sendMessage({ConversationId,senderId,receiverId,message});
};

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 () => {
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(() => {
  const newsocket =io.connect("http://ip:port")
  loadPosts()

   newsocket.on('connect', msg => {
    console.log(`waiting for user: ${user.id} to join a conversation`) //this gets printed 
    setSocket(newsocket)
    newsocket.emit('waiting', user.id);
   });

 newsocket.on("send_message", (msg) => {
  console.log("this is the last message:", msg); //this doesnt get printed 
});
   }, []);

return(

<FlatList
    data={posts}
    keyExtractor={(post) => post.id.toString()}
    renderItem={({ item,index }) => (
      <MessagesList
      title={item.Post.title}
        subTitle={item.Messages[0].message}
        onPress={() => navigation.navigate(routes.CHAT,{message:item,index})}
      />
    )}
    refreshing={refreshing}
    onRefresh={() => {
      loadPosts()
    }}
  />

io.on('connection',(socket)=>{
console.log('User '+socket.id+' connected')//this gets printed 

socket.on('subscribe', (room)=> {
console.log('joining room', room);//this gets printed 
socket.join(room);
});

socket.on('message', (data) => {

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)=> {
console.log('user', user, 'is waiting.');//this gets printed 
});

})

Answer 1

我昨天也有同样的问题。但现在已经修好了。这个应该管用

import React, { useEffect, useState, useRef } from 'react'
import socket from 'socket.io-client'

const Chatbox = () => {
  const [chats, setChats] = useState([])
  const [message, setMessage] = useState('')
  const socketClientRef = useRef()

  useEffect(() => {
    const client = socket("http://localhost:3002");
    client.on("connect", () => {
      console.log('connected')
    })
    client.on("disconnect", () => {
      console.log('diconnected')
    });
    client.on("chat", message => {
      setChats(prevChats => [...prevChats, message])
      // INSTEAD OF:
      // setChats([...chats, message])
    });
    socketClientRef.current = client
    return () => {
      client.removeAllListeners()
    }
  }, [])

  const handleSend = async () => {
    socketClientRef.current.emit('chat', {
      room: `event-${eventId}`,
      message
    })
    setMessage('')
  }


  return (
    <div>
      <div>
        <h1>Messages</h1>
        {chats.map(chat => (
          <div>{chat}</div>
        ))}
      </div>
      <div>
        <input value={message} onChange={e => setMessage(e.target.value)} />
        <button onClick={handleSend}>Send</button>
      </div>
    </div>
  )
}