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

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

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

 

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

  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 - получение начального списка комнат (Март 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_canCreateRoommsg_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_canCreateRoommsg_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

 

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

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

Выгода от использования Falcon Space

В 2-3 раза экономнее и быстрее, чем заказная разработка
Более гибкая, чем коробочные решения и облачные сервисы
Используйте готовые решения и изменяйте под свои потребности
Нужна бесплатная консультация?
Планируете делать веб-проект?
Сайт использует Cookie. Правила конфиденциальности OK