从零开始用react + tailwindcss + express + mongodb实现一个聊天步伐(九) ...

1.后端

 起首在models下创建 message.model.js

import mongoose from "mongoose";
const messageSchema = new mongoose.Schema(
    {  
        // 发送人Id
        senderId: {
            type: mongoose.Schema.Types.ObjectId, //在 Mongoose 模型中定义 _id 字段
            required: true,
            ref: "User"
        },
        // 接收人
        receiverId: {
            type: mongoose.Schema.Types.ObjectId, //在 Mongoose 模型中定义 _id 字段
            required: true,
            ref: "User"
        },
        // 文本
        text: {
            type: String
        },
        // 图片
        image: {
            type: String
        }
    },
    {timestamps: true});

const Message = mongoose.model('Message', messageSchema);
完善message.controller.js中 getMessages 和  sendMessages 方法

1. import User from '../models/user.model.js';
2. import Message from '../models/message.model.js';
3. import cloudinary from '../lib/cloudinary.js';
5. export const getUsersForSidebar = async (req, res) => {
6.     try {
7.         // 获取当前登录用户的id
8.         const loggedInUserId = req.user._id;
9.         // 过滤用户 所有不等于当前用户id 的用户 .select 查询时排除password
10.         const filteredUsers = await User.find({ _id: { $ne: loggedInUserId } }).select("-password");
11.         res.status(200).json(filteredUsers);
12.     } catch (error) {
13.         console.log("error in getSidebarUsers: ");
14.         res.status(500).json({ message: error.message });
15.     }
16. }
17. // 点击左侧用户时，获取该用户与当前用户之间的聊天记录
18. export const getMessages = async (req, res) => {
19.     try {
20.         const {id: userToChatId} = req.params;
21.         // 发送人id 是当前用户id
22.         const myId = req.user._id;
23.         
24.         // 获取当前用户与点击的用户之间的聊天记录
25.         const messages = await Message.find({
26.            $or: [
27.              {senderId: myId, receiverId: userToChatId},
28.              {senderId: userToChatId, receiverId: myId}
29.            ]
30.         })
31.         res.status(200).json(messages);
32.     } catch (error) {
33.         console.log("error in getMessages controller: ");
34.         res.status(500).json({ message: error.message });
35.     }
36. }
38. // 发送消息
39. export const sendMessage = async (req, res) => {
40.     try {   
41.         const {text,image} = req.body;
42.         const {id: receiverId} = req.params;
43.         const senderId = req.user._id;
44.         let imageUrl;
45.         if(image) {
46.             // 上传base64图片到cloudinary
47.             const uploadResonse = await cloudinary.uploader.upload(image)      
48.             imageUrl = uploadResonse.secure_url;
49.         }
50.         // 构建消息对象
51.         const newMessage = new Message({
52.             senderId,
53.             receiverId,
54.             text,
55.             image: imageUrl
56.         })
58.         await newMessage.save();
61.         res.status(201).json(newMessage);
62.     } catch (error) {
63.         console.log("error in sendMessage controller: ");
64.         res.status(500).json({ message: error.message });
65.     }
66. }

复制代码

2.前端

在components 下 新建一个ChatHeader.jsx

1. import { useChatStore } from "../store/useChatStore";
2. import { useAuthStore } from "../store/useAuthStore";
3. import { X } from "lucide-react";
5. const ChatHeader = () => {
6.     const {selectedUser,setSelectedUser} = useChatStore();
7.   return (
8.     <div className="p-2.5 border-b border-base-300">
9.        <div className="flex items-center justify-between">
10.           <div className="flex items-center">
11.             {/* 头像 */}
12.             <div className="avatar">
13.                 <div className="size-10 rounded-full relative">
14.                     <img src={selectedUser.profilePic || "https://picsum.photos/200"} alt={selectedUser.userName} />
15.                 </div>
16.             </div>
18.             {/* 用户信息 */}
19.             <div>
20.                 <h3 className="font-medium">{selectedUser.userName}</h3>
21.                
22.             </div>
23.           </div>
25.           {/* 关闭按钮 */}
26.           <button onClick={()=>setSelectedUser(null)}>
27.             <X/>
28.           </button>
29.        </div>
30.     </div>
31.   )
32. }
34. export default ChatHeader

