跳到主要内容

消息系统实现文档

概述​

邮轮穿舱件管理系统小程序端的消息系统实现了完整的消息列表展示、消息类型管理、消息状态跟踪等功能。系统采用WebSocket实时通信机制，支持消息的实时接收和状态更新。

系统架构​

核心组件关系图​

flowchart TD
    A[Message页面] --> B[WebSocket连接]
    A --> C[消息列表数据]
    A --> D[消息状态管理]
    B --> E[实时消息接收]
    C --> F[消息列表渲染]
    D --> G[未读消息计数]
    E --> A
    G --> H[全局状态更新]

文件依赖关系​

flowchart TD
    A[pages/message/index.js] --> B[app.js]
    A --> C[pages/message/index.wxml]
    A --> D[pages/message/index.wxs]
    A --> E[pages/message/index.less]
    B --> F[utils/eventBus.js]
    C --> D
    C --> E

功能实现详解​

1. 消息列表管理​

数据结构​

消息系统采用分层数据结构：

  • 消息列表：包含多个用户对话对象
  • 用户对话对象：包含用户信息和消息数组
  • 单条消息：包含内容、时间、阅读状态等
// 消息列表数据结构
messageList: [
  {
    userId: "用户ID",
    name: "用户名",
    avatar: "头像URL",
    messages: [
      {
        content: "消息内容",
        read: false, // 阅读状态
        // 其他消息属性
      }
    ]
  }
]

消息列表获取​

系统通过异步API获取消息列表：

getMessageList() {
  fetchMessageList().then(({ data }) => {
    this.setData({ messageList: data, loading: false });
  });
}

2. 消息类型管理​

系统支持多种消息类型，通过WebSocket的type字段进行区分：

socket.onMessage((data) => {
  data = JSON.parse(data);
  if (data.type === 'message') {
    // 处理普通消息
    const { userId, message } = data.data;
    // 消息处理逻辑
  }
});

3. 消息状态管理​

阅读状态跟踪​

系统通过read字段跟踪每条消息的阅读状态：

// 标记消息为已读
setMessagesRead(userId) {
  const { user } = this.getUserById(userId);
  user.messages.forEach((message) => {
    message.read = true;
  });
  // 更新全局未读计数
  app.setUnreadNum(this.computeUnreadNum());
}

未读消息计算​

系统实时计算未读消息数量：

computeUnreadNum() {
  let unreadNum = 0;
  this.data.messageList.forEach(({ messages }) => {
    unreadNum += messages.filter((item) => !item.read).length;
  });
  return unreadNum;
}

4. 实时消息处理​

WebSocket消息处理流程​

sequenceDiagram
    participant W as WebSocket
    participant M as Message页面
    participant A as App全局
    W->>M: 接收新消息
    M->>M: 解析消息数据
    M->>M: 更新消息列表
    M->>M: 重新排序对话
    M->>M: 更新界面显示
    M->>A: 更新全局未读计数

5. 界面交互实现​

消息列表界面​

使用TDesign组件库实现消息列表展示：

<t-cell
  wx:for="{{ messageList }}"
  image="{{ item.avatar }}"
  title="{{ item.name }}"
  description="{{ item.messages[item.messages.length - 1].content }}"
  bind:tap="toChat"
>
  <t-badge slot="right-icon" count="{{ utils.computeUnreadNum(item.messages) }}" />
</t-cell>

WXS辅助函数​

使用WXS进行客户端计算，提升性能：

// 计算未读消息数量
function computeUnreadNum(messages) {
  var cnt = 0;
  for (var i = 0; i < messages.length; i++) if (!messages[i].read) cnt++;
  return cnt;
}

// 判断消息是否全部已读
function isRead(messages) {
  for (var i = 0; i < messages.length; i++) if (!messages[i].read) return false;
  return true;
}

6. 样式设计​

系统采用响应式设计，确保在不同设备上的良好显示：

.message-list {
  height: 0;
  flex-grow: 1;
}

.content > view {
  width: 560rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.content.unread > view {
  width: 510rpx;
}

核心算法分析​

消息查找算法​

系统使用线性查找算法通过用户ID查找对话：

getUserById(userId) {
  let index = 0;
  while (index < this.data.messageList.length) {
    const user = this.data.messageList[index];
    if (user.userId === userId) return { user, index };
    index += 1;
  }
}
  • 时间复杂度：O(n)
  • 空间复杂度：O(1)

消息排序策略​

新消息到达时，系统将对应对话移到列表顶部：

this.data.messageList.splice(index, 1);
this.data.messageList.unshift(user);

性能优化措施​

  1. WXS计算：在客户端进行未读消息计算，减少数据传输
  2. 虚拟滚动：使用scroll-view组件实现长列表的流畅滚动
  3. 事件委托：通过事件冒泡机制处理消息点击事件
  4. 数据局部更新：只更新变化的数据部分，减少重渲染

错误处理机制​

系统包含完善的错误处理：

  1. 网络异常：通过Promise的reject机制处理请求失败
  2. 数据格式异常：使用JSON.parse的异常捕获
  3. 边界情况：处理用户ID不存在等边界情况

索引​

消息系统实现了完整的消息管理功能，包括：

  • 实时消息接收和处理
  • 消息状态跟踪和管理
  • 未读消息计数和显示
  • 良好的用户体验和性能优化

系统采用模块化设计，各组件职责清晰，便于维护和扩展。