feat: 添加消息已读回执

src/components/Chat/index.tsx

@@ -1,10 +1,11 @@
+import { queryContact } from '@/apis'
 import { socket, useAppStore, useThemeToken } from '@/hooks'
 import { useStateStore } from '@/hooks/useStateStore'
 import { mailpenDatabase } from '@/storages'
 import type { Chat as ChatType, Message as MessageType } from '@/typings'
 import { getLocalUserMedia } from '@/utils'
 import { PhoneOutlined, VideoCameraOutlined } from '@ant-design/icons'
-import { Button, Divider, Flex, Tooltip, Typography } from 'antd'
+import { Button, Divider, Flex, Tooltip, Typography, message } from 'antd'
 import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import VideoPlayer from '../MediaPlayer'
 import InputArea from './InputArea'
@@ -30,6 +31,7 @@ function Chat({ chat }: ChatProps) {
  const [messageList, setMessageList] = useState<MessageType[]>([])
  const messageBoxBottomRef = useRef<HTMLDivElement>(null)
  const [callType, setCallType] = useState<CallType | null>(null)
+ const [messageApi, messageContextHolder] = message.useMessage()
 
  const PeerConnection = window.RTCPeerConnection
 
@@ -47,6 +49,28 @@ function Chat({ chat }: ChatProps) {
  const [localStream, setLocalStream] = useState<MediaStream | null>(null)
  const [remoteStream, setRemoteStream] = useState<MediaStream | null>(null)
 
+ const getContactInfo = () => {
+ if (!friend) return null
+ queryContact(friend._id)
+ .then((res) => {
+ if (res) {
+ mailpenDatabase.chats
+ .findOne({
+ selector: { _id: friend.username }
+ })
+ .update({
+ $set: {
+ name: friend.remark || friend.nickname || friend.username,
+ avatar: friend.avatar
+ }
+ })
+ }
+ })
+ .catch((error) => {
+ messageApi.error(error.message)
+ })
+ }
+
  const scrollToBottom = () => {
  if (messageBoxBottomRef && messageBoxBottomRef.current) {
  messageBoxBottomRef.current.scrollIntoView({
@@ -55,14 +79,44 @@ function Chat({ chat }: ChatProps) {
  }
  }
 
+ const readMessage = () => {
+ if (friend) {
+ const notReadMessageList = mailpenDatabase.messages
+ .find({
+ selector: { sender: friend._id, read: false }
+ })
+ .exec()
+ notReadMessageList.then((res) => {
+ // console.log('✨ ~ notReadMessageList.then ~ res:', res)
+ res.forEach((message) => {
+ socket.emit('readMessage', {
+ id: message._id,
+ receiver: friend._id
+ })
+ })
+ })
+ }
+ }
+
  useLayoutEffect(() => {
  setTimeout(() => {
  scrollToBottom()
+ if (friend) {
+ mailpenDatabase.chats
+ .findOne({
+ selector: { _id: friend.username }
+ })
+ .update({
+ $set: { count: 0 }
+ })
+ readMessage()
+ }
  }, 100)
  }, [messageList])
 
  useLayoutEffect(() => {
  if (friend) {
+ getContactInfo()
  const messages = mailpenDatabase.messages.find({
  selector: {
  $or: [
@@ -71,24 +125,6 @@ function Chat({ chat }: ChatProps) {
  ]
  }
  })
- const notReadMessageList = mailpenDatabase.messages
- .find({
- selector: { sender: friend._id, read: false }
- })
- .exec()
- notReadMessageList.then((res) => {
- res.forEach((message) => {
- socket.emit('readMessage', message._id)
- })
- })
-
- mailpenDatabase.chats
- .findOne({
- selector: { _id: friend.username }
- })
- .update({
- $set: { count: 0 }
- })
  messages.$.subscribe((list) => {
  setMessageList(list)
  })
@@ -261,6 +297,7 @@ function Chat({ chat }: ChatProps) {
  vertical
  style={{ height: '100%', maxHeight: '100vh', overflow: 'auto' }}
  >
+ {messageContextHolder}
  <Flex
  style={{ padding: token.padding, flexShrink: 0 }}
  justify="space-between"

src/components/ContactInfo/index.tsx

@@ -1,20 +1,19 @@
+import { updateContact } from '@/apis'
+import { useThemeToken } from '@/hooks'
+import { mailpenDatabase } from '@/storages'
+import type { Contact } from '@/typings'
 import { Button, Card, Flex, Modal, Typography, message } from 'antd'
 import { useEffect, useState } from 'react'
-import { useNavigate, useParams } from 'react-router-dom'
-import styles from './index.module.less'
-import type { Contact } from '@/typings'
-import { mailpenDatabase } from '@/storages'
-import { useThemeToken } from '@/hooks'
+import { useNavigate } from 'react-router-dom'
 import FormModal from '../FormModal'
-import { updateContact } from '@/apis'
+import styles from './index.module.less'
 
 interface ContactInfoProps {
  contact: Contact
  refresh: () => void
 }
 
 function ContactInfo(props: ContactInfoProps) {
- const { username } = useParams()
  const [contact, setContact] = useState<Contact | undefined>(props.contact)
  const { token } = useThemeToken()
  const navigate = useNavigate()
@@ -47,8 +46,15 @@ function ContactInfo(props: ContactInfoProps) {
  {contact.username}
  </Typography.Text>
  <Typography.Text style={{ fontSize: token.fontSizeHeading3 }}>
- {contact.nickname}
+ {contact.remark
+ ? `${contact.remark}（${contact.nickname || contact.username}）`
+ : contact.nickname || contact.username}
  </Typography.Text>
+ {/* <Typography.Text ellipsis style={{ fontSize: token.fontSizeLG }}>
+ {remark
+ ? `${remark}（${nickname || username}）`
+ : nickname || username}
+ </Typography.Text> */}
  </Flex>
  <Flex vertical gap={0}>
  <div style={{ fontSize: token.fontSizeHeading5 }}>四川·乐山</div>
@@ -61,11 +67,11 @@ function ContactInfo(props: ContactInfoProps) {
  block
  onClick={async () => {
  const chat = await mailpenDatabase.chats
- .findOne({ selector: { _id: username } })
+ .findOne({ selector: { _id: contact.username } })
  .exec()
- if (!chat && username) {
+ if (!chat && contact.username) {
  await mailpenDatabase.chats.insert({
- _id: username,
+ _id: contact.username,
  name:
  contact.remark || contact.nickname || contact.username,
  avatar: contact.avatar,
@@ -76,7 +82,7 @@ function ContactInfo(props: ContactInfoProps) {
  pinned: false
  })
  }
- navigate(`/chat/${username}`)
+ navigate(`/chat/${contact.username}`)
  }}
  >
  去聊天

src/components/Sider/ChatSider/index.tsx

@@ -3,24 +3,43 @@ import { Button, Flex, Input } from 'antd'
 import ChatItem from './ChatItem'
 import styles from './index.module.less'
 import type { Chat } from '@/typings'
+import { useEffect } from 'react'
+import { socket } from '@/hooks'
+import { mailpenDatabase } from '@/storages'
 
 interface ChatSiderProps {
  chatList: Chat[]
 }
 
 function ChatSider({ chatList }: ChatSiderProps) {
+ const readMessage = ({ id }: { id: string }) => {
+ console.log('已读消息')
+
+ mailpenDatabase.messages
+ .findOne({
+ selector: { _id: id }
+ })
+ .update({
+ $set: {
+ read: true
+ }
+ })
+ }
+ useEffect(() => {
+ socket.on('onReadMessage', readMessage)
+ return () => {
+ socket.off('onReadMessage', readMessage)
+ }
+ }, [])
  return (
  <div className={styles.sider}>
  <Flex className={styles.topBar} gap={8}>
  <Input style={{ flex: 1 }} placeholder="搜索" />
  <Button type="primary" icon={<PlusOutlined />} />
  </Flex>
  <div className={styles.list}>
- {chatList.map(chat => (
- <ChatItem
- key={chat._id}
- chat={chat}
- />
+ {chatList.map((chat) => (
+ <ChatItem key={chat._id} chat={chat} />
  ))}
  </div>
  </div>