Как хранить переписки в чате на стороне клиента
О проекте
Мы работаем над платформой, которая используется для продвижения товаров, услуг и личного бренда через инфлюенсеров, СМИ и другие медиа. По ходу развития платформы клиенту понадобился чат для общения клиентов платформы с её администраторами и копирайтерами.
Что требовалось от чата:
- история чата должна храниться на стороне клиента;
- за статусом сообщений клиентов и копирайтеров должны были следить администраторы;
- уведомления должны отправляться внутри платформы или на почту.
Всё это обязывало нас по возможности не пользоваться готовыми сервисами, через которые проходили бы сообщения в чате. Пример готового сервиса — это платный JivoChat, где сообщения проходят через сервер. Вместо этого мы подобрали технологии, на которых можно построить автономный чат.
Зачем нужен чат на сайте
Чатом пользуются пользователи платформы, а также её копирайтеры и администраторы. Когда пользователь даёт все необходимые вводные данные — от посыла текста, его объёма, задачи и аудитории до стиля и интонации — и оплачивает услуги копирайтера, создаётся страница с заявкой и чатом.
Дополнительно можно купить поисковую оптимизацию, дистрибьюцию публикации и т. п. в зависимости от выбранного пакета услуг.
В чате клиент и исполнитель обсуждают детали по задаче. Администратор платформы также может общаться с клиентом, но его основная задача — наблюдать за качеством услуг, оказываемых исполнителем.
Разработка
Для разработки чата мы использовали протокол Mercure, использующий стандарт Server-Sent Events.
Протокол Mercure
Для отправки сообщений в чате мы использовали протокол Mercure. Его задача на проекте заключается в том, чтобы автор контента увидел уведомление о сообщении в чате заявки, а если заявка открыта на устройстве автора, то он получит сообщение без перезагрузки страницы.
Сообщения принимаются через наш сервер, который сохраняет их и передаёт команду в хаб Mercure, чтобы он уведомил всех следящих за обновлениями по конкретной задаче.
Mercure работает с веб-фреймворком Symfony через открытый готовый компонент и служит альтернативой протоколу WebSocket. В отличие от двунаправленной работы WebSocket, Mercure передаёт данные только от сервера к клиенту по протоколу HTTP/2. Это помогает более эффективно использовать сетевые ресурсы.
Технология Server-Sent Events
Среди нескольких вариантов разработки чата мы использовали вариант со стандартом Server-Sent Events (SSE). Как можно понять из названия, суть стандарта — в отправке событий с сервера. Браузер соединяется с url сайта и делает запрос к серверу, а сервер поддерживает запрос открытым и отправляет сообщения браузеру. Соединиться с сервером и держать запрос позволяет встроенный JavaScript API под названием EventSource. Другое удобное свойство EventSource — автоматически устанавливать новое соединение, если старое вдруг оборвалось.
SSE используется как более простая и дешёвая альтернатива WebSocket, когда на проекте не нужны все возможности последнего вроде двунаправленного соединения.
Мы настроили фильтрацию сообщений, или так называемое экранирование: перед строками добавляются спецсимволы (например, косую черту), что не позволяет вредоносному коду запускаться.
Что в итоге?
На технологиях Server-Sent Events и Mercure мы разработали для клиента чат, сообщения в котором хранятся только в системе клиента. Поток данных в случае этого сервиса однонаправленный, поэтому использование Mercure делает реализацию простой и недорогой.
