WebSockets (пользовательский прокси)

Чтобы обеспечить обновления приложений в реальном времени (например, в чатах), используйте WebSockets.

Основные принципы

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

const socket = new WebSocket("ws:host");

Чтобы отправить данные на сервер, используйте событие onStoreUpdated и метод socket.send():

$$("data").data.attachEvent("onStoreUpdated", (id, update, operation) => {
    socket.send(webix.stringify(update));
});

Чтобы обновить данные на клиенте, используйте socket.onmessage(). Однако помните, что вам необходимо обернуть обновления данных в DataProcessor.ignore(), во избежании ненужных сохранений на сервер.

socket.onmessage = (e) => {
    var update = webix.DataDriver.json.toObject(e.data);
 
    webix.dp(view).ignore(() => {
        // обновления данных компонента
        // ...
    });
};

Это полное решение, т.к. пользовательский прокси, который открывает сокет, сам позаботится о получении обновлённых данных и закроет соединение, когда оно более не понадобится:

//declare
webix.proxy.socket = {
    $proxy:true,
    load:function(view) {
        // создаём сокет соединение
        this.socket = new WebSocket("ws:"+this.source);
 
        // обрабатываем ошибки
        this.socket.onerror = (error) => {
            console.log("WebSocket Error", error);
        };
        // получаем обновления
        this.socket.onmessage = (e) => {
            // обновляем данные
            // ...
        };
        // закрываем соединение при разрушении компонента
        view.attachEvent("onDestruct", () => {
            this.socket.close();
        });
    },
    save:function(view, update) {
        // отправляем сообщение на сервер
        this.socket.send(webix.stringify(update));
    }
};

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

// создаём обычный прокси для загрузки и сохранения с уникальным ключом и clientId
var data_proxy = webix.proxy("socket", "//localhost:8080", {
    key:"data", clientId:webix.uid()
});
 
// используем прокси
webix.ui({
    view:"datatable",
    url:data_proxy,
    save:data_proxy
});

Это базовые инструкции по реализации обновлений в реальном времени с использованием WebSockets. Более подробную информацию читайте в статье нашего блога.

По ссылке ниже вы найдёте live-демо. Также вы можете открыть это демо в пакете (чтобы загрузить демо, выполните команду node backend/index.js).

Наверх