Web & H5 & Uniapp

最近更新时间:2024-10-14 10:37:21

我的收藏

功能描述

@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秒内向您发送过消息且当前正在输入文字。

交流与反馈

单击进入 IM 社群,享有专业工程师的支持,帮助解决您的难题。