跳到主要内容

展示用户信息

在 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
最后于 更新