网易云信 QChat Web SDK 的QChatMsgServiceInterface接口提供getLastMessageOfChannels方法，用于获取多个频道的最后一条消息的初始数据。该方法的响应QChatGetLastMessageOfChannelsResult返回的结果为 map, key 值对应每一个channelId，value 值是消息体QChatMessage。

UI 示例

频道列表显示最后一条消息的简易 UI 示例如下：

前提条件

已登录圈组，并已创建圈组服务器和频道。

实现流程

API 调用时序

以下时序图可能因为网络问题而显示异常。如果显示异常，一般刷新当前页面即可正常显示。

流程说明

本节仅对上图中标为橙色的流程进行说明，其他流程请参考相关文档。例如：

• 服务器成员相关说明，可参见圈组服务器成员管理。
• 用户是否能访问某频道的相关说明，可参见频道黑白名单。

1. 登录圈组前，监听消息接收事件（message）和消息更新事件（messageUpdate）。

2. 获取频道最后一条消息的初始数据。

   1. 调用getChannelsByPage拉取频道列表。

   2. 调用getLastMessageOfChannels获取至多 20 个频道的最后一条消息。

   • 单次调用最多可传入 20 个 channelId。
   • 您需自行维护调用该方法返回的结果。
   • 被撤回的消息仍能通过调用该方法查到，但被删除的消息无法查到。如果最后一条消息是撤回消息，推荐把对应的最后一条消息置空，并给出提示表明“撤回消息”。
   3. 在您的应用内存中维护相关频道的最后一条消息。

3. 参照下表，在您的应用层自行开发，实现后续频道最后一条消息在不同场景下的动态更新。

   场景	场景说明	推荐处理方法
   事件触发更新最后一条消息	频道内，其他用户发送消息或重发消息，触发message事件	更新频道最后一条消息
   	频道内，其他用户撤回、更新或删除消息，触发messageUpdate事件	判断撤回、更新、删除的消息是否为频道最后一条消息，若非最后一条消息，则忽略；若为最后一条消息，且： 为撤回或删除消息，则把最后一条消息置空 为更新消息，则更新频道最后一条消息
   用户自己调用 API 后触发更新最后一条消息	自己在频道内发送、重发或更新消息	更新频道内最后一条消息
   	自己在频道内撤回或删除消息	判断撤回或删除的消息是否为频道最后一条消息，若非最后一条消息，则忽略；若为最后一条消息，则把最后一条消息置空

示例代码

获取初始数据

/* 初始数据获取，设置 lastMessage */
const channels = await qchat.qchatChannel.getChannelsByPage({
  serverId: 'YOUR_SERVER_ID',
  timetag: 0,
  limit: 100
})

if (channels.datas.length === 0) {
  return
}

const channelsMap = channels.datas.reduce((total, next) => {
  channelsMap[next.channelId] = next
  return channelsMap
}, {})
const serverId = channels.datas[0].serverId
const channelIds = channels.datas.map(item => item.channelId)
const lastMessageMap = await qchat.qchatMsg.getLastMessageOfChannels({
  serverId,
  channelIdList: channelIds
})
Object.keys(lastMessageMap).forEach(key => {
  channelsMap[key].lastMessage = lastMessageMap[key]
})

事件触发更新最后一条消息

/* 设置监听，触发的更新 */
qchat.on('message', function (msg) {
  channelsMap[msg.channelId].lastMessage = msg
})
qchat.on('messageUpdate', function (msg) {
  // 撤回，单向删除消息把 lastMessage 设置为空
  if (msg.status === 1 || msg.status === 2) {
    channelsMap[msg.channelId].lastMessage = null
  } else {
    channelsMap[msg.channelId].lastMessage = msg
  }
})

用户自己调用API后触发更新最后一条消息

/* 自己调用的 API 导致的 lastMessage 更新 */
// 发送消息
const theSendMessage = await qchat.qchatMsg.sendMessage({
  serverId: 'YOUR_SERVREID',
  channelId: 'YOUR_CHANNELID',
  type: 'text',
  body: 'This is a text message'
})
channelsMap[theSendMessage.channelId].lastMessage = theSendMessage

// 更新消息
const theUpdateMessage = await qchat.qchatMsg.updateMessage({
  message: {
    ...theSendMessage,
    body: 'This is a text message after update'
  }
})
channelsMap[theSendMessage.channelId].lastMessage = theUpdateMessage

// 重发消息
const theResendMessage = await qchat.qchatMsg.resendMessage(theSendMessage)
channelsMap[theResendMessage.channelId].lastMessage = theResendMessage

// 撤回消息
await qchat.qchatMsg.revokeMessage({
  message: theSendMessage
})
channelsMap[theSendMessage.channelId].lastMessage = null

// 删除消息
await qchat.qchatMsg.deleteMessage({
  message: theSendMessage
})
channelsMap[theSendMessage.channelId].lastMessage = null

相关信息

圈组各端 （Android、iOS、Windows 和 含圈组版 Web）监听消息更新、消息撤回和消息删除的方式略有差异，具体为：Android 将消息更新、消息撤回和消息删除三个事件进行区分；而其他端的消息撤回和消息删除事件，都并入消息更新事件，不进行区分。

各端的相关事件回调接口如下：

	Android	iOS	Windows	含圈组版 Web
监听消息更新	observeMessageUpdate	onMessageUpdate:	RegUpdatedCb	messageUpdate
监听消息撤回	observeMessageRevoke
监听消息删除	observeMessageDelete