实时聊天应用中聊天卡片的实现

应用场景介绍

在实时聊天应用中，聊天卡片是用于显示用户之间消息的重要组件。它们通常包含消息文本、发送者信息和时间戳。实现功能齐全且可定制的聊天卡片对于创建用户友好的聊天体验至关重要。

代码基本功能介绍

提供的代码实现了聊天卡片的基本功能，包括：

• 显示发送者头像、姓名和在线状态
• 显示消息文本
• 显示时间戳
• 支持不同类型的消息（例如，来自患者或医生的消息）

功能实现步骤及关键代码分析说明

1. HTML 结构

<div class="chat-body">
  <div class="message patient">
    <img class="avatar" src="..." alt="avatar" />
    <div class="message-content">
      <p>Hello, doctor. I'm not feeling well.</p>
    </div>
  </div>
  <div class="message doctor">
    <img class="avatar" src="..." alt="avatar" />
    <div class="message-content">
      <p>Hello, how can I help you?</p>
    </div>
  </div>
</div>

HTML 结构定义了聊天卡片的布局，包括发送者头像、消息内容和时间戳。

2. 数据模型

const messages = ref([
  {
    type: 'patient',
    message: 'Hello, doctor. I'm not feeling well.',
    time: '10:00 AM',
  },
  {
    type: 'doctor',
    message: 'Hello, how can I help you?',
    time: '10:02 AM',
  },
])

messages 数组存储了聊天卡片的数据，包括消息类型、消息文本和时间戳。

3. 渲染聊天卡片

<template v-for="message in messages" :key="message.time">
  <div :class="{ 'message': true, 'patient': message.type === 'patient', 'doctor': message.type === 'doctor' }">
    <img class="avatar" :src="message.avatar" alt="avatar" />
    <div class="message-content">
      <p>{{ message.message }}</p>
    </div>
  </div>
</template>

此模板循环遍历 messages 数组并为每个消息渲染一个聊天卡片。它根据消息类型应用不同的 CSS 类，以实现不同的样式。

4. 发送消息

const sendMessage = (message) => {
  messages.value.push({
    type: 'patient',
    message,
    time: '10:04 AM',
  })
}

sendMessage 函数允许用户发送新消息。它将新消息添加到 messages 数组，并自动更新聊天卡片列表。

总结与展望

开发这段代码的过程是一个宝贵的学习经历，让我深入了解了聊天卡片在实时聊天应用中的实现。未来，可以考虑以下拓展和优化：

• **消息附件支持：**允许用户发送图片、视频和文件等附件。
• **消息编辑和删除：**允许用户编辑或删除他们发送的消息。
• **消息状态指示：**显示消息是否已送达或已读。
• **可定制的聊天卡片样式：**允许用户自定义聊天卡片的外观和感觉。