跳到主要内容

自定义消息

在使用 Global IM UIKit 时，如果业务层有自定义消息类型的需求，需要通过 registerMessage 接口进行注册，以便于 Global IM UIKit 能够正确的解析和渲染该类型的消息。

registerMessage​

提示

registerMessage 接口仅在 kitApp.ready() 之前调用生效。

参数类型必填说明
messageTypeString是消息类型，由开发者自行定义，请勿以 RC: 开始进行定义，以避免与内置消息类型定义冲突。
optionsIRCKitRegisterMessageTypeOpts是消息配置项，其详细属性说明如下。

IRCKitRegisterMessageTypeOpts 配置说明

属性类型必填说明
isPersitedBoolean否是否存储；
  • false: 消息将不进入历史消息列表，因此 UI 将不显示；在接收到此类消息时，SDK 将通过 RCKitEvents.UNSCHEDULED_MESSAGES 事件通知给开发者处理。
  • true: 消息将在消息列表中显示，需要对应实现 digest 函数，如果希望以消息气泡形式显示，则需要提供 component 定义消息组件。
isCountedBoolean否是否计数，影响接收方收到消息时的未读数计数
isStatusMessageBoolean否是否为状态消息；状态消息不计数不存储，且不进入离线补偿，仅限用户在线时接收。
searchPropsArray of String否Electron 平台下用于搜索匹配的字段列表。
digestFunction否消息摘要计算函数，用于自定义消息在会话列表（最后一条消息）和消息列表（灰条消息）中的信息展示。若注册时提供了 component 配置，SDK 会在消息列表中优先使用 component 组件进行消息渲染。
componentIRCKitCustomMessageComponentOpts否消息气泡 UI 渲染组件定义，不配置的情况下，SDK 将通过 digest 摘要计算函数，渲染消息为灰条消息进行展示。

消息显示分类​

Global IM UIKit 中，所有消息按显示需求可以分为三类：

  • 通知类消息：通常为 isPersited 为 false 的消息，SDK 内部不处理，您可以通过注册 RCKitEvents.RECV_NEW_MESSAGES 事件接收此此类消息。
  • 灰条消息：此类消息在消息列表中会以灰条的形式展示，如群成员变更通知等，开发者需要提供 digest 摘要计算函数。一般情况下，灰条消息不计数（即 isCounted 为 false）。
  • 气泡消息：此类消息在消息列表中会以气泡的形式展示，如文本消息、图片消息等；开发者需要提供 component 组件定义。。

注册灰条消息​

此处以自定义类型 'Xyz' 类型消息举例，示例代码如下：

const XyzMessage = kitApp.registerMessageType('Xyz', {
  isCounted: true,
  isPersited: false,
  isStatusMessage: false,
  searchProps: ['content'],
  digest: (message, language) => {
    // message 为消息对象，可以用于读取消息内容
    // language 为当前使用的语言环境，如 `zh_CN`、`en_US` 等
    return '这是一条灰条消息';
  },
});

注册气泡消息​

  • Global IM UIKit 内部使用 Vue 作为 DOM 组件渲染引擎，因此，在使用接口定义自定义组件时，组件模版语法与 Vue 保持一致。

此处以自定义类型 'Xyz' 类型消息举例，示例代码如下：

const XyzMessage = kitApp.registerMessageType('Xyz', {
  isCounted: true,
  isPersited: true,
  isStatusMessage: false,
  searchProps: ['content'],
  digest: (message, language) => {
    // 对于气泡消息来说，digest 函数的返回值将只被使用于会话列表中的最后一条消息展示
    return '[XyzMessage]'
  },
  // 定义气泡消息组件
  component: {
    // 组件标签名称
    tag: 'xyz-message',
    // 组件模版
    template: `<div>{{ data }}</div>`,
    setup(props, ctx) {
      const { message } = props; // 消息对象
      return {
        data: message.content,
      };
    },
    // 样式表
    styles: [`
      .div {
        color: red;
      }
    `]
  }
});

发送自定义消息​

通过 sendMessage 接口发送即可，示例代码如下：

// 构建目标会话
const conversation = {
  conversationType: RongIMLib.ConversationType.PRIVATE,
  targetId: 'A'
};
// 构建消息
const msg = new XyzMessage({ content: 'hello' });
// 发送消息
const { code } = await kitApp.sendMessage(conversation, msg);
最后于 更新