tencent cloud

文档反馈

最后更新时间:2024-01-31 14:16:47
    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 中,使用 messageItemBuildercustomMessageItemBuilder,渲染自定义消息。 示例代码如下:
    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 中,并调用 TIMUIKitChatControllersendMessage 接口发送。 此处演示示例以直接通过更多功能面板,创建并发送一条自定义消息为例。
    1. 实例化一个消息控制器,并传入 TIMUIKitChat 中。
    final TIMUIKitChatController _timuiKitChatController =
    TIMUIKitChatController();
    
    return TIMUIKitChat(
    controller: _timuiKitChatController,
    // ...其他参数
    )
    2. TIMUIKitChatmorePanelConfig 属性中的 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
    }
    }
    }
    
    联系我们

    联系我们,为您的业务提供专属服务。

    技术支持

    如果你想寻求进一步的帮助,通过工单与我们进行联络。我们提供7x24的工单服务。

    7x24 电话支持