Myujth

Technologies :

ForntEnd : ReactJs

BackEnd : NodeJs

DB: FireStore

Project Overview :

This typing indicator is not similar to what app, messenger or any other application that you/me are using for daily usage.this functionality is for internal use of our company agents.

Think as customer care chat application. We’ve many customer chat and company have many agent who chat with customers.

Ex: we have customer A, and Agents B, C, D. One more thing is only our agent have access to company software and customer can chat from any applications like messenger, line chat etc. we are using twillo to integrate all these platform with our system.

Now think about the scenario where agent B is chatting with customer A as the same time if agent C want to chat with customer A then agent C must see the message that a is typing and if agent D also want to chat with customer s/he must see that B, C is typing and so on.

To achieve above functionality from frontend (reactjs) I’ve idea about it and implemented.

Code example :

<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 event.target.value === '') 
 typingTimer = setTimeout(() => 

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

 , TypingInterval);
 
 
;

Above code is working find and update as I expect from frontend side.one more thing is to get fast response from firestore here I directly call firebase query without using backend.

Now think about the scenario if Agent B and C both are typing so I’ve updated DB typingstate with array like this [“B”, “C”] so when agent D want to chat with customer at that time it’ll read typingstate from DB and show to him that B, C is typing But for any reason (close browser, electricity down) agent B gone from application
And not able to update DB typing state from [“B”, “C”] to [“C”] then agent B will remain for all time in DB so whenever any agent want to chat with customer s/he will be see message that B is typing.

I’m not able to solve this one scenario and I’m sure that to solve this issue I must need to use backend(nodejs) but how that I don’t know.

That’s it. If have any solution let me know. If you have any better solution you can share with me.