跳到主要内容

自定义消息

自定义消息注册​

使用 RongIMLib.registerMessageType 方法来注册自定义消息，该方法会返回自定义消息构造函数。详细说明请参考 Web IMLib 自定义消息。

提示
  1. RongIMLib.registerMessageType 必须在 connect 之前调用，否则可能造成收取消息的行为异常。
  2. 请尽量把应用中所有涉及到的自定义消息统一一次注册，且同类型消息仅调用一次注册，便于管理。
typescript
const PersonMessage = RongIMLib.registerMessageType('s:person', true, true, [], false)

自定义消息发送​

  1. 构建自定义消息

    • 在会话页面发送自定义消息

      typescript
      // 构建自定义消息
      const message = new PersonMessage({ name: 'someone', age: 18 });

      // 发送消息
      const openedConversation = uni.$RongKitStore.conversationStore.openedConversation;

      if (openedConversation) {
        // 需要获取 conversation 的 key 才能发送消息。
        uni.$RongKitStore.messageStore.sendMessage(openedConversation.key, message, {}).then((code) => {
          console.log('发送消息', code);
        });
      }

    • 给指定会话发送自定义消息

      typescript
      // 构建自定义消息
      const message = new PersonMessage({ name: 'someone', age: 18 });

      const conversationOption = {
        conversationType: RongIMLib.ConversationType.PRIVATE, // 会话类型支持单聊、群聊
        targetId: 'YourTargetId' // 会话目标 ID
      }

      // 创建会话，内存中已存在返回已存在的会话
      const conversation = uni.$RongKitStore.conversationStore.createCachedConversation(conversationOption);

      // 需要获取 conversation 的 key 才能发送消息。
      uni.$RongKitStore.messageStore.sendMessage(conversation.key, message, {}).then((code) => {
        console.log('发送消息', code);
      });

消息列表展示​

  1. 创建自定义消息 vue 组件， 示例如下：
提示

自定义消息若使用 message-bubble 组件，需要通过 message.messageDirection 处理消息方向，RongIMLib.MessageDirection.SEND(1)表示发送消息，RongIMLib.MessageDirection.RECEIVE(2)表示接收消息。

vue
<template>
  <!-- 通用消息项组件 -->
  <message-item-common :message="message">
    <!-- 消息气泡组件 -->
    <message-bubble :reverse="message.messageDirection === RongIMLib.MessageDirection.SEND">
      <!-- 自定义消息内容 -->
      <view class="rc-custom-msg">自定义消息：{{ message.content }}</view>
    </message-bubble>
  </message-item-common>
</template>

<script setup lang="ts">
  import { PropType, defineProps } from 'vue';
  // 通用消息项组件
  import MessageItemCommon from '@/RCUIKit/pages/chat/message/message-item-common.vue';
  // 消息气泡组件
  import MessageBubble from '@/RCUIKit/pages/chat/message/message-bubble.vue';
  import { MessageItemType } from '@/RCUIKit/pages/chat/message/message-item.vue';
  
  const props = defineProps({
    message: {
      type: Object as PropType<MessageItemType>,
      required: true,
    },
  });	
</script>
<style lang="scss" scoped>
.rc-custom-msg {
  padding: 10px 8px;
}
</style>

  1. 在 message-item.vue 中引入自定义消息组件，示例如下：
vue
<template>
  <!-- 增加自定义消息类型识别 -->
  <message-custom v-else-if="message.messageType === 's:person'" :message="message"/>
</template>

<script setup lang="ts">
  import { PropType, defineProps } from 'vue';
  // 自定义消息组件
  import MessageCustom from './message-custom.vue'; // 路径需要按照您项目路径填写
</script>

会话列表最后一条消息展示​

在 conversation-item.vue 组件对 latestMessage 计算属性增加自定义消息类型的处理，示例如下：

typescript
const latestMessage = computed(() => {
  // latestMessage 的其他处理逻辑...

  // === 如需处理自定义消息会最后一条消息展示需要在此处增加逻辑 ===
  const customText = customLatestMessage(props.data.latestMessage);
	if(customText) {
		return customText;
	}
  // === end ===

  // latestMessage 的其他处理逻辑...
});

// 自定义消息最后一条消息展示示例：
const customLatestMessage = (message: IKitMessage) => {
	if(message.messageType === 's:person') { // 请将 's:person' 替换为您实际注册的消息类型
		return '我是：'+ message.content.name; // 需要展示的自定义消息内容
	}
}
最后于 更新