HarmonyOS实战：腾讯IM之聊天详情页面搭建（二）

前言

鸿蒙版本腾讯 IM 的聊天功能十分复杂，需要开发者手动实现整个聊天对话的业务代码，这对开发者来说是个不小的挑战。本篇文章先从最基础的聊天对话列表开始教你一步一步实现完整的聊天功能，建议点赞收藏！

实现效果

先看本文最终的基本实现效果。

alt

需求分析

对话列表左右排列
支持发送文本消息
支持实时接收消息
支持拉取历史消息

技术实现

获取历史消息

当从会话列表进入聊天详情页面时，首先拉取最新历史消息。可以通过设置参数指定获取最近时长的历史消息,这里默认设置拉取最近一天的数据。

  let option: V2TIMMessageListGetOptio 
    option = {
        getType: V2TIMMessageGetType.V2TIM_GET_CLOUD_OLDER_MSG,
        userID: this.userId,
        count: 15,
        getTimeBegin: this.messageData!=undefined&&this.messageData.totalCount()>0 ? this.messageData.getDataAll()[0].timestamp:new Date().getTime(),
        getTimePeriod: 60 * 60 * 24000
      };
 V2TIMManager.getMessageManager().getHistoryMessageList(option)
      .then((messageList: V2TIMMessage[]) => {
        
      })

展示聊天列表

得到历史消息数据后，需要将数据绘制到页面上，同时注意对方和自己消息布局的排列。这里是使用 List 作为展示控件，同时使用鸿蒙原生的懒加载 LazyForEach 进行布局。

 List({ scroller: this.scroller }) {

      LazyForEach(this.messageData, (item: V2TIMMessage, index: number) => {
        ListItem() {
          this.ItemLayout(item)
        }
      }, (item: V2TIMMessage, index: number) => item.timestamp + "")

    }

注意 LazyForEach 的键值使用的是消息体的时间戳。

接着绘制 item 的布局页面，先绘制对方的 UI 布局,通过消息体提供的 isSelf 字段判断当前消息是不是自己发的，以此将对话布局显示在左侧。

 Row{
   Flex({ justifyContent: this.message.isSelf ? FlexAlign.End : FlexAlign.Start, direction: FlexDirection.Row })
     {
         if (!this.message.isSelf) {
           Image(this.message?.faceURL)
             .alt($r("app.media.head_default"))
             .flexShrink(0)
         }
    Text(this.getMessageForType(this.message))
                   
 }

更新实时消息

当对方发送新的消息时，需要及时更新到消息列表中显示，要实现实时消息的更新需要增加消息监听回调。

/**
   * 实时消息监听
   */
  advancedMsgListener: V2TIMAdvancedMsgListener = {
    onRecvNewMessage: (message: V2TIMMessage) => {
      if (message!=undefined&&message.userID == this.userId) {
        this.messageData.pushData(message)
        this.scroller.scrollEdge(Edge.Bottom)
        IMListViewModel.cleanConversationUnreadMessageCount(message.userID)
      }
    },
    onReceviceMessageRevoked: (msgID: string, operateUser: V2TIMUserFullInfo, reason: string) => {
        let result = this.messageData.getDataAll().filter((item) => {
          return msgID == item.msgID
        })
        if (result.length > 0) {
          let index = this.messageData.getDataAll().indexOf(result[0])
          this.messageData.deleteData(index)
          result[0].status = V2TIMMessageStatus.V2TIM_MSG_STATUS_LOCAL_REVOKED
          this.messageData.addData(index, result[0])
        }
    }

  }



MessageTestInterfaces.addAdvancedMsgListener(this.advancedMsgListener)

发送文本消息

实现完消息的展示之后，需要实现文本消息的发送，调用 IM SDK 提供的sendC2CTextMessage方法创建本地文本消息，然后发送即可。

 let sendMessage = V2TIMManager.getMessageManager().createTextMessage(text)
    if (sendMessage == null || sendMessage.status == V2TIMMessageStatus.V2TIM_MSG_STATUS_SENDING) {
      return
    }
    sendMessage.isSelf = true
    sendMessage.elemType = V2TIMElemType.V2TIM_ELEM_TYPE_TEXT
    sendMessage.timestamp = new Date().getTime()
    sendMessage.nickName = //用户名称
    sendMessage.faceURL =  //用户头像
    sendMessage.status = V2TIMMessageStatus.V2TIM_MSG_STATUS_SENDING
    let textContent = new V2TIMTextElem()
    textContent.text = text
    sendMessage.textElem = textContent
    this.inputContent = ""
    const result = V2TIMManager.getInstance().sendC2CTextMessage(text, this.userId);