从零开始用react + tailwindcss + express + mongodb实现一个聊天程序(十) 收发消息

1.聊天框

首先我们完善前端的消息输入框

components下面新建MessageInput组件

import { useState,useRef } from "react"
import {X,Image,Send} from "lucide-react"import { useChatStore } from "../store/useChatStore"
import toast from "react-hot-toast"
const MessageInput = () => {const [text, setText] = useState("")const [imagePreview, setImagePreview] = useState(null) // 预览的图片const fileInputRef = useRef(null) // 文件输入框const {sendMessages} = useChatStore(); // 发送消息const handleImageChange =(e) => {const file = e.target.files[0]if(!file.type.startsWith("image/")) {toast.error("请选择图片文件")return}const reader = new FileReader()reader.onload = () => {setImagePreview(reader.result)}reader.readAsDataURL(file)}const removeImage = () => {setImagePreview(null)if(fileInputRef.current)  fileInputRef.current.value = ""}const handleSendMessage = async(e) => {e.preventDefault()if(!text.trim() && !imagePreview) returntry {await sendMessages({text:text.trim(),image:imagePreview})toast.success("发送消息成功")setText("")setImagePreview(null)if(fileInputRef.current)  fileInputRef.current.value = ""} catch (error) {console.log(error)toast.error("发送消息失败:",error.message)}}return (<div className="p-4 w-full">{imagePreview && (<div className="mb-3 flex items-center gap-2"><div className="relative"><img src={imagePreview} alt="Preview"className="size-20 object-cover rounded-lg border border-zinc-700"/><buttononClick={removeImage}className="absolute -top-1.5 -right-1.5 size-5 rounded-full bg-base-300flex items-center justify-center"type="button"><X className="size-3"/></button></div></div>)}{/* 消息输入 */}<form onSubmit={handleSendMessage} className="flex items-center gap-2"><div className="flex-1 flex gap-2"><inputtype="text"className="w-full input input-bordered rounded-lg input-sm sm:input-md"placeholder="输入消息"value={text}onChange={(e) => setText(e.target.value)}/><input type="file"accept="image/*"className="hidden"ref={fileInputRef}onChange={handleImageChange}/><buttontype="button"className={`hidden sm:flex btn btn-circle${imagePreview?"text-emerald-500":"text-zinc-400"}`}onClick={() => fileInputRef.current.click()}><Image size={20} /></button></div><buttontype="submit"className="btn btn-sm btn-circle"disabled={!imagePreview && !text.trim()}><Send size={22}/></button></form></div>)
}export default MessageInput

聊天的气泡我们参考daisyUi的 chat-start chat-end 效果如下

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"
import MessageInput from "./MessageInput"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)=> (<divkey={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"><imgsrc={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>{/* 消息输入 */}<MessageInput/></div>)
}export default ChatBox

 这是我们在左侧发送消息  右侧用户就能收到消息了 并且自己发送的消息在右侧 收到的消息在左侧  正是用了 chat-start chat-end 这2个class

我们的判断逻辑是

// 消息的发送者id和当前用户id一致，则显示在右侧，否则显示在左侧

className={`chat ${message.senderId===authUser._id ? 'chat-end' : 'chat-start'}`}

思考一个问题 目前我们发送消息给对方 只有刷新页面才能收到新的消息 这是不符合要求的 所以我们引入socket.io 实现实时 的 收发消息 功能。

下篇继续。。。