跳到主要内容

会话页面自定义

消息点击事件​

为了避免内存泄露，请将监听保存，在必要的时候移除

MessageClickListener 的所有方法均为可选方法，可以按需实现，此处为了方便展示，将所有方法都做了默认实现

let msgClickListener : MessageClickListener = {
  onMessagePortraitClick: (message: Message, userId: string) => {
    // 消息头像点击事件
    // true 由 App 处理该事件，SDK 不再处理。false 由 SDK 处理
    return false;
  },
  onMessagePortraitLongClick: (message: Message, user: UserInfoModel) => {
    // 消息头像长按事件
    // true 由 App 处理该事件，SDK 不再处理。false 由 SDK 处理
    return false;
  },
  onMessageClick: (message: Message) => {
    // 消息点击事件
    // true 由 App 处理该事件，SDK 不再处理。false 由 SDK 处理
    return false;
  },
  onMessageLongClick: (message: Message) => {
    // 消息长按事件
    // true 由 App 处理该事件，SDK 不再处理。false 由 SDK 处理
    return false;
  },
  onMessageRecallEditClick: (message: Message) => {
    // 消息撤回编辑事件
    // true 由 App 处理该事件，SDK 不再处理。false 由 SDK 处理
    return false;
  },
  onMessageLinkClick: (message: Message, url: string) => {
    // 文本消息超链接点击事件
    // true 由 App 处理该事件，SDK 不再处理。false 由 SDK 处理
    return false;
  },
  onMessageEmailClick: (message: Message, email: string) => {
    // 文本消息 email 点击事件
    // true 由 App 处理该事件，SDK 不再处理。false 由 SDK 处理
    return false;
  },
  onMessagePhoneClick: (message: Message, phone: string) => {
    // 文本消息手机号点击事件
    // true 由 App 处理该事件，SDK 不再处理。false 由 SDK 处理
    return false;
  },
}
RongIM.getInstance().conversationService().addMessageClickListener(msgClickListener);

增加消息气泡的长按事件​

let msgLongClickAction :ItemLongClickAction<Message> = {
  obtainTitle: (context: Context, data: Message): string | Resource => {
    return "自定义的消息长按事件"
  },
  onClick: (context: Context, data: Message): void => {
    promptAction.showToast({message : "点击了自定义的消息长按事件"})
  },
  onFilter: (data: Message): boolean => {
    // 是否显示该长按事件？true 显示；false 不显示
    // 开发者可以根据 Message 对象的会话类型或者消息类型决定是否显示
    return true;
  },
  // 自定义的消息长按事件 Id，相同的 Id 的长按事件只会增加一次
  actionId: 'CustomMessageActionId'
}
RongIM.getInstance().conversationService().addMessageItemLongClickAction(msgLongClickAction);

增加“更多”的点击事件​

长按消息，点击“更多”按钮之后，底部会有个更多的功能栏，往里面增加点击事件。

let msgMoreAction : MessageMoreAction = {
  actionId: 'message_more_forward',// 动作 Id
  location: 100, // 按钮将放置在底部，根据 location 值，按照从小到大的顺序依次向右排列。
  icon: $r("app.media.rc_message_more_forward"), // 图标

  onClick: (context: Context, data: Message[]): boolean => {
    // 处理自定义的点击事件
    // return true ：聊天页面依旧处于多选状态
    // return false : 聊天页面退出多选状态
    promptAction.showToast({message : "点击了聊天页面底部的更多按钮"});
    return true
  },
  onFilter: (data: Message[]): boolean => {
    // 是否显示该按钮，true 显示，false 不显示
    return true;
  }
}
RongIM.getInstance().conversationService().addMessageMoreAction(msgMoreAction)

增加 + 号扩展栏插件​

实现插件​

import { IBoardPlugin } from '@rongcloud/imkit';
import { ConversationIdentifier } from '@rongcloud/imlib';
import { promptAction } from '@kit.ArkUI';

/**
 * 自定义插件
 */
export class CustomInfoMessagePlugin implements IBoardPlugin {

  /**
   * 返回插件的标题
   * @param context 上下文
   * @returns 标题
   */
  obtainTitle(context: Context): string | Resource {
    return "自定义小灰条消息"
  }

  /**
   * 返回插件的图片
   * @param context 上下文
   * @returns 图片
   */
  obtainImage(context: Context): Resource {
    return $r("app.media.startIcon");
  }

  /**
   * 插件的点击事件
   * @param context 上下文
   */
  onClick(context: Context, conId: ConversationIdentifier): void {
    if (!conId) {
      return;
    }

    // 处理具体的点击事件
    // 开发者按照实际情况处理
    promptAction.showToast({ message: '点击了自定义插件' })
  }

  /**
   * 是否在会话中显示该插件
   * @param conId 会话标识
   * @returns 是否显示，true 显示；false 不显示
   */
  onFilter(conId: ConversationIdentifier): boolean {
    return true;
  }
}

将插件放到扩展栏里面​

需要在聊天页面出现前调用

RongIM.getInstance().conversationService().addBoardPlugin(new CustomInfoMessagePlugin());

