tencent cloud

TUIKit 默认实现了文本、图片、语音、视频、文件等基本消息类型的发送和展示，如果这些消息类型满足不了您的需求，您可以新增自定义消息类型。

自定义消息

如果基本消息类型不能满足您的需求，您可以根据实际业务需求自定义消息。
下文以发送一条可跳转至浏览器的超文本作为自定义消息为例，帮助您快速了解实现流程。

下面我们分步骤讲解使用自定义消息。

展示自定义消息

自定义消息携带的信息，以 String 格式，存储于 V2TimMessage.V2TimCustomElem.data 中。如果需要传递的信息量大，建议使用 JSON 格式。

展示自定义消息基本逻辑：解析时，将 JSON String 解析成 Map，用于实例化一个预定义的类，以该对象内的数据，渲染自定义消息体。

1. 定义一个类，用于自定义消息解析后的结构。并完成一个 fromJSON 的方法，通过 Map 对其实例化。
   以上述包含链接及文本的自定义消息格式举例：

   class CustomMessage {
   // 此处的内容请根据需要自行定义
   String? link;
   String? text;
   String? businessID;
   
   CustomMessage.fromJSON(Map json) {
    link = json["link"];
    text = json["text"];
    businessID = json["businessID"];
   }
   }
   

2. 编写一个方法，用于实现对自定义消息的解析，得到一个数据对象。
   示例代码如下：

   CustomMessage? getCustomMessageData(V2TimCustomElem? customElem) {
   try {
    if (customElem?.data != null) {
      final customMessage = jsonDecode(customElem!.data!);
      return CustomMessage.fromJSON(customMessage);
    }
    return null;
   } catch (err) {
    return null;
   }
   }
   

3. 在 TIMUIKitChat 中，使用 messageItemBuilder 内 customMessageItemBuilder，渲染自定义消息。
   示例代码如下：

   messageItemBuilder: MessageItemBuilder(
   customMessageItemBuilder: (message, isShowJump, clearJump) {
    final CustomMessage customMessage = getCustomMessageData(message.customElem);
    if (linkMessage != null) {
      final String option1 = linkMessage.link ?? "";
      return Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(linkMessage.text ?? ""),
          MarkdownBody(
            data: TIM_t_para(
                "[查看详情 >>]({{option1}})", "[查看详情 >>]($option1)")(
                option1: option1),
            styleSheet: MarkdownStyleSheet.fromTheme(ThemeData(
                textTheme: const TextTheme(
                    bodyText2: TextStyle(fontSize: 16.0))))
                .copyWith(
              a: TextStyle(color: LinkUtils.hexToColor("015fff")),
            ),
          )
        ],
      );
    }
   }
   ),
   

发送自定义消息

发送自定义消息基本步骤：使用 SDK 创建一条自定义消息，将要发送的内容转成 JSON String 格式放入 data 中，并调用 TIMUIKitChatController 的 sendMessage 接口发送。
此处演示示例以直接通过更多功能面板，创建并发送一条自定义消息为例。

1. 实例化一个消息控制器，并传入 TIMUIKitChat 中。

   final TIMUIKitChatController _timuiKitChatController =
      TIMUIKitChatController();
   
   

return TIMUIKitChat(
controller: _timuiKitChatController,
// ...其他参数
)


2. 为 TIMUIKitChat 的 morePanelConfig 属性中的 extraAction 数组新增一项，添加自定义消息发送按钮。
   更多功能面板的按钮，主要由文本 title 和图片 icon 组成。
   示例代码如下：

   morePanelConfig: MorePanelConfig(
   extraAction: [
    MorePanelItem(
        id: "customMessage",
        title: imt("自定义消息"),
        onTap: (c) {
          _sendCustomMessage();
        },
        icon: Container(
          height: 64,
          width: 64,
          margin: const EdgeInsets.only(bottom: 4),
          decoration: const BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(5))),
          child: SvgPicture.asset(
            "images/custom-msg.svg",
            package: 'tencent_cloud_chat_uikit',
            height: 64,
            width: 64,
          ),
        )
    ),
    // ... 其他更多功能面板按钮
   ],
   // ...其他参数
   )
   

3. 实现上述步骤所需的自定义消息发送方法。
   示例：点击消息发送按钮后就可以创建一条自定义消息发送，代码如下：

   _sendCustomMessage() async {
   // 创建自定义消息，下方的data/desc/extension可由您自行定义内容。
   V2TimValueCallback<V2TimMsgCreateInfoResult> createCustomMessageRes =
      await TencentImSDKPlugin.v2TIMManager
          .getMessageManager()
          .createCustomMessage(
            data:
                '{"businessID":"text_link","link":"https://www.tencentcloud.com/document/product/269/3794?from_cn_redirect=1","text":"欢迎加入腾讯云IM大家庭！","version":4}',
            desc: '自定义desc',
            extension: '自定义extension',
          );
   if (createCustomMessageRes.code == 0) {
    String? id = createCustomMessageRes.data?.id;
    // 发送自定义消息
    V2TimValueCallback<V2TimMessage>? sendMessageRes =
        await _timuiKitChatController.sendMessage(
            messageInfo: createCustomMessageRes.data?.messageInfo);
    if (sendMessageRes!.code == 0) {
      // 发送成功
      sendMessageRes.data?.customElem?.data; //自定义data
      sendMessageRes.data?.customElem?.desc; //自定义desc
      sendMessageRes.data?.customElem?.extension; //自定义extension
    }
   }
   }