如何在Reactjs开发的聊天应用中实现typing indicator输入提示

1. 改造Redux存储结构 #

首先在现有的Users对象中新增两个字段，用于存储输入状态相关数据：

• isTyping：布尔值，标记对应用户是否正在输入
• typingTimeoutId：数值类型，存储防抖计时器ID，用于自动清除停止输入后的状态

修改后的Users结构示例：

Users={
  Id:123,
  LastMessagebody:"hii",
  Messagread:true,
  MessageAt:"12:40Pm",
  From:56,
  // 新增输入状态相关字段
  isTyping: false,
  typingTimeoutId: null
}

新增两个Redux Action类型：SET_USER_TYPING、CLEAR_USER_TYPING，在Reducer中对应处理逻辑：

• 收到SET_USER_TYPING：将对应用户的isTyping设为true，清空原有计时器后存储新的计时器ID
• 收到CLEAR_USER_TYPING：将对应用户的isTyping设为false，清空存储的计时器ID

2. XMPP 状态收发逻辑处理 #

XMPP协议有标准的输入状态扩展规范XEP-0085，可直接通过stanza.js实现状态节的收发：

2.1 己方输入状态发送 #

监听当前聊天输入框的onChange事件，按以下逻辑处理：

• 每次用户触发输入事件时，先重置防抖计时器（建议设置2-3秒超时）
• 首次输入/计时器重置前，向聊天对象发送XEP-0085定义的composing状态节
• 用户停止输入达到超时时间，或者用户点击发送消息后，向对方发送paused状态节

2.2 对方输入状态接收 #

监听stanza.js的入站消息事件，判断收到的节是否为XEP-0085状态节：

• 如果收到composing状态：触发SET_USER_TYPING Action，将对应用户的isTyping设为true，同时启动超时计时器，到期后自动触发CLEAR_USER_TYPING
• 如果收到paused/active/inactive状态：直接触发CLEAR_USER_TYPING Action，清除对方的输入状态

3. React UI 层渲染 #

从Redux中取出当前聊天对象的isTyping状态：

• 若isTyping为true，在聊天窗口头部/对话列表对应条目位置，渲染*对方正在输入...*的提示，可搭配动态点动画提升效果
• 若isTyping为false，隐藏输入提示，正常展示原有信息

提示：如果用户主动发送了消息，需要立即清除己方的输入计时器，同时发送paused状态，避免出现消息发送后还显示正在输入的异常情况。

内容的提问来源于stack exchange，提问作者Puneet biswas