Как реализовать красивый интерфейс чата WhatsApp через Green API в 1С?

Программист 1С v8.3 (Управляемые формы) IT и автоматизация бизнеса
← На главную

Интеграция 1С с мессенджерами — это не только техническая возможность отправки сообщений, но и необходимость создания удобного рабочего пространства для пользователя. Когда мы работаем с Green API, мы получаем «сырые» данные через методы API, но встает вопрос: как превратить их в привычный чат с «облачками», статусами доставки и медиафайлами? В этой статье мы подробно разберем несколько подходов к визуализации переписки, проанализируем их плюсы и минусы, а также выясним, как оптимизировать получение данных.

Вариант 1: Использование Поля HTML-документа (эффектный интерфейс)

Если ваша задача — создать интерфейс, максимально приближенный к оригинальному WhatsApp или Telegram, то Поле HTML-документа будет лучшим выбором. Этот метод позволяет использовать всю мощь верстки для отображения сообщений.

Рассмотрим преимущества этого метода:

  1. Возможность рисовать разноцветные сообщения («баллоны»): свои справа, чужие слева.
  2. Отображение аватарок пользователей и статусных иконок (галочки прочтения).
  3. Корректное отображение вложенных картинок прямо в потоке переписки.

Для реализации этого метода нам потребуется сформировать строку HTML-кода и передать ее в реквизит формы с типом Строка, связанный с элементом формы Поле HTML документа. Разберем пример кода, который формирует простую структуру чата:


ТекстHTML = "<html><head><style>
| .message { padding: 10px; margin: 5px; border-radius: 10px; max-width: 70%; }
| .incoming { background-color: #f1f0f0; float: left; clear: both; }
| .outgoing { background-color: #dcf8c6; float: right; clear: both; }
|</style></head><body>";

Пока ВыборкаСообщений.Следующий() Цикл
    КлассСтиля = ?(ВыборкаСообщений.Тип = "outgoing", "outgoing", "incoming");
    ТекстHTML = ТекстHTML + "<div class='message " + КлассСтиля + "'>" 
                + ВыборкаСообщений.Текст + "</div>";
КонецЦикла;

ТекстHTML = ТекстHTML + "</body></html>";
ЭтаФорма.ТекстСообщенийHTML = ТекстHTML;

Проанализируем ситуацию: использование HTML позволяет вставлять теги <img> для отображения картинок, ссылки на которые присылает Green API. Это делает интерфейс современным и «живым».

Вариант 2: Таблица формы на основе Таблицы значений

Если вам не требуется сложный дизайн, а важна скорость разработки и функциональность, разберем вариант с использованием стандартного объекта ТаблицаФормы. Этот метод проще в поддержке и не требует знания CSS.

Алгоритм действий следующий:

  1. Создаем реквизит формы с типом ТаблицаЗначений (назовем его СписокСообщений).
  2. Добавляем колонки: Дата, Отправитель, ТекстСообщения.
  3. Выносим эту таблицу на управляемую форму.

Для отображения многострочных сообщений в такой таблице необходимо у элемента формы «Текст сообщения» установить свойство Вид в значение Поле ввода и включить МногострочныйРежим. Это позволит пользователю читать длинные тексты без необходимости открывать каждое сообщение отдельно.

Вариант 3: Регистр сведений и Динамический список (оптимально для истории)

Выясним причину, по которой опытные разработчики предпочитают хранить переписку в базе, а не запрашивать ее каждый раз у API. При большом объеме сообщений постоянные запросы к серверу Green API будут замедлять работу интерфейса. Правильный подход — кэширование данных в РегистрСведений.

Создадим регистр со следующей структурой:

Использование ДинамическийСписок на основе этого регистра позволит реализовать бесконечную прокрутку истории сообщений без нагрузки на память сервера. Мы сможем настроить условное оформление: например, выделять непрочитанные сообщения жирным шрифтом или менять цвет текста в зависимости от отправителя.

Автоматизация получения данных: Webhooks против Polling

Посмотрим на техническую сторону обновления чата. В обсуждении упоминается обновление через регламентное задание или обработчик ожидания (каждые 10-20 секунд). Это называется Polling (опрос).

Проанализируем недостатки опроса:

  1. Сообщения приходят с задержкой.
  2. Постоянные «пустые» запросы нагружают систему.

Рассмотрим более профессиональное решение — Webhooks. Green API может сам отправлять уведомления в вашу 1С в момент поступления сообщения. Для этого вам нужно опубликовать базу через веб-сервер (Apache или IIS) и создать HTTPСервис. В модуле этого сервиса мы прописываем логику обработки входящего JSON:


Функция ОбработатьВходящееУведомление(Запрос)
    ЧтениеJSON = Новый ЧтениеJSON;
    ЧтениеJSON.УстановитьСтроку(Запрос.ПолучитьТелоКакСтроку());
    Данные = ПрочитатьJSON(ЧтениеJSON);
    
    // Логика записи в Регистр Сведений
    ЗаписатьНовоеСообщениеВБазу(Данные);
    
    Ответ = Новый HTTPСервисОтвет(200);
    Возврат Ответ;
КонецФункции

После записи сообщения в базу, если у пользователя открыта форма чата, мы можем обновить ее, используя СистемаВзаимодействия или просто обновив ДинамическийСписок.

Работа с мультимедиа и вложениями

Важно помнить, что Green API присылает ссылки на файлы. Если мы хотим, чтобы интерфейс был полноценным, нам нужно реализовать предпросмотр. Рассмотрим этапы работы с вложениями:

  1. При получении уведомления о картинке 1С скачивает ее во временное хранилище или ПрисоединенныеФайлы.
  2. В поле HTML мы подставляем путь к локальному файлу или Base64-строку изображения.
  3. Для документов (PDF, DOCX) стоит реализовать кнопку «Скачать» или «Открыть», которая будет запускать файл внешним приложением.

Выводы и рекомендации

Мы разобрали три основных способа визуализации переписки WhatsApp в 1С. Выбор конкретного метода зависит от ваших задач:

1. Если нужен красивый и современный интерфейс — используйте ПолеHTMLДокумента с CSS-шаблонами.

2. Если нужна простота и надежность — используйте ТаблицуЗначений с многострочными полями.

3. Если планируется хранение больших объемов данных — обязательно используйте РегистрСведений и ДинамическийСписок.

Не забывайте про использование уникальных идентификаторов сообщений (idMessage), которые предоставляет Green API, чтобы избежать дублирования записей в вашей базе данных при повторных синхронизациях.

← На главную