Внедрение чата в личный кабинет пользователя

Настройки чата 

Чат позволяет организовать обмен мгновенными сообщениями между пользователями сайта. Чат может прикрепляться к определенным сущностям, например, к заказу. 

Основные возможности чата

  1. Прикрепление чатов к неким объектам (заказ, проект, задача и т.д.).
  2. Возможность вывода фото собеседников.
  3. Общее окно по чатам всех типов (основного и по объектам).
  4. Клик на юзере - упоминание @username в чате (в этом случае пользователю идет пуш уведомление о сообщении).
  5. Управление бейджиками с количеством непрочитанных сообщений для разных типов.
  6. Добавление звука при сообщении (с возможностью глобального отключения).
  7. Надстройка с отключением фокуса ввода при загрузке комнаты.
  8. Пагинация сообщений с подгрузкой предыдущих сообщений комнаты.
  9. Мерцание title страницы при новом сообщении.
  10. Возможность прикрепления файлов к сообщениям.
  11. Поиск по сообщениям

Внимание! Июнь 2021 - были реструктурированы хранимые процедуры по чату: упрощено управление чатом, все основные действия вынесены в системные процедуры и нет больше разделения процедур для типов, исключена отдельная форма чата вне /messages (теперь ссылка идет на /messages с открытием нового чата). 

Ключевые изменения по структуре БД: 

  • as_msg_messages - добавлен столбец guid (для привязки файлов к сообщению)

Используются следующие процедуры: 

  • as_msg_addUserToRoom - добавление пользователя в комнату
  • as_msg_deleteMessage - удаление сообщения
  • as_msg_getRoom - получение данных по комнате 
  • as_msg_getRooms - получение начального списка комнат
  • as_msg_getUnreadState
  • as_msg_getType - получить тип чата (в настоящий момент все элементы выводятся для типа userchat)
  • as_msg_markAsRed - пометить сообщение как прочитанное
  • as_msg_removeUserFromRoom - удаление пользователя из группы
  • as_msg_sendMessage - отправка сообщения
  • as_msg_startChat - создание или получение комнаты для начала переписки
  • msg_afterSendMessage - процедура запускается после каждого сообщения (кастом)
  • msg_getAvailableUsersForRoom- список пользователей для окна добавить в чат (кастом)
  • msg_getUsersForNewChat - список для пользователя, кого можно пригласить на чат, список пользователей для Новый чат (кастом). 

Обязательно должны быть следующие функции: 

  • msg_canCreateRoom - если создается комната для специального типа, то эта функция определяет, может ли данный пользователь создавать такую комнату (по type и itemID)
  • msg_getRoomItemName - определяет наименование комнаты в списке комнат и при выводе комнаты (может зависеть от typeCode). 

Чат находится по адресу  /messages.  Если требуется указать ссылку на конкретного собеседника, то используем /messages/[username].

Если требуется чат для специфического типа, то используем /messages/client__123 (тип Клиенты, itemID клиента 123).

Как настроить чат на проекте

1. Копируем все вышеуказанные процедуры 

2. В управлении типами чатов создаем нужные типы (как минимум должен быть один - userchat). 

3. Редактируем процедуры msg_afterSendMessage (коллбек после отправки сообщения), msg_getAvailableUsersForRoom (список доступных пользователей для добавления в комнату), msg_getUsersForNewChat (список пользователей для новой переписки). 

4. Редактируем функции msg_canCreateRoom, msg_getRoomItemName для учета кастом моментов по специфическим типам. 

5. Копируем страницу /messages, на ней должна быть разметка вида: 

<div class="as-messages" data-code="userchat" data-itemid=" { url-itemID } " data-redmessagedelay="1800" data-startchat="Начать беседу"></div>
  • code - универсальный код (в настоящий момент это всегда код userchat)
  • itemID (без пробелов!) - либо логин собеседника, либо "сущность__идентификатор", например, project__12
  • redmessageDelay - если установлено, то после клика на комнату через N мс сообщения в группе будут считаться прочитанными. 
  • startChat - если указана строка, то добавляется кнопка сверху для выбора собеседника в новом чате.
  • data-chatSearch=1 и data-chatRoomSearch=1 - если настройка указана, то будет доступен поиск глобальный по всем комнатам и поиск по текущей комнате.

6. Добавляем типы ресурсов chatUpload, chatView для прикрепления файлов 

Как сделать кастомный чат для какой-то сущности

1. создаем новый тип в Типы чатов

2. прописываем функции msg_canCreateRoom, msg_getRoomItemName для учета кастом моментов по специфическим типам. 

3. ставим ссылки на взаимодействие вида /messages/[type]__[itemID] для перехода на чат.

Как сделать прикрепление файлов к сообщениям

Необходимо использовать 2 типа ресурсов - chatView (для просмотра файлов у сообщения) и chatUpload (для загрузки файлов)

В getRooms процедуре должен быть выставлен для комнаты CanUploadFiles = 1

В as_messages должно быть поле guid типа uniqueidentifier

Описание SQL коллбека AfterSendMessage

Процедура задает настройки push уведомления для данного сообщения (должны быть включены PWA и Push в GetLayout). 
Также процедура позволяет вызвать внешнее действие.

create procedure [dbo].[msg_afterSendMessage]

@messageID int,
@username nvarchar(128)
as
begin
-- SELECT 1 - Настройки для пуш уведомлений
select 'https://google.com' linkUrl,  'SHOW Message' linkTitle, 0 DisablePush
-- SELECT 2 Вызов внешних действий
-- ... email, notifiocation, sms, clearcache,
end

SELECT 1 возвращает настройки push. При этом по messageID можно определить бизнес-логику надо или нет отправлять push. 
Также здесь вы указываете конкретную ссылку на которую пользователь может перейти при клике на пуш уведомление. 

SELECT 2
задает набор внешних действий, которые могут быть выполнены после добавления сообщения. 

Поиск по чатам и по конкретному чату

Поиск организован через дополнительную таблицу chatSearch. SQL пакет для таблицы - https://pastebin.com/c45mm4Yi

Для вставки ссылок на поиск в чат (глобально и по текущей комнате) необходимо проставить data-chatSearch=1 и data-chatRoomSearch=1 у сниппета as-messages. 

В итоге появятся доп. кнопки для поиска: 

Сама таблица поиска выглядит так: 

В таблице выделяется найденный в тексте фрагмент, также есть возможность перейти на выбранный чат (в случае глобального поиска). 

Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Насколько полезной была статья?

Google поиск по нашей документации

Falcon Space

Это снижение стоимости владения

за счет меньшего количества людей для поддержки и узкого стека разработки. Про снижение стоимости владения продуктом

Это быстрое внесение изменений

по ходу эксплуатации программы. Как создается функционал на платформе

Это простой удобный интерфейс

адаптация под мобильные устройства. Про юзабилити платформы