Создание асинхронных виджетов

25 ноября 2015

Виджет

Сегодня мы создадим простой, но функциональный виджет для 1С:Предприятия, который будет показывать количество активных пользователей в базе. Главной его особенностью будет асинхронное взаимодействие с базой, что позволит выполнять обновление виджета без блокировки основного интерфейса приложения.

В качестве примера другого подхода при работе с HTML-виджетами можно продемонстрировать конфигурацию 1С:Документооборот 2.0, где в обработке "Текущие дела" создана форма для отображения различных виджетов с данными о моих задачах, задачах отдела, созданных документах, редактируемых файлов и т.д. Замечательная реализация и в плане функционала, и в плане юзабилити интерфейса, но есть один минус. Обновление виджетов происходит, конечно же, через синхронную контекстную серверную процедуру, что означает передачу на сервер всей формы, получение там данных, перенос их в форму и затем возвращение ее на клиент. Проще говоря, для обновления виджетов необходимо выполнять синхронный серверный вызов, на время которого выполняется блокировка пользовательского интерфейса.

Текущие дела 1С:Документооборот 2.0

При эксплуатации системы была замечена серьезная проблема - если включить автообновление виджетов, то при вызове серверной процедуры обновления подвисал весь интерфейс приложения пока оно ожидало ответа от сервера. Пользователи жаловались на частые подвисания интерфейса в самый не подходящий момент.

Конечно, есть достаточно простой выход - не использовать автообновление или оптимизировать процедуру обновления данных виджетов. Но это не самый оптимальный путь, ведь обновление виджетов может быть для кого-то критичным, а оптимизация получения данных и заполнения виджетов не избавит нас от контекстного серверного вызова и периодической блокировки интерфейса.

Мы пойдем другим путем и решим задачу двумя способами:

  • асинхронное обновление виджета с помощью фоновых заданий.
  • асинхронное обновление виджета с помощью AJAX-запросов к HTTP-сервису из поля HTML-документа.

Оба способа имеют плюсы и минусы, которые мы рассмотрим. И так, поехали!

Подготовка

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

Асинхронный виджет 1С

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

На форме виджет добавлен в качестве поля HTML-документа, которое используется и для обновления через фоновые задания, и для обновления с помощью AJAX-запросов. Количество активных пользователей определяется по количеству активных сеансов с помощью следующей функции, расположенной в общем модуле "ВиджетыСвервер" (серверный, вызов сервера):

Функция ПолучитьКоличествоАктивныхСеансов() Экспорт
	
	// Получаем количество активных сеансов
	КоличествоАктивныхСеансов = 0;
	Попытка
		ТекущиеСоединения = ПолучитьСеансыИнформационнойБазы();
		КоличествоАктивныхСеансов = ТекущиеСоединения.Количество();
	Исключение
		КоличествоАктивныхСеансов = -1;
	КонецПопытки;
	
	Возврат КоличествоАктивныхСеансов;
	
КонецФункции

Кроме этого в конфигурацию добавлен общий макет "ГлавнаяСтраница" с типом HTML-документ, в котором содержится разметка для виджета, а также скрипты для обновления данных с помощью AJAX-запроса. Посмотреть разметку можно в тестовой конфигурации.

Также добавлена общая форма "ВиджетАктивныеСеансы" с помещенным на нее полем HTML-документа, в которое будет помещаться содержимое виджета. Эта форма добавлена в рабочую область начальной страницы, чтобы при запуске сеанса пользователя виджет сразу же открывался.

Теперь рассмотрим подробнее каждый из способов.

Фоновые задания

Механизм фоновых заданий предназначен для асинхронного выполнения каких-либо операций. Этот механизм используется повсеместно. В конфигурации "Библиотека стандартных подсистем" реализована подсистема "Длительные операции", предназначенная для запуска каких-либо операций в фоновых заданиях. В свою очередь БСП внедрена практически во все новые конфигурации от фирмы "1С", поэтому использовать ее можно без особых проблем. На Инфостарте можно посмотреть пример использования этой подсистемы.

В тестовой конфигурации с примерами из статьи мы реализуем собственный функционал по выполнению асинхронных операций в фоновых заданиях, потому что внедрять для демонстрации примером БСП было бы не разумно =).

Запуск и отслеживание

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

В модуле "АсинхронныеВызовыСервер" находятся процедуры и функции для непосредственного запуска фоновых заданий и проверки их состояний. Все остальные модули реализуют взаимодействие с фоновыми заданиями с клиентской стороны: запуск, проверка состояния, запуск клиентского метода по завершению фонового задания.

Для отслеживания состояния запущенных фоновых заданий в модуль управляемого приложения была добавлена экспортная переменная:

Перем АктивныеАсинхронныеОперации Экспорт;

Переменная инициализируется как массив, куда при запуске операции добавляется объект "Фоновое задание".

При открытии формы виджета выполняется клиентская процедура:

&НаКлиенте
Процедура ОбновитьКоличествоАктивныхСеансовНачало() Экспорт
	
	ТекущаяОперация = АсинхронныеВызовы.ВызватьФункцию(
		// Функция, запускаемая в фоновом задании
		"ВиджетыСервер.ПолучитьКоличествоАктивныхСеансов",
		// Доп. параметры, у нас они не используются
		, 
		// Текущая форма вызова
		ЭтаФорма, 
		// Клиентская экспортная процедура, выполняемая
		// после завершения фонового задания
		"ОбновитьКоличествоАктивныхСеансовНачалоЗавершение");	
	
КонецПроцедуры
После вызова асинхронной функции запускается глобальный обработчик ожидания, проверяющий текущее состояние всех запущенных фоновых заданий. Когда фоновое задание завершает свою работу, обработчик запускает ту клиентскую процедуру, имя которой мы указали в последнем параметре. Эта процедура должна располагаться в передаваемой форме. Листинг нашей завершающей процедуры следующий:
&НаКлиенте
Процедура ОбновитьКоличествоАктивныхСеансовНачалоЗавершение(АсинхронныйВызов, 
	Состояние, ВозвращенноеЗначение, ОписаниеОшибки) Экспорт
	
	// Если состояние "Завершен", значит фоновое задание отработало без ошибок
	// и вернуло корректное значение. В противном случае оставляем значение
	// по умолчанию
	КоличествоАктивныхСеансов = "---";
	Если Состояние = "Завершен" Тогда
		КоличествоАктивныхСеансов = ВозвращенноеЗначение;
	КонецЕсли;
	
	// Заменяем часть разметки страницы, подставляя туда
	// полученное значение из фонового задания
	НовоеЗначениеТекстаВиджета = ТекстШаблонаВиджета;
	НачалоРазделаСкриптовСтрока = "<!--Раздел скриптов - Начало-->";
	КонецРазделаСкриптовСтрока = "<!--Раздел скриптов - Конец-->";
	НачалоРазделаЗначениеСтрока = "<!--Активные пользователи - Начало-->";
	КонецРазделаЗначениеСтрока = "<!--Активные пользователи - Конец-->";
	
	НачалоРазделаСкриптов = СтрНайти(НовоеЗначениеТекстаВиджета, НачалоРазделаСкриптовСтрока);
	КонецРазделаСкриптов = СтрНайти(НовоеЗначениеТекстаВиджета, КонецРазделаСкриптовСтрока);
	НовоеЗначениеТекстаВиджета = Сред(НовоеЗначениеТекстаВиджета, 1, НачалоРазделаСкриптов-1)
		+ Сред(НовоеЗначениеТекстаВиджета, КонецРазделаСкриптов+СтрДлина(КонецРазделаСкриптовСтрока), СтрДлина(НовоеЗначениеТекстаВиджета)-КонецРазделаСкриптов+1);
		
	НачалоРазделаЗначение = СтрНайти(НовоеЗначениеТекстаВиджета, НачалоРазделаЗначениеСтрока);
	КонецРазделаЗначение = СтрНайти(НовоеЗначениеТекстаВиджета, КонецРазделаЗначениеСтрока);
	НовоеЗначениеТекстаВиджета = Сред(НовоеЗначениеТекстаВиджета, 1, НачалоРазделаЗначение-1) + 
		Строка(КоличествоАктивныхСеансов) 
		+ Сред(НовоеЗначениеТекстаВиджета, КонецРазделаЗначение+СтрДлина(КонецРазделаЗначениеСтрока), СтрДлина(НовоеЗначениеТекстаВиджета)-КонецРазделаЗначение+1);
		
	// Передаем сформированную HTML-разметку в поле HTML-документа на форме
	АктивныеСеансыВиджет = НовоеЗначениеТекстаВиджета;
	
	// Подключаем обработчик ожидания для повторного запуска
	// асинхронной операции
	ПодключитьОбработчикОжидания("ОбновитьКоличествоАктивныхСеансовНачало", 5, Истина);

КонецПроцедуры
Таким образом будет выполняться асинхронный запуск серверной процедуры "ПолучитьКоличествоАктивныхСеансов()", а ее по завершению операции полученное значение передано обратно на клиент.

Плюсы и минусы

За:

  1. Относительная простота реализации
  2. Работоспособность при любом режиме запуска (тонкий клиент, толстый клиент, веб-клиент, обычное и управляемое приложение).

Против:

  1. Иногда фоновые задания перестают стабильно работать. Зависит от многих факторов (версия платформы, настройки сервера и др.). Большинства проблем с зависанием можно избежать, но с этим вопросом нужно работать.
  2. При большом количестве пользователей, открывающих форму с виджетами, количество сеансов в консоли кластера увеличится вдвое! Конечно, если Вас не смущают зависшие сеансы и фоновые задания, то не обращайте на этот пункт внимание =).

AJAX

AJAX (Asynchronous Javascript and XML) - подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. У нас, конечно, не веб-приложение, но частично применить этот подход тоже возможно.

