跳到主要内容

展示用户信息

在 IMKit UI 上展示用户信息数据需要由应用程序提供。本文描述了应用程序如何为 IMKit SDK 提供用户信息数据,具体包含:

  • 用户头像、昵称
  • 群组名称、头像
  • 群组成员数量
  • 群组内成员的头像、昵称
提示

融云服务端不向 SDK 提供用户与群组信息托管服务。因此 SDK 所需要的用户信息必须由应用开发者主动从 App 服务端获取,并提供给 SDK。

实现向 SDK 提供用户信息的方法

在项目中创建 custom_service.js 文件,在适当的调用位置导入 custom_service.js 文件,供 IMKit 的初始化时在 service 中传入。

imkit.init({
appkey: yourAppKey,
service: custom_service,
libOption: libOption
});

应用程序需要在 custom_service.js 中实现以下方法:

参数类型必填说明
getUserProfileFunction获取用户的昵称、头像。支持异步返回用户信息对象。
getConversationProfileFunction获取会话的昵称、头像。支持异步返回会话信息。
getGroupMembersFunction获取群组成员的昵称、头像。支持异步返回群组信息,返回值为群成员对象数组,数组对象包含字段请参考 getGroupMembers 返回值说明。
提示

返回值中的属性名称不可自定义或者修改。必填返回值属性不可缺失,如缺失会引起报错。详见下文返回值说明

在根据 SDK 返回的会话列表获取会话信息(conversationInfo)时,建议您实现向 App 服务端批量请求数据的方法,以减少请求次数。custom_service.js 的代码示例:

export default {
// 获取用户详情
getUserProfile: (userId) => {
// 需要通过 userId 向应用服务器获取 user 信息,拼接成如下格式
// 注意:userInfo 的 Key 不可修改
const userInfo = {
id: userId,
name: "用户姓名",
portraitUri: "用户头像 URI",
};
return Promise.resolve(userInfo);
},

// 获取会话详情
getConversationProfile: (conversations) => {
// SDK 返回 conversations 为会话列表,可根据返回的 conversations 向应用服务器请求会话详情信息。
// 请根据具体 conversation 信息匹配 name、portraitUri 拼接到 conversationInfo 信息中。

// 方式 1 为了减少请求次数,可以批量请求(推荐),需服务端支持批量请求接口
return new Promise((resolve) => {
// 请将 mockBatchFetchGroupInfo 方法替换成真实请求方法
mockBatchFetchGroupInfo(conversations).then(res => {
const list = conversations.map(item => {
// 代码示例,可根据真实接口返回的数据处理
const info = res.find(con => con.targetId === item.targetId)

return {
...item,
name: info.name,
portraitUri: info.portraitUri,
// 如果是群组会话,则需要群组成员数量
memberCount: con.conversationType === RongIMLib.ConversationType.GROUP ? info.memberCount : 0
}
})
resolve(list)
})
})

// 方式 2 可以通过 forEach 方式遍历请求
const promises = [];
conversations.forEach((conversation) => {
promises.push(new Promise(resolve => {
// 请将 mockFetchGroupInfo 方法替换成真实请求方法
mockFetchGroupInfo(conversation).then((res) => {
resolve({
...conversation,
name: res.name,
portraitUri: res.portraitUri,
// 如果是群组会话,则需要群组成员数量
memberCount: conversation.conversationType === RongIMLib.ConversationType.GROUP ? res.memberCount : 0
})
})
}))
});
return Promise.all(promises);
},

// 获取群组详情
getGroupMembers: (conversation) => {
// 通过 conversation 的 targetid 获取群组成员信息
// groupMembers 为群组成员 list,需要构建成对象数组。
// 特别注意:如果传递的群组成员信息不准确会影响 @ 信息的发送和群组成员昵称的展示
const groupMembers = [
{
id: `【成员】成员 ID`,
name: `【成员】name`,
portraitUri: `【成员】头像 URI`,
},
];
return Promise.resolve(groupMembers);
},
};

返回值说明

  • getUserProfile 返回值说明

    参数类型必填说明
    idstring用户 UserId
    namestring用户昵称
    portraitUristring用户头像 URI
  • getConversationProfile 返回值说明

    参数类型必填说明
    conversationTypeConversationType会话类型,可在参数 conversation 获取
    targetIdstring目标 Id,可在参数 conversation 获取
    namestring会话昵称
    portraitUristring会话头像 URI
    memberCountnumber群成员数量,此属性仅对群组有效
  • getGroupMembers 返回值说明

    参数类型必填说明
    idstring群成员 UserId
    namestring群成员昵称
    portraitUristring群成员头像 URI