VSUI Bridge

Мост между SPA и КонтейнерHtml

Библиотека для встраивания внешних веб-приложений в Элемент через компонент интерфейса. Обеспечивает двустороннюю коммуникацию между фронтенд-приложением и Элементом через механизм событий с очередью запросов/ответов.

Поддержать проект безвозмездно

✨ Возможности

🔄 Двусторонняя связь — запросы от SPA к серверу Элемента и обратно
📦 Пакетная обработка — очередь запросов выгружается одним вызовом
🎯 Гибкая маршрутизация — через контракт КонтрактСобытия разработчик реализует свою логику обработки
🗂 Управление ресурсами — загрузка файлов SPA через HTTP-сервис или форму
🖥 Полноэкранный режим — скрытие копирайта “Работает на” 1С
⏱ Таймауты и обработка ошибок — промисы с таймаутом 30 секунд, поддержка ошибок

🏗 Архитектура

┌─────────────────────────────────────────────────────────────┐
│                     1С:Предприятие                          │
│  ┌───────────────────────────────────────────────────────┐  │
│  │                 VsuiBridge (Компонент)                │  │
│  │  ┌─────────────┐    ┌──────────────┐    ┌───────────┐ │  │
│  │  │ Контейнер   │    │ Таймер       │    │ Обработчик│ │  │
│  │  │ Html        │    │ (300мс)      │    │ событий   │ │  │
│  │  └──────┬──────┘    └──────┬───────┘    └─────┬─────┘ │  │
│  │         │                  │                  │       │  │
│  └─────────┼──────────────────┼──────────────────┼───────┘  │
│            │                  │                  │          │
│  ┌─────────▼──────────────────▼──────────────────▼────────┐ │
│  │              Сервер Элемента (КонтрактСобытия)         │ │
│  │         Маршрутизация → Обработка → Ответ              │ │
│  └────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
            ▲                                   │
            │           vs-bridge.js            │
            │    (request/sendEvent)            │
            ▼                                   │
┌─────────────────────────────────────────────────────────────┐
│                    SPA-приложение                           │
│              (React / Vue / Angular)                        │
│                                                             │
│  import { request, sendEvent } from 'vs-bridge';            │
│                                                             │
│  const data = await request('get_data', { id: 1 });         │
│  sendEvent('user_action', { action: 'click' });             │
└─────────────────────────────────────────────────────────────┘

Размещение ресурсов в 1С

Загрузите файлы SPA через HTTP-сервис или форму “Ресурсы приложения”:

POST /vsui/v1/resources
Content-Type: application/json

[
  {
    "ВидРесурса": "ФайлИндекс",
    "Наименование": "index.html",
    "Ресурс": "<base64_content>",
    "ТипСодержимого": "text/html"
  },
  {
    "ВидРесурса": "ВспомогательныйРесурс",
    "Наименование": "main.js",
    "Ресурс": "<base64_content>",
    "ТипСодержимого": "application/javascript"
  }
]

На стороне SPA

Подключение моста

<!-- В index.html -->
<script src="./vs-bridge.js"></script>

Отправка запросов

// Запрос данных с сервера 1С
const result = await VSUIBridge.request('get_data', { id: 123 });
console.log('Получено:', result);

// Отправка события без ожидания ответа
VSUIBridge.sendEvent('user_action', { action: 'click', element: 'button' });

Обработка ошибок

try {
  const data = await VSUIBridge.request('complex_operation', { param: 1 });
} catch (error) {
  console.error('Ошибка выполнения:', error);
}

🔌 API

Клиентский API (vs-bridge.js)

`VSUIBridge.initialize()`

Инициализирует мост. Должен быть вызван первым перед использованием других методов.

`VSUIBridge.request(action, payload) → Promise`

Отправляет запрос на сервер Элемента и возвращает промис с результатом.

Параметр	Тип	Описание
`action`	`string`	Действие (маршрутизируется на сервере)
`payload`	`string`	JSON-строка с данными запроса

Возвращает: Promise<object> — результат выполнения на сервере

Таймаут: 30 секунд

const users = await VSUIBridge.request(
  'get_users',
  JSON.stringify({ department: 'IT' })
);

`VSUIBridge.sendEvent(eventName, payload)`

Отправляет событие на сервер без ожидания ответа.

Параметр	Тип	Описание
`eventName`	`string`	Имя события
`payload`	`string`	JSON-строка с данными события

VSUIBridge.sendEvent(
  'log_action',
  JSON.stringify({ action: 'page_view', page: 'dashboard' })
);

`VSUIBridge._getUpdates() → string`

