Question

技术：

ForntEnd：ReactJs

后端：NodeJs

数据库：FireStore

项目概述：

此键入指示器与您/我日常使用的应用程序，Messenger或任何其他应用程序不同。此功能仅供我们公司代理内部使用。

请视为客户服务聊天应用程序。我们有很多客户聊天，公司有很多与客户聊天的代理商。

例如：我们有客户 A 和代理商 B，C，D 。还有一件事是，只有我们的代理商才能访问公司软件，客户可以从任何应用程序（例如Messenger，在线聊天等）进行聊天。我们正在使用twillo将所有这些平台与我们的系统集成。

现在，考虑代理商 B 与客户 A 聊天的情况，如果代理商 C 想与客户< strong> A ，则业务代表 C 必须看到 a正在键入的消息，并且如果业务代表 D 也想与客户聊天/他必须看到 B，C正在输入，依此类推。

要从前端（reactjs）实现上述功能，我已经想到并实现。

代码示例：

<input          
 type="text"
 placeholder={
   typingstate && typingstate !== null
   ? `${typingstate.join(', ')}  is typing..`
   : 'Type a message here..'
   }
 value={inputMessage}
 onChange={this.handleInputChange}
 onKeyPress={this.handleSubmitMessage}
 onKeyUp={this.TypingIndicatior}
 />

Let typingTimer;
Let TypingInterval = 5000 // 5 second

//on keyup I'm changing typing-state

TypingIndicatior = event => {

if (event.keyCode === 13) {
  // if press enter then submit message
  this.SubmitMessage(event);
} else {

  clearTimeout(typingTimer);      

  // when user type somthing then change/update DB for typingstatus like ["B", "C"] so on.

  if (event.target.value || event.target.value === '') {
    typingTimer = setTimeout(() => {

  // if user will not type anything for 5 second then will change/update DB for typingstatus to null

            }, TypingInterval);
    }
  }
};

上面的代码正在按预期从前端进行查找和更新。还有一件事是从firestore获得快速响应，这里我不使用后端就直接调用firebase查询。

现在考虑如果代理程序 B 和 C 都在键入，那么我已经用 [“ B”，“ C”] ，因此当座席 D 想要与客户聊天时，它将从数据库读取打字状态，并向他显示 B，C正在打字但是由于任何原因（关闭浏览器，关闭电源），代理 B 退出了应用程序并且无法将数据库的输入状态从 [“ B”，“ C”]更新为[“ C”] ，那么座席B将一直保留在DB中，因此无论何时任何座席想与客户聊天他/她将看到消息，提示 B正在输入。

我无法解决这种情况，并且我确定要解决此问题，我必须使用backend（nodejs），但我不知道该怎么使用。

就是这样。如果有任何解决方案，请告诉我。如果您有更好的解决方案，可以与我分享。

Javascript：打字指示器功能

0 个答案: