Live Updates Mode (Устаревший)

warning

Описанная функциональность устарела и больше не поддерживается.

примечание

Эта статья относится к устаревшей реализации режима Live Updates для DHTMLX Scheduler. Более подробную информацию о текущей версии смотрите здесь.

Live Updates — это режим, который обеспечивает синхронные обновления данных в реальном времени.

Когда один пользователь вносит изменение, оно становится видимым для всех остальных немедленно.

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

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

Основной принцип

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

В этой версии модуля Live Updates реализована через расширение модуля DataProcessor с использованием клиента библиотеки Faye, а также дополнительного backend-приложения, которое маршрутизирует сообщения между клиентами.

Решение состоит из трёх частей:

1. фронтенд с Scheduler и модулем DataProcessor.
2. бэкенд, который реализует CRUD-операции в постоянном хранилище.
3. hub живых обновлений, который отвечает за подключение клиентов.

Когда пользователь вносит изменения в данные:

• фронтенд отправляет обновление в бэкенд.
• Одновременно фронтенд отправляет те же обновления в hub живых обновлений.
• Hub живых обновлений транслирует обновление всем подключённым клиентам.
• Когда фронтенд получает обновление от hub живых обновлений, он применяет его к данным Scheduler таким образом, чтобы не вызывать изменений в CRUD-бэкенде.

Прежде чем начать

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

Базовый пример такого приложения может выглядеть примерно так:

<script>
    function init() {
        scheduler.init('scheduler_here', new Date(2027,5,24), "week");
        scheduler.load("api/scheduler");

        const dp = scheduler.createDataProcessor({
            url: "/events",
            mode: "REST"
        });
    }
</script>

Конфигурация Live Updates

примечание

Эта реализация Live Updates устарела и не входит в основной пакет.

Шаг 1. Настройка

1. Скачать плагин Live Updates для Scheduler: download link
2. Скачать приложение Live Updates backend: download link
3. Запустите приложение Live Updates backend, следуя инструкциям во вложенном readme файле.

Шаг 2. Настройка фронтенда

Чтобы работать с режимом Live Updates, подключите два дополнительных файла во фронтенд-приложение:

• live_updates.js - файл, загруженный на предыдущем шаге
• client.js - файл, который динамически генерируется WebSocket-бэкендом

<script src="./lib/dhtmlxscheduler/live_updates.js"></script>
<script src="http://localhost:8008/client.js"></script>

В приведённом выше примере мы подключаемся напрямую к WebSocket-приложению. Обычно вы захотите маршрутизировать этот URL через ваше основное приложение, чтобы не раскрывать адрес и порт второго приложения. Это можно сделать с помощью обратного прокси.

Проксирование запросов через основное приложение (Node.js):

const httpProxy = require('http-proxy');
const proxy = httpProxy.createProxyServer({});

module.exports = function(app){
    app.all("/liveUpdates*", function(req, res) {
        proxy.web(req, res, {target: "http://localhost:8008"});
    });
}

Фронтенд:

<script src="./lib/dhtmlxscheduler/live_updates.js"></script>
<script src="/liveUpdates/client.js"></script>

Шаг 3. Включение Live Updates

Режим включается вызовом метода live_updates() у экземпляра DataProcessor. Чтобы это работало, сначала необходимо инициализировать DataProcessor. В качестве параметра метод принимает URL точки входа WebSocket.

const dp = scheduler.createDataProcessor({
    url: "/events",
    mode: "REST"
});

dp.live_updates("/liveUpdates");

Вы можете скачать полное демонстрационное приложение здесь.