tencent cloud

文档反馈

Web & H5 & Uniapp (Vue)

最后更新时间:2024-02-01 10:33:17

    功能描述

    @tencentcloud/chat-uikit-vue 从 v2.0.0 版本开始,已支持 C2C 会话“对方正在输入”功能, 效果如下:
    开启“对方正在输入”
    关闭“对方正在输入”
    
    
    
    
    
    
    显示“对方正在输入...”的规则:
    1. 开启“对方正在输入”开关(默认已开启)。
    2. 在当前 C2C 会话中,对方在30秒内向您发送过消息且当前正在输入文字。

    开启/关闭对方正在输入

    “对方正在输入”为默认开启,您无需重复按照以下步骤进行开启。
    import { TUIStore, StoreName } from "@tencentcloud/chat-uikit-engine";
    
    // 开启对方正在输入
    // enable typing
    TUIStore.update(StoreName.APP, "enableTyping", true);
    
    // 关闭对方正在输入
    // disable typing
    TUIStore.update(StoreName.APP, "enableTyping", false);

    扩展资料: TUIKit 内部是如何实现“对方正在输入...”的?

    说明:
    以下内容仅为辅助阅读资料,对方正在输入功能已在 TUIKit 中默认包含,不需要用户手动实现。
    1. 发送端:监听输入的开始与结束,向对端发送在线消息
    TUIKit/components/TUIChat/message-input/index.vue, 可以通过 TUIChatService.enterTypingState() 发送开启输入状态,通过 TUIChatService.leaveTypingState() 发送结束输入状态。
    // TUIKit/components/TUIChat/message-input/index.vue
    const onTyping = (inputContentEmpty: boolean, inputBlur: boolean) => {
    sendTyping(inputContentEmpty, inputBlur);
    };
    
    // TUIKit/components/TUIChat/utils/sendMessage.ts
    export const sendTyping = (inputContentEmpty: boolean, inputBlur: boolean) => {
    if (!inputContentEmpty && !inputBlur) {
    TUIChatService.enterTypingState();
    } else {
    TUIChatService.leaveTypingState();
    }
    };
    2. 接收端: 监听发送端输入状态并展示
    TUIKit/components/TUIChat/chat-header/index.vue ,通过监听 typingStatus 监听 C2C 会话中对端输入状态。
    TUIStore.watch(StoreName.CHAT, {
    typingStatus: (status: boolean) => {
    typingStatus.value = status;
    switch (typingStatus.value) {
    case true:
    currentConversationName.value =
    TUITranslateService.t("TUIChat.对方正在输入");
    break;
    case false:
    currentConversationName.value =
    currentConversation?.value?.getShowName();
    break;
    }
    },
    });

    常见问题

    为什么开启开关后没有对方正在输入提示?显示“对方正在输入...”的规则是什么?

    1. 开启“对方正在输入”开关(默认已开启)
    2. 在当前 C2C 会话中,对方在30秒内向您发送过消息且当前正在输入文字。

    交流与反馈

    加入Telegram 技术交流群组WhatsApp 交流群,享有专业工程师的支持,解决您的难题。
    联系我们

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

    技术支持

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

    7x24 电话支持