功能描述
@tencentcloud/chat-uikit-vue 从 v2.0.0 版本开始,已支持 C2C 会话“对方正在输入”功能, 效果如下:
显示“对方正在输入...”的规则:
1. 开启“对方正在输入”开关(默认已开启)。
2. 在当前 C2C 会话中,对方在30秒内向您发送过消息且当前正在输入文字。
开启/关闭对方正在输入
“对方正在输入”为默认开启,您无需重复按照以下步骤进行开启。
import { TUIStore, StoreName } from "@tencentcloud/chat-uikit-engine";// 开启对方正在输入// enable typingTUIStore.update(StoreName.APP, "enableTyping", true);// 关闭对方正在输入// disable typingTUIStore.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.vueconst onTyping = (inputContentEmpty: boolean, inputBlur: boolean) => {sendTyping(inputContentEmpty, inputBlur);};// TUIKit/components/TUIChat/utils/sendMessage.tsexport const sendTyping = (inputContentEmpty: boolean, inputBlur: boolean) => {if (!inputContentEmpty && !inputBlur) {TUIChatService.enterTypingState();} else {TUIChatService.leaveTypingState();}};
2. 接收端: 监听发送端输入状态并展示
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秒内向您发送过消息且当前正在输入文字。