Для начала, давайте определимся, что же такое VK API и какие возможности он нам предоставляет. API Вконтакте — позволяет разработчику взаимодействовать напрямую с базой данных вконтакте при помощи специальных http запросов. Чем нам, как разработчикам это может быть полезно? При помощи API мы можем извлекать самую различную информацию о пользователях, группах, записи со стены, фотографии и многое другое. Само собой, сервис имеет определенные ограничения, об этом подробнее под катом.

Предупреждаю сразу, статья не для новичков и некоторые моменты я пояснять не буду, так как статья получится очень длинной. Данными статьями я хочу лишь показать принцип работы с VK API и примеры кода. И конечно же код будет доступен на github .

Основная информация

Первое, что нам нужно для создания нашего приложения, это перейти по адресу https://vk.com/dev . Далее переходим в «Мои приложения» и нажимаем кнопку «Создать приложение» . Вконтакте позволяет регистрировать 3 типа приложений, краткое описание каждого:

• Standalone-приложение - это для мобильных клиентов, десктопных программ и сайтов на которых взаимодействие с API будет вестись из Javascript.
• Веб-сайт - если вы хотите написать скрипт для веб сайта, который будет использовать API указывайте этот вариант.
• IFrame/Flash приложение - игры в вконтакте и т.д.

Пишем имя приложения, тип выбираем «Веб-сайт», в адрес сайта и базовый домен указываем собственно адрес вашего сайта и домен. Если разрабатываете локально, можно указывать http://localhost .

Создание приложения

Наше приложение создано, теперь в разделе редактирования, переходим в «Настройки». На этой странице будут нужные нам данные, а именно id , защищенный ключ и сервисный ключ . Все это нужно для авторизации пользователя. Алгоритм взаимодействия с API очень простой:

1. Пользователь авторизирует учетную запись ВК в приложении.
2. Получает специальный токен.
3. Выполняет запросы к API.

Теперь нужно собственно написать код, который позволит нам взаимодействовать с API. Писать мы будем на PHP с подключением некоторых библиотек. Нам понадобится composer , если у вас не установлен, то можете скачать его перейдя по этой ссылке .

В папке проекта создаем файл composer.json и записываем в него следующее:

{ "require": { "slim/slim": "^3.0", "twbs/bootstrap": "4.0.0-alpha.6", "illuminate/database": "^5.4", "slim/twig-view": "^2.2", "guzzlehttp/guzzle": "~6.0" } }

Сохраняем файл, открываем консоль и переходим в папку с нашим проектом в котором есть созданный нами файл. Выполняем команду composer install .
Этой командой мы установили мини фреймворк Slim, Bootstrap для быстрой верстки, пакет для работы с базой данных и шаблонизатор.

Структура приложения

Структура очень проста и включает в себя несколько файлов и папок.

• app — для настроек приложения, в этой папке будем держать маршруты, классы и прочие файлы настроек.
• public — основная папка в которой содержится файл index.php и файлы стилей
• resources — папка для представлений(views)

Создаем файлы

public/index.php

run();

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

app/app.php

include "../vendor/autoload.php"; // Debug $config = [ "settings" => [ "displayErrorDetails" => true, "LogLevel" => "debug", "vk" => [ "client_id" => "ID ВАШЕГО ПРИЛОЖЕНИЯ", "client_secret" => "СЕКРЕТНЫЙ КЛЮЧ ВАШЕГО ПРИЛОЖЕНИЯ", "redirect_uri" => "http://vk-tutor.com/authorize", "display" => "popup", "scope" => "friends,wall,offline", "response_type" => "code" ] ], ]; $app = new Slim\App($config); // DI for twig view $container = $app->getContainer(); $container["view"] = function ($container) { $view = new \Slim\Views\Twig("../resources/views", [ "cache" => false ]); $basePath = rtrim(str_ireplace("index.php", "", $container["request"]->getUri()->getBasePath()), "/"); $view->addExtension(new Slim\Views\TwigExtension($container["router"], $basePath)); return $view; }; include "classes/VK.php"; // Routes require "routes.php";

