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

hamburgerDaddy12025-03-09 11:23

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

javascript 复制代码

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.测试

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