Веб-сокеты на вашем синхронном сайте

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

Это будет работать, но это также добавит значительный трафик на наш HTTP-сервер (даже для дублированных ответов).

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

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

Это ограничение часто подталкивает разработчиков к другим платформам (например, NodeJS) или к новым архитектурам (например, предоставляемым Icicle, ReactPHP и AMPHP). Это одна из задач, которые Socketize стремится решить.

Socketize на помощь!

Для краткости мы собираемся использовать версию Socketize без аутентификации. Это означает, что мы сможем читать и записывать данные без аутентификации каждого пользователя. Socketize поддерживает аутентификацию, и это рекомендуемый (и даже предпочтительный) метод.

Создайте учетную запись Socketize, перейдя по адресу https://socketize.com/register :

Затем перейдите на https://socketize.com/dashboard/member/payload/generate и сгенерируйте ключ для admin Запишите это вниз. Перейдите на https://socketize.com/dashboard/account/application для ключа своей учетной записи («Открытый ключ»). Теперь нам нужно добавить новый JavaScript на нашу HTML-страницу:

 <script src="https://socketize.com/v1/socketize.min.js"></script>
<script type="application/javascript">
    var params = {
        "public_key": "[your_public_key]",
        "auth_params": {
            "username": "admin",
            "payload": "[your_admin_key]"
        }
    };

    var socketize = new Socketize.client(params);

    socketize.on("login", function(user) {
        var user = socketize.getUser();
        console.log(user);
    });
</script>

Если вы замените [your_public_key][your_admin_key] Вы также должны увидеть объект, описывающий учетную запись пользователя Socketize, которая вошла в систему. Обратите внимание на id

Что это значит? Наша HTML-страница теперь подключена к базе данных Socketize (для нашей учетной записи). Мы можем читать и писать из именованных списков сообщений. Давайте изменим наш серверный скрипт, чтобы записать начальный список карт в именованный список Socketize. Все запросы API Socketize имеют вид:

 curl "https://socketize.com/api/[method]?[parameters]"
    -u [your_public_key]:[your_private_key]
    -H "Accept: application/vnd.socketize.v1+json"

Мы можем создать функцию request

 function request($method, $endpoint, $parameters = "")
{
    $public = "[your_public_key]";
    $private = "[your_private_key]";

    $auth = base64_encode("{$public}:{$private}");

    $context = stream_context_create([
        "http" => [
            "method" => $method,
            "header" => [
                "Authorization: Basic {$auth}",
                "Accept: application/vnd.socketize.v1+json",
            ]
        ]
    ]);

    $url = "https://socketize.com/api/{$endpoint}?{$parameters}";
    $response = file_get_contents($url, false, $context);

    return json_decode($response, true);
}

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

 $json = json_encode([
    "id" => 1,
    "name" => "Mysterious Challenger",
]);

request(
    "PUT",
    "push_on_list",
    "key=[your_user_id]:cards&value={$json}"
);

request(
    "GET",
    "get_list_items",
    "key=[your_user_id]:cards"
);

Вероятно, лучше всего использовать надежную библиотеку HTTP-запросов, такую ​​как GuzzlePHP , для отправки запросов сторонним сервисам. Также есть официальный PHP SDK по адресу: https://github.com/socketize/rest-php , но я предпочитаю просто использовать эти лаконичные методы против JSON API.

Функция request Вам нужно заменить [your_public_key][your_private_key][your_user_id] Два примера вызова должны тогда работать для вас. cards Вы можете думать о Socketize как о HTTP-версии хранилища объектов.

Мы можем настроить нашу HTML-страницу, чтобы вытащить элементы из этого списка. Пока мы на этом, мы можем добавить кнопку для удаления ненужных карт:

 var socketize = new Socketize.client(params);
var cards = document.querySelector(".cards");

cards.addEventListener("click", function(e){
    if (e.target.matches(".card .remove")) {
        e.stopPropagation();
        e.preventDefault();

        socketize.publish("removed", e.target.dataset._id);
        socketize.updateListItem("cards", null, e.target.dataset._id);
    }
});

socketize.subscribe("removed", function(_id) {
    var items = document.querySelectorAll(".card");

    for (var i = 0; i < items.length; i++) {
        if (items[i].dataset._id == _id) {
            items[i].remove();
        }
    }
});

socketize.on("login", function(user) {
    var user = socketize.getUser();

    socketize.getListItems("cards")
        .then(function(json) {
            for (var i = 0; i < json.length; i++) {
                var name = document.createElement("span");
                name.className = "name";
                name.innerHTML = json[i].name;

                var remove = document.createElement("a");
                remove.dataset._id = json[i]._id;
                remove.innerHTML = "remove";
                remove.className = "remove";
                remove.href = "#";

                var card = document.createElement("li");
                card.dataset._id = json[i]._id;
                card.className = "card";
                card.appendChild(name);
                card.appendChild(remove);

                cards.appendChild(card);
            }
        });
});

Метод match Это не единственный способ сделать это, но он намного чище, чем альтернатива.

В этом примере мы добавляем слушатель события click, перехватывая щелчки на элементах .remove Это называется делегированием событий, и это очень эффективно! Таким образом, нам не нужно беспокоиться об удалении прослушивателей событий для каждого элемента .remove

При каждом .removeremoval В то же время мы публикуем событие removal Мы также прислушиваемся к событиям dataset

Мы можем обновить свойства data-* Это JavaScript-представление атрибутов _id Таким образом, мы можем хранить Socketize _id каждой карты. Наконец, мы корректируем код для создания новых элементов и добавляем сгенерированные элементы к элементу .cards

Куда мы отправимся отсюда?

Этот крошечный пример должен показать, как начать делать полезные вещи с помощью Socketize. Мы добавили связь через веб-сокет (чтение и запись в именованные списки и публикация специальных типов событий). Что удивительно, так это то, что мы сделали это без существенного изменения нашего серверного кода. Нам не нужно было переписывать цикл событий. Мы просто добавили одну или две функции и могли передавать события в браузер.

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

Если вы хотите улучшить свои навыки, подумайте о создании интерфейса для добавления и изменения порядка карт. Если у вас есть вопросы или вы можете подумать о других интересных применениях для этого вида постоянного общения; оставьте комментарий ниже.