消息头像圆角控制​

可以通过下面的代码配置消息头像圆角控制，需要在会话页面展示前设置。

let config = RongIM.getInstance().conversationService().getConversationConfig();
config.setMessageAvatarStyle(AvatarStyle.Cycle);
RongIM.getInstance().conversationService().setConversationConfig(config);

修改消息可撤回的最大时间​

IMKit 默认允许在消息发送后 180 秒内撤回。您可以通过全局配置调整该上限，需要在会话页面展示前设置。

let config = RongIM.getInstance().conversationService().getConversationConfig()
config.setMaxRecallDuration(180)
RongIM.getInstance().conversationService().setConversationConfig(config)

修改撤回后可重新编辑的时间​

IMKit 默认允许在消息撤回后 30 秒内可点击重新编辑，仅文本消息支持撤回再编辑。您可以通过全局配置调整该上限，需要在会话页面展示前设置。

let config = RongIM.getInstance().conversationService().getConversationConfig()
config.setMaxEditableDuration(30)
RongIM.getInstance().conversationService().setConversationConfig(config)

文本消息字体高亮颜色​

IMKit 默认允许配置 SDK 内置文本消息中的url 手机号 @信息等高亮字体颜色，默认黑色。您可以通过全局配置调整，需要在会话页面展示前设置。

let config = RongIM.getInstance().conversationService().getConversationConfig()
config.setStyleFontColor(Color.Blue)
RongIM.getInstance().conversationService().setConversationConfig(config)

设置文件消息的文件类型图标​

IMKit 默认允许配置 SDK 内置文件消息的文件类型图标。您可以通过全局配置调整，需要在会话页面展示前设置。

可以通过 setFileMessageIcons 覆盖默认配置。

let config = RongIM.getInstance().conversationService().getConversationConfig()
//设置图片
let iconsMap: Map<string, Resource> = new Map<string, Resource>();
//覆盖sdk默认图片
iconsMap.set('doc', $r("app.media.doc_icon"));
iconsMap.set('mp3', $r("app.media.mp3_icon"));
iconsMap.set('pdf', $r("app.media.pdf_icon"));
iconsMap.set('rmvb', $r("app.media.rmvb_icon"));
iconsMap.set('default', $r("app.media.rc_default_icon"));
config.setFileMessageIcons(iconsMap);
RongIM.getInstance().conversationService().setConversationConfig(config)

可以通过 getFileMessageIcons 获取文件消息内的文件类型图标map。

let config = RongIM.getInstance().conversationService().getConversationConfig()
config.getFileMessageIcons();

可以通过 getFileMessageIcon 获取文件消息内的文件类型图标，如果找不到，返回 sdk 内置的默认图标。

let config = RongIM.getInstance().conversationService().getConversationConfig()
config.getFileMessageIcon('doc');

会话页面事件​

IMKit 提供了会话页面事件监听器 ConversationEventListener，可监听会话页面中输入@时跳转用户列表选择用户事件、当输入状态变化时的事件。需要在会话页面展示前设置。

import {
  ConversationEventListener
} from '@rongcloud/imkit';

export interface ConversationEventListener {
  /**
   * 输入@时，跳转用户列表选择用户
   * @param select 选中的用户信息
   */
  onInputMention?: (select: (user: UserInfoModel) => void) => void;

  /**
   * 当输入状态变化时
   * @param isEditing
   */
  onEditChange?: (isEditing: boolean) => void;
}

使用 RongIM 的 addConversationEventListener、removeConversationEventListener 方法添加或者监听器。

建议添加监听后，在合适的时机移除，避免内存泄露。如果在页面中监听，建议在 aboutToAppear 调用，在 aboutToDisappear 移除监听。

// 添加监听器
RongIM.getInstance().conversationService().addConversationEventListener(listener);
// 移除监听器
RongIM.getInstance().conversationService().removeConversationEventListener(listener);

输入@时跳转页面并返回数据​

当会话页面输入框输入@时，会触发以下方法。如果未设置，SDK 默认不处理该事件。

处理流程：

  1. 收到 onInputMention 时跳转到用户列表页面选择用户；
  2. 返回到当前页面后，调用 select 回传 UserInfoModel 给SDK。
let conversationEventListener: ConversationEventListener = {
  onInputMention: (select: (user: UserInfoModel) => void) => {
    if (this.conId.conversationType === ConversationType.Group) {
      // 1. 跳转到用户列表页面选择用户;
      // new NavPathStack().pushPath();
      // 2. 调用 select 回传 UserInfoModel 给SDK。
      const userInfo = new UserInfoModel('userId', 'userName', '')
      select(userInfo);
    }
  }
}

输入状态发生变化​

当会话页面输入状态发生变化时，会触发以下方法。如果未设置，SDK 默认不处理该事件。

let conversationEventListener: ConversationEventListener = {
    onEditChange: (isEditing: boolean) => {
      // isEditing代表输入状态发生变化
    }
}
参数类型说明
isEditingboolean是否输入状态
最后于 更新