从零开始用react + tailwindcss + express + mongodb实现一个聊天程序(十二) socketio 消息处理

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组件中订阅消息

const ChatBox = () => {
  const {messages, getMessages, isMessagesLoading, selectedUser, subscribeToMessages, unsubscribeFromMessages} = useChatStore()
  const {authUser} = useAuthStore()

  useEffect(()=>{
    getMessages(selectedUser._id)

    // 开始订阅消息
    subscribeToMessages()

    return () => unsubscribeFromMessages()
  },[selectedUser._id, getMessages,subscribeToMessages, unsubscribeFromMessages])

3.测试 

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