⚠️ Внутренний метод. Используется только компонентом 1С.

Выгружает очередь исходящих запросов в формате JSON.

`VSUIBridge._resolve(id, data, error)`

⚠️ Внутренний метод. Используется только компонентом 1С.

Доставляет ответ от сервера к ожидающему промису.

Параметр	Тип	Описание
`id`	`string`	Идентификатор запроса
`data`	`string`	JSON-строка с данными ответа
`error`	`string`	Текст ошибки (если есть)

Серверный API (Элемент)

Структура `VsСобытие`

Поле	Тип	JSON-ключ	Описание
`Идентификатор`	`Строка`	`id`	Уникальный ID запроса
`Действие`	`Строка`	`action`	Маршрутизируемое действие
`Содержимое`	`Строка`	`payload`	JSON-строка с данными

Структура `VsОтвет`

Поле	Тип	JSON-ключ	Описание
`Идентификатор`	`Строка`	`id`	ID запроса (из события)
`СодержимоеJson`	`Строка`	`dataJson`	JSON-строка с данными ответа
`Ошибки`	`Строка`	`error`	Текст ошибки (если есть)

Методы `VsСобытие`

// Создание ответа с данными
VsСобытие.СформироватьОтвет(Идентификатор, Данные) → VsОтвет

// Создание структуры ответа
VsСобытие.СформироватьСтруктуруОтвета(Идентификатор, Данные, Ошибка = "") → Структура

Контракт `КонтрактСобытия`

// Абстрактный метод для реализации
КонтрактСобытия.МаршрутизацияСобытийСОтветом(События, Ответы)

🗂 Управление ресурсами

HTTP-сервис публикации ресурсов

Корневой URL: /vsui/v1

`POST /resources`

Загрузка массива ресурсов в формате Base64.

Тело запроса:

[
  {
    "ВидРесурса": "ФайлИндекс",
    "Наименование": "index.html",
    "Ресурс": "<base64_encoded_content>",
    "ТипСодержимого": "text/html",
    "ОтносительнаяHttpСсылкаСтрокой": ""
  }
]

`GET /resources`

Заглушка для проверки доступности сервиса.

Ответ:

Привет, мир

Форма управления ресурсами

Для ручного управления ресурсами используйте форму “РесурсыПриложенияФормаЗаписи”.

🚧 Статус

⚠️ Work in Progress

📄 Лицензия

MIT — используйте свободно с указанием автора stopchewing.

VSUI Bridge

✨ Возможности

🏗 Архитектура

Размещение ресурсов в 1С

На стороне SPA

Подключение моста

Отправка запросов

Обработка ошибок

🔌 API

Клиентский API (vs-bridge.js)

`VSUIBridge.initialize()`

`VSUIBridge.request(action, payload) → Promise`

`VSUIBridge.sendEvent(eventName, payload)`

`VSUIBridge._getUpdates() → string`

`VSUIBridge._resolve(id, data, error)`

Серверный API (Элемент)

Структура `VsСобытие`

Структура `VsОтвет`

Методы `VsСобытие`

Контракт `КонтрактСобытия`

🗂 Управление ресурсами

HTTP-сервис публикации ресурсов

`POST /resources`

`GET /resources`

Форма управления ресурсами

🚧 Статус

📄 Лицензия

Описание

Релизы

Конвейеры

Разработчики

VSUI Bridge

✨ Возможности

🏗 Архитектура

Размещение ресурсов в 1С

На стороне SPA

Подключение моста

Отправка запросов

Обработка ошибок

🔌 API

Клиентский API (vs-bridge.js)

VSUIBridge.initialize()

VSUIBridge.request(action, payload) → Promise

VSUIBridge.sendEvent(eventName, payload)

VSUIBridge._getUpdates() → string

VSUIBridge._resolve(id, data, error)

Серверный API (Элемент)

Структура VsСобытие

Структура VsОтвет

Методы VsСобытие

Контракт КонтрактСобытия

🗂 Управление ресурсами

HTTP-сервис публикации ресурсов

POST /resources

GET /resources

Форма управления ресурсами

🚧 Статус

📄 Лицензия

Описание

Релизы

Конвейеры

Разработчики

`VSUIBridge.initialize()`

`VSUIBridge.request(action, payload) → Promise`

`VSUIBridge.sendEvent(eventName, payload)`

`VSUIBridge._getUpdates() → string`

`VSUIBridge._resolve(id, data, error)`

Структура `VsСобытие`

Структура `VsОтвет`

Методы `VsСобытие`

Контракт `КонтрактСобытия`

`POST /resources`

`GET /resources`