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

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

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

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

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

ВАЖНЫЕ ОБНОВЛЕНИЯ

29.07.2024 - внедрена пагинация комнат (кол-во выгружаемых страниц управляется через настройку MessageRoomsPageSize, по умолчанию 20). После обновления ядра необходимо в процедуру [dbo].[as_msg_getRooms] добавить внизу запроса: 

-- тут выше идет order by...
OFFSET @PageSize * (@Page - 1) ROWS
FETCH NEXT @PageSize ROWS ONLY;	

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

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

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

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

• as_msg_addUserToRoom - добавление пользователя в комнату
• as_msg_deleteMessage - удаление сообщения
• as_msg_getRoom - получение данных по комнате 
• as_msg_getRooms - получение начального списка комнат (Март 2024 - добавлен необязательный параметр typeCode).
• 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. 

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

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

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

Как сделать свою обработку показа счетчика  для непрочитанных сообщений

Эта функция вызывается как при загрузке страницы, так и при изменении состояния в чате (человек зашел на комнату, и она также вызывается, т.к. он прочел сообщение). 

Вид коллбека JS:

as.callbacks = as.callbacks || {};
as.callbacks["getunreadstate"] = function(data){
  console.log(data);
} 

/*
код по умолчанию такой: 
                if (data.result) {
                    if (data.count) {
                        $('.as-msg-count').html(data.count).removeClass("hide");
                    } else {
                        $('.as-msg-count').addClass("hide");
                    }
                } else {
                    as.log(data.msg || as.lang("messages.error", "Произошла ошибка"), { error: true });
                }
*/

Дополнительные материалы

1. Как создать чат бот ВКонтакте с возможностью управления через SQL процедуры в рамках платформы Falcon Space
2. Видеочат. Интеграция с Vox Implant