复制代码

然后再ChatBox.jsx 引入
 

2. import {useEffect} from "react"
3. import { useChatStore } from "../store/useChatStore"
4. import { useAuthStore } from "../store/useAuthStore"
5. import {formatMessageTime} from "@/lib/util"
6. import ChatHeader from "./ChatHeader"
8. const ChatBox = () => {
9.   const {messages, getMessages, isMessagesLoading, selectedUser} = useChatStore()
10.   const {authUser} = useAuthStore()
11.   useEffect(()=>{
12.     getMessages(selectedUser._id)
14.   },[selectedUser._id, getMessages])
16.   if(isMessagesLoading) return <div>Loading...</div>
17.   return (
18.     <div className="flex-1 flex flex-col overflow-auto">
19.       {/* 聊天框头部 */}
20.       <ChatHeader/>
21.       
22.       {/* 聊天消息 */}
23.       <div className="flex-1 overflow-auto p-4 space-y-4">
24.           {messages.map((message)=> (
25.              <div
26.               key={message._id}
27.               // 消息的发送者id和当前用户id一致，则显示在右侧，否则显示在左侧
28.               className={`chat ${message.senderId===authUser._id ? 'chat-end' : 'chat-start'}`}
29.              >
30.               <div className="chat-image avatar">
31.                  <div className="size-10 rounded-full border">
32.                     <img
33.                       src={message.senderId === authUser._id ? authUser.profilePic || 'http://via.placeholder.com/150' : selectedUser.profilePic}
34.                       alt=""
35.                     />
36.                  </div>
37.               </div>
39.               <div className="chat-header mb-1">
40.                  <time className="text-xs opacity-50 ml-1">{formatMessageTime(message.createdAt)}</time>
41.               </div>
42.               {/* flex-col 图片和文字上下排列 */}
43.               <div className="chat-bubble flex flex-col">
44.                  {message.image && (
45.                    <img
46.                     src={message.image}
47.                     alt=""
48.                     className="sm:max-w-[200px] rounded-md mb-2"
49.                    />
50.                  )}
51.                  {message.text && <p>{message.text}</p>}
52.               </div>
53.              </div>
54.           ))}
56.       </div>
58.       {/* 消息输入 */}
59.       
60.     </div>
61.   )
62. }
64. export default ChatBox

复制代码

完善useChatStore.js
import {create} from "zustand";

import toast from "react-hot-toast"
import axiosInstance from "../lib/axios";

export const useChatStore = create((set, get) => ({
    messages: [],
    users: [],
    selectedUser: null,
    isUserLoading:false,
    isMessageLoading:false,
     // 选择一个接洽人
     setSelectedUser: (user) => {
          set({selectedUser: user});
     },
    getUsers: async () => {
        set({isUserLoading: true});
       try {
            const res = await axiosInstance.get("/messages/users");
            set({users: res.data});
       } catch{
            toast.error("Error while fetching users");
       } finally{
            set({isUserLoading: false});
       }
    },
    getMessages: async (userId) => {
        set({isMessageLoading: true});
        try {
            const res = await axiosInstance.get(`/messages/${userId}`);
            set({messages: res.data});
        } catch {
            toast.error("Error while fetching messages");
        } finally {
            set({isMessageLoading: false});
        }
    },
    sendMessages: async (messageData) => {
        const {selectedUser, messages} = get();
        try {
            const res = await axiosInstance.post(`/messages/send/${selectedUser._id}`, messageData);
            set({messages: [...messages, res.data]});
        } catch(error) {
            toast.error("Error while sending message:" + error.message);
        }
    }
}))
效果如下

好这篇就到这 下一篇 实现聊天功能 

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