Используем Webix Remote с PHP

Из этой статьи вы узнаете как интеграровать библиотеку Webix в PHP код.

Как установить

Пакет доступен по ссылке на Github.

Инициализация на сервере

Начнём с создания сервера:

$api = new Webix\Remote\Server();

После чег овы сможете добавлять новые фцнкции с помощью метода setMethod() и затем вызывать их на клиенте.

setMethod() принимает 2 параметра :

  • name (string) - имя, под которым метод будет зарегистрирован
  • function (function/object) - метод(ы), зарегистрированные под этим именем (name)

Давайте применим метод setMethod для функции add, которая будет суммировать два числа.

// функция "add" 
$api->setMethod("add", function($a, $b){
    return $a + $b;
});

Теперь вы можете вызывать зарегистрированную функцию с клиента.

Добавление класса

Вы также можете объявить новый класс, внутри которого описать необходимые функции.

Давайте создадим класс "DataDao" и объявим функцию multiply внутри:

class DataDao{
    public function multiply($a, $b){
        return $a * $b;
    }
}

После чего вам необходимо создать экземпляр класса "DataDao" используя метод setClass(). Метод принимает 2 параметра:

  • name (string) - имя нового объекта класса
  • class_object (object) - объект класса
$api->setClass("data", new DataDao());

Чтобы вызвать метод класса на клиенте, необходимо указать имя объекта и имя функции.
Например, через нотацию data.multiply можно обратиться к функции multiply.

Как подключить на клиенте

На клиенте необходимо подключить путь к серверному API после webix.js файла:

<script src="webix.js"></script>
<script src="api.php"></script>

Чтобы обратиться к серверному методу, необходимо вызвать webix.remote.methodName.

Webix Remote загружает данные асинхронно. Клиент сперва получает промис, а реальные данные приходят позже

Давайте отправим запрос на сервер и попросим функцию multiply вернуть сумму двух чисел.

var result = webix.remote.data.multiply(2, 4);
result.then((data) => alert(data));  // 8

В нашем примере переменная result это промис с данными.

Вы также можете загрузить данные синхронно. Для этого используйте метод sync():

var sum = webix.remote.add(2, 4).sync(); 
alert(sum); // 6

Как добавить статические данные

Вы

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

Чтобы указать статические данные, используйте метод setData() и передайте в него 2 аргумента:

  • name (string) - имя параметра, который будет задан как статический
  • handler (function) -функция, которая получит объект запроса и вернёт результат
$api->setData("user", "1");

CSRF-защита

Чтобы обеспечить безоапсное соединение с сервером, необходимо указать CSRF-ключ (уникальная строка) первым параметром в момент создания сервера:

//api.php
$key = $_SESSION["csrf-key"];
$api = new Webix\Remote\Server($key);

Уровень доступа API

Webix Remote даёт возможность ограничить доступ к API согласно уровню доступа пользователя.
Это значит, что пользователь сможет использовать только те методы, которые доступны его уровню доступа.

Для реализации такого поведения в момент создания метода необходимо задать роль, которая позволит использовать этот метод:

$api->setMethod("role@method_name", function(){
   // ваш код
});

Например, вы можете ограничить доступ к функции "add" всем ролям кроме администратора (admin).

$api->setMethod("admin@add", function($a, $b){
    return $a + $b;
});

Уровни доступа задаются вторым параметром конструктора для создания сервера:

$api = new Webix\Remote\Server($key, $user);
  • все методы, у которых не указан модификатор доступа, по умолчанию доступны всем
  • при req.session.user доступны методы для модификатора "user"
  • при req.session.user.role доступны методы для определённой роли

Предположим, у вас есть следующее правило:

$user = ["role" => "admin,levelB"];

В этом случае, функция add будет доступна пользователям с модификаторами "user", "user.role=admin" и "user.role=levelB". Для пользователей с другой ролью этот метод будет недоступен:

api.setMethod("user@add1", (a,b) => a+b ); // доступен
api.setMethod("admin@add2", (a,b) => a+b ); // доступен
api.setMethod("levelC@add3", (a,b) => a+b ); // недоступен
Наверх