Технологии:
ForntEnd: ReactJs
BackEnd: NodeJs
БД: FireStore
Обзор проекта:
Этот индикатор ввода не похож на то, какое приложение, мессенджер или любое другое приложение, которое вы / я используете для повседневного использования. Эта функция предназначена для внутреннего использования агентами нашей компании.
Думайте как приложение для работы с клиентами. У нас много клиентов, а в компании много агентов, которые общаются с клиентами.
Пример: у нас есть клиент A и агенты B, C, D . Еще одна вещь - только наш агент имеет доступ к программному обеспечению компании, и клиент может общаться в чате из любых приложений, таких как мессенджер, линейный чат и т. Д. Мы используем twillo для интеграции всех этих платформ с нашей системой.
А теперь подумайте о сценарии, когда агент B общается с клиентом A , как если бы агент C хотел общаться с клиентом A тогда агент C должен увидеть сообщение о том, что a набирает , и если агент D также хочет поговорить с клиентом, он / она должен увидеть, что B, C набирает и т. Д.
Для достижения вышеуказанных функциональных возможностей из веб-интерфейса (реагировать) я задумался над этим и реализовал.
Пример кода:
<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 без использования backend.
Теперь подумайте о сценарии, если агент B и C оба печатают, поэтому я обновил состояние набора данных БД с помощью массива, подобного этому [«B», «C» ] поэтому, когда агент D захочет пообщаться с клиентом в это время, он будет читать состояние набора из БД и показывать ему, что B, C печатает Но по любой причине ( закрыть браузер, электричество отключено) агент B пропал из приложения
И не в состоянии обновить состояние набора БД с [«B», «C»] до [«C»] , тогда агент B будет оставаться в БД на все время, поэтому всякий раз, когда какой-либо агент захочет общаться с клиентами / он увидит сообщение, что B набирает .
Я не могу решить этот сценарий, и я уверен, что для решения этой проблемы мне нужно будет использовать backend (nodejs), но как я этого не знаю.
Вот и все. Если есть какое-либо решение, дайте мне знать. Если у вас есть лучшее решение, вы можете поделиться со мной.