HTTP-сервисHTTP-сервис

Основой для работы виджета является HTTP-сервис, возвращающий необходимые данные. Он достаточно простой, никаких сложных алгоритмов и настроек. Для его создания нужно выполнить следующие шаги:

  1. Добавляем HTTP-сервис и настраиваем корневой URL
  2. Создаем шаблон URL
  3. Добавляем GET-метод
  4. Публикуем базу

Листинг обработчика GET-метода приведен ниже:

Функция ActiveUsersget(Запрос)
	
	УстановитьПривилегированныйРежим(Истина);
	
	Ответ = Новый HTTPСервисОтвет(200);
	
	КоличествоАктивныхПользователей = ВиджетыСервер.ПолучитьКоличествоАктивныхСеансов();
	
	// Формируем ответ в формате JSON
	ВремФайл = ПолучитьИмяВременногоФайла("json");	
	ЗаписьJSON = Новый ЗаписьJSON;
	ЗаписьJSON.ОткрытьФайл(ВремФайл, "UTF-8");
	ЗаписьJSON.ЗаписатьНачалоОбъекта();
	ЗаписьJSON.ЗаписатьИмяСвойства("ActiveUsers");
	ЗаписьJSON.ЗаписатьЗначение(КоличествоАктивныхПользователей);
	ЗаписьJSON.ЗаписатьКонецОбъекта();
	ЗаписьJSON.Закрыть();	
	Ответ.УстановитьИмяФайлаТела(ВремФайл);
	
	Возврат Ответ;
	
КонецФункции
И все! Далее создаем сам виджет.

Поле HTML

Виджет будет представлять собой область, в центре которой число активных сеансов в информационной базе. Во время выполнения асинхронного запроса к HTTP-сервису будет показана дополнительная анимация. Все это реализовано с помощью HTML-разметки, которая будет помещена в поле HTML-документа в форме конфигурации.

Как и в случае с реализацией виджета при помощи фоновых заданий, HTML-разметка виджета хранится в том же общем макете и в момент создания формы помещается в поле HTML-документа. Только теперь получение количества активных пользователей выполняется не фоновым заданием, а при помощи AJAX-запроса самой страницы, направленного ранее созданному к HTTP-сервису.

Вот так выглядит синтаксис AJAX-запроса на странице:

            $.ajax({
                crossDomain: true,
                type: "GET",
                contentType: "application/json;charset=utf-8",
                url: "http://localhost/Exp/hs/DevelPlatform/Users",
                dataType: "json",                
                success: function (queryResult) {
                    $("#activeUsersValue").text(queryResult.ActiveUsers - 1);                
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    $("#activeUsersValue").text("---");

                }
            });

HTTP-сервис возвращаем нам JSON-объект с единственным свойством "ActiveUsers". В событии "success", при успешном выполнении запроса, извлекается полученное значение и присваивается элементу <p> на веб-странице. При возникновении ошибок в качестве значения будет присвоена строка "---".

Именно эта реализация демонстрируется на анимации раздела "Подготовка" в самом начале статьи.

Плюсы и минусы

За:

  1. Никаких фоновых заданий и серверных вызовов платформы. Только AJAX-запросы к HTTP-сервису веб-средствами, причем запросы непосредственно от клиента.
  2. Можно уменьшить время обновления значений на виджете до минимума, хоть 0.1 секунды. С фоновыми заданиями и обработчиками ожидания трудно добиться режима "онлайн" из-за особенностей реализации.
  3. Это не 1С! =)

Против:

  1. Поле HTML-документа это нечто особенной. Платформа 1С:Предприятие использует его в качестве обрезанной версии браузера, никакой полноценной поддержки HTML5, SVG, CANVAS и прочего. Но самое главное - мне так и не удалось заставить платформу отправлять AJAX-запросы в режиме тонкого или толстого клиента! =) Это просто невероятно и странно. Может кто уже сталкивался и знает ответ на вопрос как заставить платформу отправить AJAX-запрос из поля HTML-документа, обойдя ошибку "No transport"?
  2. Это не 1С! =)
  3. Есть вероятность, что с выходом новой версии платформы поле HTML-документа будет работать по другому и все придется переделывать.
  4. В толстом и тонком клиентах не отображаются корректно CSS-стили, а также не всегда нормальным образом отрабатывают JS-скрипты. Можно потанцевать с бубном и добиться результата, но я не стал этим заниматься.

Выводы

Лучшим вариантом все же является использование фоновых заданий, ведь работа виджетов в тонком и толстом клиенте критична в большинстве случаев. В тестовой конфигурации, ссылка на которую в начале статьи, сделал совмещенную реализацию виджета: если запускаетяся тонкий или толстый клиент, то используются фоновые задания, а если запускается веб-клиент, то используются AJAX-запросы.

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

P.S. Если материал Вам понравился, то не забудьте поставить G+ в верху страниц ^^^, либо репост и комментарий внизу =)


comments powered by Disqus