Не пугайтесь, сложного нет ничего. Просто подключаем загрузчик, внедряем зависимость для применения Twig и подключаем файл с маршрутами.

app/routes.php

get("/", function ($request, $response) { $vk = new VK($this->get("settings")["vk"]); if (isset($_SESSION["vk"])) { if (!isset($_SESSION["account"])) { // Устанавливаем токен $vk->accessToken = $_SESSION["vk"]->access_token; // Получаем информацию о текущем пользователе // Записываем всю информацию в сессию $_SESSION["account"] = $vk->getAccountInfo($_SESSION["vk"]->user_id); } return $this->view->render($response,"index.html", ["vk" => $vk, "account" => $_SESSION["account"]->response]); } return $this->view->render($response,"index.html", ["vk" => $vk]); }); $app->get("/authorize", function ($request, $response) { // Проверяем, есть ли в адресной строке код if ($request->getQueryParam("code") != NULL) { $vk = new VK($this->get("settings")["vk"]); // Получаем токен $_SESSION["vk"] = $vk->getAccessToken($request->getQueryParam("code")); } return $response->withStatus(302)->withHeader("Location", "../"); });

Теперь наше приложение полностью готово к использованию. Для рендеринга страницы, нужно поместить шаблон в директорию resources/views . Можем приступать к написанию самого кода, который позволит нам взаимодействовать с API вконтакте. Поскольку нам нужно будет выполнять HTTP запросы к API, я установил Guzzle. Это HTTP клиент который позволит нам очень просто выполнять HTTP запросы к vkontakte.

Класс для работы с VK API

client_id = $params["client_id"]; $this->client_secret = $params["client_secret"]; $this->redirect_uri = $params["redirect_uri"]; $this->display = $params["display"]; $this->scope = $params["scope"]; $this->response_type = $params["response_type"]; } public function getLoginLink() { $params = [ "client_id" => $this->client_id, "redirect_uri" => $this->redirect_uri, "scope" => $this->scope, "response_type" => $this->response_type ]; return $this->loginUrl . http_build_query($params); } public function getAccessToken($code) { $client = new \GuzzleHttp\Client(); $response = $client->request("POST", $this->queryUrl, [ "form_params" => [ "client_id" => $this->client_id, "client_secret" => $this->client_secret, "redirect_uri" => $this->redirect_uri, "code" => $code, ], "verify" => false, ]); $data = json_decode($response->getBody()); return $data; } public function getAccountInfo($id) { $url = "https://api.vk.com/method/users.get"; $client = new \GuzzleHttp\Client(); $response = $client->request("POST", $url, [ "form_params" => [ "user_ids" => $id, "fields" => "photo_50,counters", "name_case" => "Nom", "access_token" => $this->accessToken ], "verify" => false ]); $data = json_decode($response->getBody()); return $data; } }

Я написал небольшой класс, который пока еще умеет только авторизировать пользователя.
Метод getLoginLink() генерирует ссылку для авторизации, метод getAccessToken() запрашивает токен для доступа и последний метод getAccountInfo() загружает информацию об авторизованом пользователе.

На этом логика приложения завершена и при авторизации пользователя мы получим в сессии массив с данным пользователя и можем отобразить это.
Поскольку я подключил Twig шаблонизатор, шаблоны у меня записываются в html файлы, но вы можете использовать и обычные php файлы или другой шаблонизатор.

Код файла для отображения информации.

{% extends "layout/app.html" %} {% block content %}

{% endblock %}

Фреймворк slim очень хорошо подходит для создания небольших приложений и API для своих проектов, поэтому я его и использовал в этой статье и будем продолжать использовать далее. В следующей статье посмотрим как можно достать посты со стены в группе и обработать их.

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

Итак, что же нам предлагает API ВКонтакте - давайте разберемся.

Обзор

Как обычно, для начала почитаем, что об этом пишут наши коллеги.

Однако, никаких вразумительных статей, кроме материалов в рамках самого "ВКонтакте" найти не смог. Если кто-нибудь видел таковые - пожалуйста, киньте ссылочку в комменты. Итак:

Возможности API ВКонтакте

Попробуем выявить возможности приложений ВКонтакте, проанализировав функции API.

Работа с пользовательскими данными

Приложение имеет доступ к следующим данным:

• Установил ли пользователь, который просматривает приложение себе на страницу данное приложение
• Данные по любому пользователю, на основании его ID:
  - имя,
  - фамилия,
  - псевдоним,
  - пол,
  - дата рождения,
  - город,
  - страна,
  - часовой пояс,
  - url-адреса фото малого, среднего и большого размеров,
  - известен ли его мобильный телефон,
  - рейтинг
• Баланс пользователя на счету приложения
• Доступ к данным пользователя, просматривающего приложение:
  - разрешить отправлять ему уведомления,
  - доступ к друзьям,
  - доступ к фотографиям,
  - доступ к аудиозаписям,
  - доступ к предложениям,
  - доступ к вопросам,
  - доступ к wiki-страницам,
  - доступ к меню слева,
  - публикация на стенах пользователей.
• Список групп, в которых состоит пользователь с общей информацией о каждой группе.

У каждого пользователя ВКонтакте есть друзья - другие пользователи ВКонтакте. Доступные данные друзей пользователя:

• Список друзей текущего пользователя.
• Список друзей текущего пользователя, которые уже установили данное приложение.

Приложение может так же осуществлять следующие действия:

• Поднять рейтинг пользователя от имени приложения
• Если пользователь установил приложение в меню слева, приложение может задать краткое имя приложения, а так же вывести счетчик рядом с названием приложения - например, счетчик уведомлений.
• Устанавливать и считывать строку статуса приложения.

Работа с фотографиями пользователя

Пользователь ВКонтакте может создавать множество альбомов с фотографиями в разделе "Мои Фотографии". API предоставляет широкий выбор возможностей по работе с альбомами и фотографиями.

Фотографии должны иметь формат JPG, PNG или GIF.

Приложение может получить:

• Список фото-альбомов с общими данными о каждом альбоме.
• Список фотографий из какого-либо альбома (или непосредственно по ID фотографии) с набором ссылок на изображения различных размеров и качества.

Приложение может осуществлять следующие действия с альбомами и фотографиями:

• Создавать альбом (с описанием и контролем доступа к нему).
• Редактировать данные существующего альбома.
• Изменять порядок в списке альбомов.
• Изменять порядок фотографий в альбоме.
• Переносить фотографии из альбома в альбом.
• Делать фотографию обложкой альбома.
• Загружать фотографии на сервер ВКонтакте, на стену пользователя, на страницу пользователя.

Работа с аудиозаписями пользователя

Пользователь может загружать аудиозаписи и прослушивать их в разделе "Мои Аудиозаписи".

Аудиозапись должна быть в формате MP3, не превышать 10Мб и не нарушать авторских прав.

API предоставляет широкий выбор возможностей для работы с аудиозаписями:

• Получать список аудиозаписей пользователя или группы с общей и подробной информацией о каждой записи.
• Получать текст песен аудиозаписей.
• Осуществлять поиск по аудиозаписям.
• Загружать, удалять, восстанавливать удаленные аудиозаписи.
• Редактировать данные аудиозаписи.
• Добавлять аудиозапись на страницу пользователя или группы.
• Менять порядок следования аудиозаписей.

Работа с видеозаписями пользователя

API позволяет получать список видеозаписей пользователей, групп с общей информацией о каждой видеозаписи.

Стена пользователя

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

API предоставляет приложению доступ к следующим функциям:

• Получить платежный баланс (количество голосов) приложения.
• Получить платежный баланс (количество голосов) пользователя.
• Перевести голоса со счета приложения на счет пользователя.
• Перевести голоса со счета пользователя на счет приложения.
• Перевести голоса со счета пользователя на счет другого пользователя в рамках приложения.
• Просмотр историй транзакций по переводу голосов между пользователями и приложением

Работа с SMS

Приложение ВКонтакте может задействовать столь мощные сервисы, как отправка и прием SMS:

• Отправка SMS-уведомления. При этом со счета приложения списывается 0.1 голоса.
• Просмотр списка SMS-сообщений, полученных от пользователей приложением.
• Просмотр истории SMS-уведомлений, посланных приложением.

Отправка SMS-сообщения бесплатна (стоимость обычного SMS-сообщения). Отправка осуществляется на телефон +7 921 000 00 07, а чтобы приложение получило свое сообщение, API предоставляет возможность установить приложению префикс, который пользователь должен указать в начале своего SMS-сообщения.

Работа с сервисом "Предложения"

С помощью сервиса "Предложения", пользователь получает возможность создать свое уникальное предложение. Это предложение смогут увидеть все пользователи ВКонтакте -этот сервис независим от личной странички. Любое предложение начинается со слов "Хотели бы Вы", далее следует сам текст, а в конце уже стоит вопросительный знак. Пользователи могут посматривать предложения других пользователей, принимать чужое предложение нажатием варианта «Да, конечно» или отказываться нажатием варианта «Нет».

Итак, функции для работы с предложениями:

• Редактировать, открыть для общего доступа, и закрыть предложение пользователя, просматривающего приложение.
• Просматривать, искать предложения пользователей.
• Принимать и отклонять предложения пользователей.
• Просматривать ответы на предложение пользователя.
• Получать список ответов на предложения, принятые пользователем.
• Удаление и пометка о прочтении ответов пользователей.

Работа с сервисом "Вопросы"

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

Работа с Wiki-страницами

Пользователям предоставляется система редактирования страниц, которая позволяет участникам групп совместно создавать бесконечное количество страниц с перекрестными ссылками. Таким образом, пользователи могут создавать в группах библиотеки или мини-энциклопедии. Кроме того, пользователи могут использовать особую wiki-разметку для оформления страниц.

Приложения имеют возможность работать с Wiki-страницами:

• Получать текст и полную информацию о wiki-странице.
• Редактировать и сохранять текст и настройки wiki-страницы.
• Получать список wiki-страниц в группе.
• Транслировать wiki-разметку в html-разметку.

Организация чата

API позволяет создавать в приложении чат, используя очередь сообщений - 127 сообщений. Для этого предусмотрены функции добавления сообщения в очередь и просмотра всей очереди сообщений.

Сохранение игровых рекордов

API предусматривает специальные функции для сохранения результатов игры пользователя и получения списка результатов.

Работа с переменными

Для хранения данных, API предоставляет каждому приложению 4096 уникальных переменных по 255 байт.

Причем, переменные распределяются по следующим диапазонам:

• Глобальные переменные: могут использоваться для данных, которые общие для всех экземпляров данного приложения, например, это таблица рекордов игрового приложения.
• Переменные пользователя: эти переменные уникальны для каждого пользователя данного приложения и могут служить, к примеру, для сохранения игры пользователя.
  Примерно к половине переменных предоставляется доступ другим пользователям. Часть переменных является зарезервированной для разных нужд.
• Переменные сессии: при работе с переменными, в запросе можно задавать идентификатор сессии (сеанса или комнаты). Таким образом, переменные этого диапазона будут общими для всех пользователей, которые в данный момент просматривают приложение. Соответственно, приложения могут осуществлять многопользовательское общение в реальном времени - чаты, многопользовательские игры и прочее.
• Переменные, содержащие временные данные, которые уникальны для текущего просматриваемого приложения, и при его закрытии пропадут.

Однако, количество переменных не велико - всего по 1024 переменные на диапазон, и это без учета зарезервированных переменных.

Работа с удаленным сервером разработчика

Приложение ВКонтакте является обычным Flash-приложением и обладает одним большим недостатком. Его нельзя считать защищенным от взлома. Точнее говоря, затраты на взлом flash-приложения не столь велики как, к примеру взлом сервера. Существует достаточное количество программ SWF-декомпиляторов, при помощи которых можно легко получить исходный программный код, выяснить логику приложения и подтасовать запросы к API.

Поэтому, некоторые функции, которые были перечислены выше, работают только с удаленного сервера разработчика, минуя flash-приложение, а именно:

• Работа с рейтингом пользователя
• Вывод короткого статуса пользователя в приложении на его главной странице
• Отправка уведомлений пользователя (только пользователям, которые установили себе данное приложение)
• Работа с голосами (платежные операции)
• Установка счетчика на приложение и работа с строкой статуса приложения
• Отправка и просмотр SMS-уведомлений

Таким образом, чтобы иметь возможность осуществлять эти операции, приложение должно не напрямую обращаться к API, а запрашивать свой специально предусмотренный сервер-прослойку, который в свою очередь будет общаться с API ВКонтакте и выдавать приложению полученные данные.

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

Локализация приложений

Разработчики приложений имеют возможность переводить свои приложения на более чем 50 языков, используя платформу переводов ВКонтакте . В данный момент платформа на этапе тестирования и применима только для приложений с большим количеством пользователей.

Использование Flash-контейнера приложения

Альтернативный способ внедрения flash-приложения в страницу ВКонтакте - через Flash-контейнер.

Flash-контейнер предоставляет следующие возможности для приложения:

Особенности API ВКонтакте

Итак, мы ознакомились со всеми возможностями, которые предоставляет API ВКонтакте. Хочется выделить особенности (скорее недостатки) API, с которыми мне пришлось столкнуться:

Итог

Flash-приложения ВКонтакте обладают достаточно мощным API, который решает основные задачи, и может полностью обеспечить проекты средней сложности. Все остальные потребности, разработчик может решить, используя свой веб-сервер.

У меня часто спрашивают, как работать с API . Наиболее, популярной задачей, связанной с API , является - работа с API ВКонтакте . В данной статье я покажу, как работать с API ВКонтакте , а, главное, покажу Вам, что все API работают по единому принципу .

Вот порядок действий , который Вам необходимо сделать, чтобы начать работать с любым API :

1. Найти документацию по нужному API .
2. Посмотреть примеры подключения к API . Тут могут быть разные варианты. Например, на одном сервисе потребуют секретный ключ, выдаваемый после регистрации. На втором сервисе, все запросы не требуют секретных ключей. На третьем сервисе, есть и с секретным ключом, и без варианты работы. Иногда, секретный ключ называют токеном .
3. Скопировать простой готовый код с сайта документации и проверить его работу. Если не работает, то ищите ошибку у себя, так как едва ли она будет у сервиса.
4. Найти в документации метод , который решает Вашу задачу.
5. Используя примеры и описание метода, отправить правильный запрос к API .
6. В зависимости от формата ответа, разобрать его на "составные части ", а дальше уже делать то, что требуется - вывести пользователю, сохранить в файл, отправить в базу данных и тому подобное.

А в качестве примера следования данной инструкции мы разберём API ВКонтакте . Итак:

1. Ссылка на документацию .
2. В данном случае есть методы, которые общедоступны, а потому не требуют токена, а есть методы, требующие его.
3. В данном случае, примеров на конкретном языке я не нашёл. Возможно, они есть, но явно не на виду. Обычно же, у API для каждого метода есть примеры на разных языках.
4. Мы хотим вывести 5 последних записей со стены конкретного пользователя, а затем вывести их у себя на сайте . Нужный нам метод .

Теперь мы должны отправить запрос к API , используя описание метода. Делать мы это будем через PHP :

$wall = file_get_contents("https://api.vk.com/method/wall.get?v=5.3&filter=others&domain=myrusakov&count=5");
print_r($wall);
?>

В данном случае, я использую API 5.3 (v=5.3 ), вывожу все записи независимо от автора (filter=others ) со своей страницы (domain=myrusakov ) в количестве 5 штук (count=5 ). Думаю, что здесь всё очень прозрачно.

Мы получили ответ в формате JSON , и теперь нам нужно перейти к последнему пункту - разобрать ответ на "составные части ". Дальше мы с Вами выведем записи со стены в более-менее читабельном виде на странице нашего сайта. Результирующий PHP-код :

$wall = file_get_contents("http://api.vk.com/method/wall.get?v=5.3&filter=others&domain=myrusakov&count=5"); // Отправляем запрос
$wall = json_decode($wall); // Преобразуем JSON-строку в массив
$wall = $wall->response->items; // Получаем массив комментариев
for ($i = 0; $i < count($wall); $i++) {
echo "

".($i + 1).". ".$wall[$i]->text."
".date("Y-m-d H:i:s", $wall[$i]->date)."

"; // Выводим записи
}
?>

Как видите, всё очень просто. Самая сложная часть - разобрать на составные элементы. Я предпочитаю выводить результат от API через print_r , а уже затем писать обработку этого. Хотя можно посмотреть пример ответа в описании метода, а дальше уже написать парсер.

• Перевод
• Tutorial

Beacon API - это основанный на JavaScript интерфейс для:

отправки небольшого количества данных на сервер с браузера, без ожидания ответа. В этой статье, мы рассмотрим в каких случаях будет полезен Beacon API, чем он отличается от использования XMLHTTPRequest (Ajax) для тех же целей и как его использовать.

Для чего нам очередной API?

Beacon API используется для отправки небольших по объему данных на сервер без ожидания ответа . Последняя часть утверждения является наиболее интересной. Beacon API разработан специально для того, что бы можно было отправить данные и забыть о них. Не нужно ожидать ответ, так как его и не будет.

Метафора с открытками, это такие карточки которые люди посылают/посылали друг другу. Как правило, на них писали небольшой по объему текст ("Ты где? А я на море лол.", "Тут у меня шикарная погода, не то что у тебя в офисе"), кидали в почту и забывали. Никто не ожидал ответа по типу "Я уже выехал за тобой", "У меня в офисе чудесно".

Существует множество случаев, когда подход "отправил и забыл" будет уместен.

Отслеживание статистики и Аналитическая информация

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

Дебаг и Логирование

Другое применение это логирования информации из JavaScript кода. Представьте себе ситуацию когда у вас большое приложение с богатым UI/UX. Все тесты зеленые, а на проде периодически всплывает ошибка о которой вы знаете, но не можете продебажить ее из за не хватки информации. В данном случае вы можете ипользовать Beacon для диагностики.

На самом деле любая задача с логированиям может быть решешина с использованием Beacon. Это может быть создание точек сохранения в играх, сбор информации об использоании нового функционала, запись результатов тестирования и так далее. Если это, что-то, что происходит в браузере и вы хотите, что бы сервер знал об этом, Beacon это, то, что нужно.

Разве мы не делали этого ранее?

Я знаю о чем вы думаете. Ничто из этого не ново? Мы общаемся с севером посредством XMLHTTPRequest уже более 10 лет. Недавно мы начали использовать Fetch API, что по факту делает то же самое, просто с новым Promise интерфейсом. Так зачем нам еще один Beacon API?

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

C Beacon API не нужно дожидаться лучшего момента для CPU, сети. Просто добавить в очередь запрос с помощью beacon практически нечего не стоит.

Для того, что бы понять почему это важно, достаточно взглянуть на то, как и где обычно используются подобная логика. Например для того, что бы измерить как долго пользователь находится на странице, нам необходимо отправить запрос на сервер как можно ближе к концу сессии.

Обычно это делают на unload или beforeunload . Подобный код может заблокировать выполнение и если происходит задержка выгрузки страницы, то и загрузка следущей страницы тоже задерживается. Это приводит к не лучшему UX.

Вы же понимаете насколько HTTP запросы медленные? И последнее, что вы хотите, так это впихивать HTTP запрос между переходами.

Пробуем Beacon API

Базовый пример использования очень прост:

let result = navigator.sendBeacon(url, data);

Использование navigator.sendBeacon()

navigator.sendBeacon принимает два параметра. Первый это URL на который будет послан запрос, второй это данные которые необходимо отправить. Запрос имеет вид HTTP POST .

data - этот параметр может принимать несколько форматов данных, все те с которыми работает Fetch API. Это может быть Blob, BufferSource, FormData или URLSearchParams и тд.

Мне нравится использовать FormData для простых key-value данных, это не сложный и простой в использовании класс.

// URL куда отправить данные let url = "/api/my-endpoint"; // Создание нового FormData let data = new FormData(); data.append("hello", "world"); let result = navigator.sendBeacon(url, data); if (result) { console.log("Добавлено в очередь!"); } else { console.log("Ошибка."); }

Поддержка браузерами

Поддержка этого API вполне себе солидная. Единственный браузер который не поддерживает, это Internet Explorer (не ожидал я такого) и Opera Mini. Но в Edge все работает. В большинстве случаев поддержка есть, но лучше на всякий случай проверить:

if (navigator.sendBeacon) { // Beacon код } else { // Использовать XHR? }

Пример: логируем время проведенное на странице

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

Так как нас интересует только время проведенное на странице, а не настоящее время, мы можем использовать performance.now() для получения базового timestamp при загрузке страницы:

let startTime = performance.now();

Давайте обернем небольшой кусочек логики в удобную в использовании функцию:

let logVisit = function() { // Test that we have support if (!navigator.sendBeacon) return true; // URL to send the data to, e.g. let url = "/api/log-visit"; // Data to send let data = new FormData(); data.append("start", startTime); data.append("end", performance.now()); data.append("url", document.URL); // Let"s go! navigator.sendBeacon(url, data); };

И наконец нам надо вызвать эту функцию когда пользователь покидает страницу. Первая мысль была использовать unload , но Safari на Mac, похоже блокирует запрос по соображениям безопасности. По этому лучше использовать beforeunload:

window.addEventListener("beforeunload", logVisit);

Когда страница выгружается (или перед этим), наша функция logVisit() будет вызвана и если браузер поддерживает Beacon API, отправит запрос на сервер.

Пару моментов

Так как большая часть проблем для решения которых будет использоваться Beacon API, вертятся вокруг отслеживания активности, будет важным отметить социальную и законную часть всей это кухни.

GDPR

Просто помните о нем.

DNT: DO NOT TRACK

В дополнение, браузеры имеют опцию которая позволяет пользователям обозначить, что они не хотят, что бы их активность отслеживалась. Do Not Track отправляет HTTP хедер, который выглядит так:

DNT: 1

Если вы отслеживаете данные которые могут индицировать пользователя и в хедерах запросов есть DNT: 1 , то лучше послушать пользователя и не сохранять какие-либо данные. Например использую PHP это можно проверить следующим образом:

if (!empty($_SERVER["HTTP_DNT"])) { // Не хочу, не надо }

В заключение

Beacon API действительно очень удобный способ для отправки данных на сервер, особенно в контексте логирования. Поддержка браузерами на достаточно хорошем уровне и позволяет вам легко логировать любую информацию без каких либо негативных последсвий для производительности и отзывчивости вашего UI. Non-blocking природа этих запросов играет в этом очень хорошую роль, это горазно быстрей альтернатив XHR и Fetch.

Теги: Добавить метки

Апрель 2018-го года. Мне было 14. Мы с друзьями играли в тогда очень популярную онлайн-викторину «Клевер» от ВКонтакте. Один из нас (обычно я) всегда был за ноутбуком, чтобы пытаться быстро гуглить вопросы и глазами искать в поисковой выдаче правильный ответ. Но вдруг я понял, что каждый раз выполняю одно и то же действие, и решил попробовать написать это на частично известном мне тогда Python 3.

Шаг 0. Что здесь происходит

Для начала я освежу в вашей памяти механику «Клевера».

Игра для всех начинается в одно и то же время - в 13:00 и в 20:00 по Москве. Чтобы сыграть, нужно в это время зайти в приложение и подключиться к прямой трансляции. Игра идет 15 минут, в течение которых участникам на телефон одновременно приходят вопросы. На ответ дается 10 секунд. Затем объявляется верный ответ. Все, кто угадали, проходят дальше. Всего вопросов 12, и если ответить на все – получишь денежный приз.

Получается, наша задача - мгновенно ловить новые вопросы от сервера Клевера, обрабатывать их через какой-либо поисковик, а по результатам выдачи определять правильный ответ. Вывод ответа было решено производить в телеграм-бота, чтобы уведомления из него всплывали на телефоне прямо во время игры. И все это желательно за пару секунд, ведь время на ответ сильно ограничено. Если вы хотите увидеть, как довольно простой, но рабочий код (а посмотреть на такой будет полезно новичкам) помогал нам обыгрывать Клевер – добро пожаловать под кат.