从零开始用react + tailwindcss + express + mongodb实现一个谈天程序(十二 ...

1.后端

在message.controller.js中  在sendMessage方法中 每当我们发送消息 
需要socketio把这个消息转发给 吸收人 到场转发逻辑
// 把消息发给指定的用户的socket
        const receiverSocketId = getReceiverSocketId(receiverId);
        if(receiverSocketId) {
            io.to(receiverSocketId).emit("newMessage", newMessage);
        }
2.前端

 在useChatStore.js中 我们订阅newMessage这个事件 这样只有订阅了的才会收到消息
新增2个方法 订阅和 取消订阅
// 订阅其他用户传来的消息
    subscribeToMessages) => {
        const {selectedUser} = get();
        if(!selectedUser) return;

        //获取userStore中的socket实例
        const socket = useAuthStore.getState().socket;
        socket.on('newMessage', (newMessage) => {
            // 判断如果消息不是来自当前谈天对象，则不处理
            if(newMessage.senderId !== selectedUser._id) return;
            set({messages: [...get().messages, newMessage]});
        })
    },
    // 取消订阅
    unsubscribeFromMessages) => {
        const socket = useAuthStore.getState().socket;
        socket.off('newMessage');
    },
在ChatBox.jsx组件中订阅消息

1. const ChatBox = () => {
2.   const {messages, getMessages, isMessagesLoading, selectedUser, subscribeToMessages, unsubscribeFromMessages} = useChatStore()
3.   const {authUser} = useAuthStore()
5.   useEffect(()=>{
6.     getMessages(selectedUser._id)
8.     // 开始订阅消息
9.     subscribeToMessages()
11.     return () => unsubscribeFromMessages()
12.   },[selectedUser._id, getMessages,subscribeToMessages, unsubscribeFromMessages])

复制代码

3.测试 

完成了及时通信功能！下篇我们优化下前端页面  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。