当前位置：首页 > article >正文

从零开始用react + tailwindcss + express + mongodb实现一个聊天程序(九) 消息接口

article 2025/3/4 11:29:10

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 方法

import User from '../models/user.model.js';
import Message from '../models/message.model.js';
import cloudinary from '../lib/cloudinary.js';

export const getUsersForSidebar = async (req, res) => {
    try {
        // 获取当前登录用户的id
        const loggedInUserId = req.user._id;
        // 过滤用户 所有不等于当前用户id 的用户 .select 查询时排除password
        const filteredUsers = await User.find({ _id: { $ne: loggedInUserId } }).select("-password");
        res.status(200).json(filteredUsers);
    } catch (error) {
        console.log("error in getSidebarUsers: ");
        res.status(500).json({ message: error.message });
    }
}
// 点击左侧用户时，获取该用户与当前用户之间的聊天记录
export const getMessages = async (req, res) => {
    try {
        const {id: userToChatId} = req.params;
        // 发送人id 是当前用户id
        const myId = req.user._id;
        
        // 获取当前用户与点击的用户之间的聊天记录
        const messages = await Message.find({
           $or: [
             {senderId: myId, receiverId: userToChatId},
             {senderId: userToChatId, receiverId: myId}
           ]
        })
        res.status(200).json(messages);
    } catch (error) {
        console.log("error in getMessages controller: ");
        res.status(500).json({ message: error.message });
    }
}

// 发送消息
export const sendMessage = async (req, res) => {
    try {   
        const {text,image} = req.body;
        const {id: receiverId} = req.params;
        const senderId = req.user._id;
        let imageUrl;
        if(image) {
            // 上传base64图片到cloudinary
            const uploadResonse = await cloudinary.uploader.upload(image)      
            imageUrl = uploadResonse.secure_url;
        }
        // 构建消息对象
        const newMessage = new Message({
            senderId,
            receiverId,
            text,
            image: imageUrl
        })

        await newMessage.save();


        res.status(201).json(newMessage);
    } catch (error) {
        console.log("error in sendMessage controller: ");
        res.status(500).json({ message: error.message });
    }
}

2.前端

在components 下新建一个ChatHeader.jsx

import { useChatStore } from "../store/useChatStore";
import { useAuthStore } from "../store/useAuthStore";
import { X } from "lucide-react";

const ChatHeader = () => {
    const {selectedUser,setSelectedUser} = useChatStore();
  return (
    <div className="p-2.5 border-b border-base-300">
       <div className="flex items-center justify-between">
          <div className="flex items-center">
            {/* 头像 */}
            <div className="avatar">
                <div className="size-10 rounded-full relative">
                    <img src={selectedUser.profilePic || "https://picsum.photos/200"} alt={selectedUser.userName} />
                </div>
            </div>

            {/* 用户信息 */}
            <div>
                <h3 className="font-medium">{selectedUser.userName}</h3>
                
            </div>
          </div>

          {/* 关闭按钮 */}
          <button onClick={()=>setSelectedUser(null)}>
            <X/>
          </button>
       </div>
    </div>
  )
}

export default ChatHeader

然后再ChatBox.jsx 引入


import {useEffect} from "react"
import { useChatStore } from "../store/useChatStore"
import { useAuthStore } from "../store/useAuthStore"
import {formatMessageTime} from "@/lib/util"
import ChatHeader from "./ChatHeader"

const ChatBox = () => {
  const {messages, getMessages, isMessagesLoading, selectedUser} = useChatStore()
  const {authUser} = useAuthStore()
  useEffect(()=>{
    getMessages(selectedUser._id)

  },[selectedUser._id, getMessages])

  if(isMessagesLoading) return <div>Loading...</div>
  return (
    <div className="flex-1 flex flex-col overflow-auto">
      {/* 聊天框头部 */}
      <ChatHeader/>
      
      {/* 聊天消息 */}
      <div className="flex-1 overflow-auto p-4 space-y-4">
          {messages.map((message)=> (
             <div
              key={message._id}
              // 消息的发送者id和当前用户id一致，则显示在右侧，否则显示在左侧
              className={`chat ${message.senderId===authUser._id ? 'chat-end' : 'chat-start'}`}
             >
              <div className="chat-image avatar">
                 <div className="size-10 rounded-full border">
                    <img
                      src={message.senderId === authUser._id ? authUser.profilePic || 'http://via.placeholder.com/150' : selectedUser.profilePic}
                      alt=""
                    />
                 </div>
              </div>

              <div className="chat-header mb-1">
                 <time className="text-xs opacity-50 ml-1">{formatMessageTime(message.createdAt)}</time>
              </div>
              {/* flex-col 图片和文字上下排列 */}
              <div className="chat-bubble flex flex-col"> 
                 {message.image && (
                   <img 
                    src={message.image}
                    alt=""
                    className="sm:max-w-[200px] rounded-md mb-2"
                   />
                 )}
                 {message.text && <p>{message.text}</p>}
              </div>
             </div>
          ))}

      </div>

      {/* 消息输入 */}
      
    </div>
  )
}

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) => {