Tout d'abord, définissons ce qu'est l'API VK et quelles capacités elle nous offre. API VKontakte - permet à un développeur d'interagir directement avec la base de données VKontakte à l'aide de requêtes http spéciales. En quoi cela peut-il être utile pour nous en tant que développeurs ? Grâce à l'API, nous pouvons récupérer le plus diverses informations sur les utilisateurs, les groupes, les publications sur le mur, les photos et bien plus encore. Bien sûr, le service présente certaines limites ; plus d'informations à ce sujet ci-dessous.

Je vous préviens tout de suite, l'article n'est pas destiné aux débutants et je n'expliquerai pas certains points, car l'article s'avérera très long. Avec ces articles, je veux juste montrer le principe de travail avec l'API VK et des exemples de code. Et bien sûr le code sera disponible sur github.

Informations de base

La première chose dont nous avons besoin pour créer notre application est d'aller sur https://vk.com/dev. Ensuite, nous allons à "Mes candidatures" et appuyez sur le bouton "Créer une application". VKontakte vous permet d'enregistrer 3 types d'applications, brève description chaque:

• Application autonome- c'est pour clients mobiles, programmes de bureau et sites sur lesquels l'interaction avec l'API s'effectuera à partir de Javascript.
• Site web- si vous souhaitez écrire un script pour un site internet qui utilisera l'API, indiquez cette option.
• Application IFrame/Flash- des jeux sur VKontakte, etc.

Nous écrivons le nom de l'application, sélectionnons le type « Site Web », dans l'adresse du site et le domaine de base, nous indiquons l'adresse réelle de votre site et de votre domaine. Si vous développez localement, vous pouvez spécifier http://localhost.

Création d'une application

Notre application a été créée, maintenant dans la section édition, allez dans « Paramètres ». Cette page contiendra les données dont nous avons besoin, à savoir identifiant, clé protégée Et clé de service. Tout cela est nécessaire pour l'autorisation de l'utilisateur. L'algorithme d'interaction avec l'API est très simple :

1. L'utilisateur autorise compte VK dans l'application.
2. Reçoit un jeton spécial.
3. Fait des requêtes à l'API.

Nous devons maintenant écrire le code qui nous permettra d'interagir avec l'API. Nous écrirons en PHP avec l'inclusion de quelques bibliothèques. Nous aurons besoin compositeur, si vous ne l’avez pas installé, vous pouvez le télécharger en suivant ce lien.

Dans le dossier du projet, créez un fichier composer.json et écrivez-y ce qui suit :

( "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" ) )

Nous enregistrons le fichier, ouvrons la console et allons dans le dossier avec notre projet, qui contient le fichier que nous avons créé. Exécutez la commande composer install.
Avec cette commande, nous avons installé le mini framework Slim, Bootstrap pour une mise en page rapide, un package pour travailler avec une base de données et un moteur de modèles.

Structure de la candidature

La structure est très simple et comprend plusieurs fichiers et dossiers.

• application— pour les paramètres de l'application, nous conserverons les routes, classes et autres fichiers de paramètres dans ce dossier.
• publique— le dossier principal contenant le fichier index.php et fichiers de style
• ressources- dossier pour les vues

Création de fichiers

public/index.php

courir();

Dans ce fichier, nous lançons uniquement notre application ; tous les réglages seront effectués dans d'autres fichiers. C'est notre point d'entrée.

app/app.php

inclure "../vendor/autoload.php" ; // Débogage $config = [ "settings" => [ "displayErrorDetails" => true, "LogLevel" => "debug", "vk" => [ "client_id" => "ID DE VOTRE APPLICATION", "client_secret" = > "LA CLÉ SECRET DE VOTRE APPLICATION", "redirect_uri" => "http://vk-tutor.com/authorize", "display" => "popup", "scope" => "friends,wall,offline ", " type_réponse" => "code" ] ], ]; $app = nouveau Slim\App($config); // DI pour la vue brindille $container = $app->getContainer(); $container["view"] = fonction ($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[ "routeur"], $basePath)); return $view); inclure "classes/VK.php" ; // Les routes nécessitent "routes.php" ;

Ne vous inquiétez pas, il n'y a rien de compliqué. Nous connectons simplement le chargeur, injectons la dépendance pour utiliser Twig et incluons le fichier avec les routes.

app/routes.php

get("/", function ($request, $response) ( $vk = new VK($this->get("settings")["vk"]); if (isset($_SESSION["vk"]) ) ( if (!isset($_SESSION["account"])) ( // Définir le jeton $vk->accessToken = $_SESSION["vk"]->access_token; // Obtenir des informations sur l'utilisateur actuel // Enregistrer toutes les informations de la session $_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) ( // Vérifiez s'il y a du code dans la barre d'adresse si ($request->getQueryParam("code") != NULL) ( $vk = new VK($this->get("settings")["vk"]); // Récupère le jeton $_SESSION["vk"] = $vk->getAccessToken($request->getQueryParam("code") ); ) return $response->withStatus(302)->withHeader("Location", "../" ));

Notre application est désormais complètement prête à être utilisée. Pour afficher la page, vous devez placer le modèle dans le répertoire resources/views. Nous pouvons commencer à écrire le code lui-même, ce qui nous permettra d'interagir avec l'API VKontakte. Puisque nous devrons faire Requête HTTP Concernant l'API, j'ai installé Guzzle. Il s'agit d'un client HTTP qui nous permettra d'effectuer très facilement des requêtes HTTP vers vkontakte.

Cours pour travailler avec l'API VK

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"];) fonction publique 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() ) 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());

renvoyer $données ;

) )

Compte

(% pour acc en compte %) (( acc.first_name )) (( acc.last_name )) Amis : (( acc.counters.friends ))

Les réseaux sociaux font déjà partie de notre quotidien et ont attiré des millions d'utilisateurs. Et de nouveaux domaines de créativité se sont ouverts pour notre frère flasher. En particulier, les applications Flash du projet de réseau VKontakte, pour lesquelles une API spéciale a été créée qui vous permet d'intégrer facilement l'application dans le système VKontakte.

Alors, que nous offre l'API VKontakte - voyons-le.

Revoir

Comme d’habitude, lisons tout d’abord ce que nos confrères écrivent à ce sujet.

Cependant, je n'ai trouvé aucun article intelligible, à l'exception des documents contenus dans VKontakte lui-même. Si quelqu'un a vu l'un de ces éléments, veuillez poster un lien dans les commentaires. Donc:

Capacités de l'API VKontakte

Essayons d'identifier les capacités des applications VKontakte en analysant les fonctions API.

Travailler avec les données utilisateur

L'application a accès aux données suivantes :

• L'utilisateur qui consulte l'application a-t-il installé cette application sur sa page ?
• Données pour tout utilisateur, en fonction de son identifiant :
  - Nom,
  - nom de famille,
  - pseudonyme,
  - sol,
  - date de naissance,
  - ville,
  - pays,
  - le fuseau horaire,
  - des URL de photos de petites, moyennes et grandes tailles,
  - Son numéro de téléphone portable est-il connu ?
  - notation
• Équilibre utilisateur sur le compte de l'application
• Accès aux données de l'utilisateur consultant l'application :
  - permettre que des notifications lui soient envoyées,
  - accès aux amis,
  - accès aux photos,
  - l'accès aux enregistrements audio,
  - l'accès aux offres,
  - accès aux questions,
  - l'accès aux pages wiki,
  - accès au menu de gauche,
  - publication sur les murs utilisateurs.
• Une liste des groupes dont l'utilisateur est membre, avec des informations générales sur chaque groupe.

Chaque utilisateur de VKontakte a des amis - d'autres utilisateurs de VKontakte. Données disponibles des amis de l'utilisateur :

• Liste des amis de l'utilisateur actuel.
• Liste des amis de l'utilisateur actuel qui ont déjà installé cette application.

L'application peut également effectuer les actions suivantes :

• Augmenter la note des utilisateurs au nom de l'application
• Si l'utilisateur a installé une application dans le menu de gauche, l'application peut définir un nom court pour l'application, ainsi qu'afficher un compteur à côté du nom de l'application - par exemple, un compteur de notifications.
• Définissez et lisez la barre d’état de l’application.

Travailler avec des photos d'utilisateurs

Un utilisateur de VKontakte peut créer de nombreux albums avec des photos dans la section « Mes photos ». L'API offre un large éventail d'options pour travailler avec des albums et des photos.

Les photos doivent être au format JPG, PNG ou GIF.

La candidature peut recevoir :

• Liste des albums photos avec des informations générales sur chaque album.
• Une liste de photos d'un album (ou directement par photo d'identité) avec un ensemble de liens vers des images de différentes tailles et qualités.

L'application peut effectuer les actions suivantes avec les albums et les photos :

• Créez un album (avec une description et un contrôle d'accès à celui-ci).
• Modifiez les données d'un album existant.
• Modifiez l'ordre de la liste des albums.
• Modifiez l'ordre des photos dans l'album.
• Transférez des photos d'un album à l'autre.
• Faites d'une photo la couverture d'un album.
• Téléchargez des photos sur le serveur VKontakte, sur le mur de l'utilisateur, sur la page de l'utilisateur.

Travailler avec les enregistrements audio des utilisateurs

L'utilisateur peut télécharger des enregistrements audio et les écouter dans la rubrique « Mes enregistrements audio ».

L'enregistrement audio doit être au format MP3, ne pas dépasser 10 Mo et ne pas violer le droit d'auteur.

L'API offre un large éventail d'options pour travailler avec des enregistrements audio :

• Recevez une liste des enregistrements audio d'un utilisateur ou d'un groupe avec des informations générales et détaillées sur chaque enregistrement.
• Recevez les paroles des chansons des enregistrements audio.
• Recherchez parmi les enregistrements audio.
• Téléchargez, supprimez, restaurez les enregistrements audio supprimés.
• Modifiez les données d'enregistrement audio.
• Ajoutez un enregistrement audio à une page d'utilisateur ou de groupe.
• Modifiez l'ordre des enregistrements audio.

Travailler avec des vidéos d'utilisateurs

L'API vous permet d'obtenir une liste d'enregistrements vidéo d'utilisateurs et de groupes avec des informations générales sur chaque enregistrement vidéo.

Mur de l'utilisateur

L'application peut afficher sur le mur de l'utilisateur une publication contenant du texte, ainsi qu'une image de l'album de l'utilisateur ou une image venant d'être téléchargée sur le serveur VKontakte.

L'API donne à l'application l'accès aux fonctions suivantes :

• Obtenez le solde de paiement (nombre de votes) de l'application.
• Obtenez le solde de paiement (nombre de votes) de l'utilisateur.
• Transférez les votes du compte d'application vers le compte utilisateur.
• Transférez les votes du compte de l'utilisateur vers le compte de l'application.
• Transférez les votes du compte d'un utilisateur vers le compte d'un autre utilisateur au sein de l'application.
• Afficher l'historique des transactions pour transférer les votes entre les utilisateurs et l'application

Travailler avec les SMS

L'application VKontakte peut utiliser des services aussi puissants que l'envoi et la réception de SMS :

• Envoi d'une notification par SMS. Dans ce cas, 0,1 vote est déduit du compte de candidature.
• Afficher une liste des messages SMS reçus des utilisateurs par l'application.
• Consultez l'historique des notifications SMS envoyées par l'application.

L'envoi d'un message SMS est gratuit (le coût d'un message SMS classique). L'envoi s'effectue au téléphone +7 921 000 00 07, et pour que l'application reçoive son message, l'API offre la possibilité de paramétrer l'application un préfixe, que l'utilisateur doit préciser au début de son message SMS.

Travailler avec le service "Offres"

Grâce au service « Offres », l'utilisateur a la possibilité de créer sa propre offre unique. Cette offre pourra être vue par tous les utilisateurs de VKontakte - ce service est indépendant de la page personnelle. Toute phrase commence par les mots « Voudriez-vous », suivi du texte lui-même, et à la fin il y a un point d'interrogation. Les utilisateurs peuvent consulter les offres d'autres utilisateurs, accepter l'offre de quelqu'un d'autre en cliquant sur l'option « Oui, bien sûr » ou refuser en cliquant sur l'option « Non ».

Ainsi, les fonctions pour travailler avec des offres :

• Modifiez, partagez et fermez une suggestion de l'utilisateur qui consulte l'application.
• Parcourez et recherchez les suggestions des utilisateurs.
• Acceptez et rejetez les suggestions des utilisateurs.
• Afficher les réponses à la suggestion d'un utilisateur.
• Recevez une liste de réponses aux propositions acceptées par l'utilisateur.
• Supprimer et marquer les réponses des utilisateurs comme lues.

Travailler avec le service Questions

Un service similaire au précédent, qui permet de poser des questions et de recevoir des réponses des autres utilisateurs. L'API dispose également de tout ce dont vous avez besoin pour gérer ce service depuis les applications.

Travailler avec des pages Wiki

Les utilisateurs disposent d'un système d'édition de pages qui permet aux membres du groupe de collaborer à la création d'un nombre infini de pages avec références croisées. Ainsi, les utilisateurs peuvent créer des bibliothèques ou des mini-encyclopédies en groupes. De plus, les utilisateurs peuvent utiliser un balisage wiki spécial pour concevoir des pages.

Les applications ont la possibilité de travailler avec des pages Wiki :

• Recevez du texte et des informations complètes sur la page wiki.
• Modifiez et enregistrez le texte et les paramètres d'une page wiki.
• Obtenez une liste des pages wiki d'un groupe.
• Traduisez le balisage wiki en balisage html.

Organisation du chat

L'API vous permet de créer un chat dans l'application à l'aide d'une file d'attente de messages - 127 messages. À cet effet, des fonctions sont fournies pour ajouter un message à une file d'attente et afficher l'intégralité de la file d'attente des messages.

Sauvegarde des enregistrements de jeu

L'API fournit des fonctions spéciales pour enregistrer les résultats de jeu de l'utilisateur et obtenir une liste de résultats.

Travailler avec des variables

Pour stocker les données, l'API fournit à chaque application 4096 variables uniques de 255 octets.

De plus, les variables sont réparties sur les plages suivantes :

• Variables globales : peuvent être utilisées pour les données communes à toutes les instances d'une application donnée, par exemple un tableau des meilleurs scores pour une application de jeu.
• Variables utilisateur : Ces variables sont propres à chaque utilisateur d'une application donnée et peuvent servir, par exemple, à sauvegarder la partie de l'utilisateur.
  Environ la moitié des variables sont partagées avec d'autres utilisateurs. Certaines variables sont réservées à des besoins différents.
• Variables de session : lorsque vous travaillez avec des variables, vous pouvez spécifier un identifiant de session (session ou salle) dans la requête. De cette façon, les variables de cette plage seront communes à tous les utilisateurs qui consultent actuellement l'application. Ainsi, les applications peuvent effectuer une communication multi-utilisateurs en temps réel - chats, jeux multijoueurs, etc.
• Les variables contenant des données temporaires propres à l'application actuellement affichée disparaîtront à la fermeture de l'application.

Cependant, le nombre de variables n'est pas important - seulement 1 024 variables par plage, et cela n'inclut pas les variables réservées.

Travailler avec un serveur de développement distant

L'application VKontakte est une application Flash classique et présente un gros inconvénient. Il ne peut pas être considéré comme à l’épreuve du piratage. Plus précisément, les coûts du piratage d'une application Flash ne sont pas aussi élevés que, par exemple, le piratage d'un serveur. Il existe un nombre suffisant de programmes de décompilation SWF avec lesquels vous pouvez facilement obtenir le code source, connaître la logique de l'application et manipuler les requêtes API.

Par conséquent, certaines fonctions répertoriées ci-dessus fonctionnent uniquement à partir du serveur distant du développeur, en contournant l’application flash, à savoir :

• Travailler avec les évaluations des utilisateurs
• Affichage d'un bref statut de l'utilisateur dans l'application sur sa page principale
• Envoi de notifications utilisateur (uniquement aux utilisateurs ayant installé cette application)
• Travailler avec les votes (transactions de paiement)
• Installer un compteur sur une application et utiliser la barre d'état de l'application
• Envoi et visualisation de notifications SMS

Ainsi, pour pouvoir effectuer ces opérations, l'application ne doit pas accéder directement à l'API, mais solliciter son serveur de couche spécialement conçu, qui à son tour communiquera avec l'API VKontakte et fournira à l'application les données reçues.

En général, bien sûr, pour les grands projets travaillant au format d'application VKontakte, ce serveur spécial devrait bien sûr être le « cerveau » qui traite toute la logique de l'application. L'application Flash dans ce cas n'est qu'un « client léger » qui n'affiche que magnifiquement le résultat du travail du serveur.

Localisation d'applications

Les développeurs d'applications ont la possibilité de traduire leurs applications dans plus de 50 langues à l'aide de la plateforme de traduction VKontakte. Pour le moment, la plateforme est en phase de test et n'est applicable qu'aux applications comptant un grand nombre d'utilisateurs.

Utilisation du conteneur d'application Flash

Une autre façon d'intégrer une application Flash dans une page VKontakte consiste à utiliser un conteneur Flash.

Le conteneur Flash offre les fonctionnalités suivantes pour l'application :

Caractéristiques de l'API VKontakte

Nous nous sommes donc familiarisés avec toutes les possibilités offertes par l'API VKontakte. Je voudrais souligner les fonctionnalités (ou plutôt les inconvénients) de l'API que j'ai rencontrées :

Conclusion

Les applications VKontakte Flash disposent d'une API assez puissante qui résout les problèmes de base et peut pleinement prendre en charge des projets de complexité moyenne. Tous les autres besoins peuvent être résolus par le développeur à l'aide de son serveur Web.

On me demande souvent comment travailler avec l'API. Le problème le plus courant lié à API, est - travailler avec l'API VKontakte. Dans cet article, je vais montrer comment travailler avec l'API VKontakte, et surtout, je vais vous montrer que toutes les API fonctionnent sur le même principe.

Ici procédure ce que vous devez faire pour commencez à travailler avec n'importe quelle API:

1. Trouver documentation au besoin API.
2. Regarder Exemples de connexion API. Il peut y avoir différentes options ici. Par exemple, un service nécessitera une clé secrète délivrée après l'enregistrement. Sur le deuxième service, toutes les requêtes ne nécessitent pas de clés secrètes. Sur le troisième service, il existe des options pour travailler avec et sans clé secrète. Parfois, la clé secrète est appelée jeton.
3. Copie code simple prêt à l'emploi depuis le site de documentation et vérifier son fonctionnement. Si cela ne fonctionne pas, recherchez vous-même l'erreur, car il est peu probable que le service en ait une.
4. Trouver dans les documents méthode, ce qui résout votre problème.
5. À l'aide d'exemples et d'une description de la méthode, envoyer la bonne requête à l'API.
6. En fonction du format de la réponse, analysez-la en " composants", puis faites ce qui est requis : affichez-le à l'utilisateur, enregistrez-le dans un fichier, envoyez-le à la base de données, etc.

Et à titre d'exemple pour suivre ces instructions, nous examinerons API VKontakte. Donc:

1. Lien vers documentation.
2. DANS dans ce cas Certaines méthodes sont publiques et ne nécessitent donc pas de jeton, et d'autres en nécessitent un.
3. Dans ce cas, je n'ai trouvé aucun exemple dans une langue spécifique. Peut-être qu’ils sont là, mais clairement pas à la vue. Habituellement, à API Il existe des exemples pour chaque méthode dans différentes langues.
4. Nous voulons nous retirer 5 derniers messages du mur d'un utilisateur spécifique, puis affichez-les sur votre site Web. La méthode dont nous avons besoin.

Maintenant, nous devons envoyer une requête à l'API en utilisant la description de la méthode. Nous le ferons à travers PHP:

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

Dans ce cas, j'utilise API 5.3 (v = 5,3), j'affiche toutes les entrées quel que soit l'auteur ( filtre = autres) depuis votre page ( domaine = myrusakov) en quantité 5 des choses ( compte = 5). Je pense que tout est très transparent ici.

Nous avons reçu une réponse au format JSON, et maintenant nous devons passer au dernier point : analyser la réponse à " composants". Ensuite, nous afficherons les messages du mur sous une forme plus ou moins lisible sur la page de notre site Web. Le résultat Code PHP:

$wall = file_get_contents("http://api.vk.com/method/wall.get?v=5.3&filter=others&domain=myrusakov&count=5"); // Envoie la demande
$mur = json_decode($mur); // Convertit la chaîne JSON en tableau
$mur = $mur->réponse->éléments ; // Récupère un tableau de commentaires
pour ($i = 0; $i< count($wall); $i++) {
écho "

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

"; // Afficher les enregistrements
}
?>

Comme vous pouvez le constater, tout est très simple. Le plus dur c'est de le démonter éléments constitutifs. Je préfère afficher le résultat de APIà travers print_r, et ensuite seulement écrire le traitement de ceci. Bien que vous puissiez consulter un exemple de réponse dans la description de la méthode, puis écrire un analyseur.

• Traduction
• Tutoriel

L'API Beacon est une interface basée sur JavaScript pour :

envoyer une petite quantité de données au serveur depuis le navigateur, sans attendre de réponse. Dans cet article, nous verrons quand l'API Beacon est utile, en quoi elle diffère de l'utilisation de XMLHTTPRequest (Ajax) aux mêmes fins et comment l'utiliser.

Pourquoi avons-nous besoin d’une autre API ?

L'API Beacon est utilisée pour envoyer de petites données au serveur sans attendre de réponse. Dernière partie la déclaration est la plus intéressante. L'API Beacon est spécialement conçue pour que vous puissiez envoyer des données et les oublier. Il n’est pas nécessaire d’attendre une réponse, car il n’y en aura pas.

Métaphore avec les cartes postales, ce sont des cartes que les gens s'envoient/s'envoient. En règle générale, ils écrivaient un petit texte dessus (« Où es-tu ? Et je suis au bord de la mer mdr. », « Il fait super ici, pas comme dans ton bureau »), le jetaient par la poste et oubliaient. . Personne ne s’attendait à une réponse du type « Je suis déjà parti pour toi », « C’est merveilleux dans mon bureau ».

Il existe de nombreux cas où une approche « envoyer et oublier » serait appropriée.

Suivi des statistiques et informations analytiques

C'est la première chose qui me vient à l'esprit. Tel grandes solutions Comment Google Analytics peut fournir bonne critique pour les choses de base. Mais que se passe-t-il si nous voulons quelque chose de plus personnalisé ? Nous devons écrire du code pour suivre ce qui se passe sur la page (comment les utilisateurs interagissent avec les composants, jusqu'où ils défilent, quelles pages ont été affichées avant la première vente), puis envoyer ces données au serveur lorsque l'utilisateur quitte la page. Beacon est idéal pour cette tâche puisque nous envoyons simplement des données et n'avons pas besoin d'une réponse du serveur.

Débogage et journalisation

Une autre application enregistre les informations de Code JavaScript. Imaginez une situation où vous avez super application avec une UI/UX riche. Tous les tests sont verts, mais en production, une erreur apparaît périodiquement dont vous avez connaissance, mais vous ne pouvez pas la déboguer en raison d'un manque d'informations. Dans ce cas, vous pouvez utiliser Beacon pour le diagnostic.

En fait, tout problème de journalisation peut être résolu à l’aide de Beacon. Il peut s'agir de créer des points de sauvegarde dans les jeux, de collecter des informations sur l'utilisation de nouvelles fonctionnalités, d'enregistrer les résultats des tests, etc. Si quelque chose se produit dans le navigateur et que vous souhaitez que le serveur le sache, Beacon est ce dont vous avez besoin.

Ne l'avons-nous pas déjà fait ?

Je sais à quoi tu penses. Rien de tout cela n’est nouveau ? Nous communiquons avec le Nord via XMLHTTPRequest depuis plus de 10 ans. Nous avons récemment commencé à utiliser l'API Fetch, qui fait essentiellement la même chose, juste avec une nouvelle interface Promise. Alors pourquoi avons-nous besoin d’une autre API Beacon ?

La principale caractéristique est que nous n'avons pas besoin d'une réponse du serveur. Le navigateur peut mettre la demande en file d'attente et envoyer les données sans bloquer l'exécution d'aucun code. Étant donné que le navigateur est impliqué dans cela, peu importe que le code soit toujours en cours d'exécution ou non, le navigateur s'enverra simplement des requêtes en arrière-plan.

Avec l'API Beacon, pas besoin d'attendre meilleur moment pour CPU, réseau. Le simple fait d’ajouter une requête à la file d’attente à l’aide d’une balise ne coûte presque rien.

Pour comprendre pourquoi cela est important, il suffit de regarder comment et où une telle logique est généralement utilisée. Par exemple, afin de mesurer la durée pendant laquelle l'utilisateur reste sur la page, nous devons envoyer une requête au serveur le plus près possible de la fin de la session.

Cela se fait généralement au déchargement ou avant le déchargement . Code similaire peut bloquer l'exécution et s'il y a un retard dans le déchargement d'une page, alors le chargement de la page suivante est également retardé. Cela se traduit par une UX moins que stellaire.

Comprenez-vous à quel point les requêtes HTTP sont lentes ? Et la dernière chose que vous voulez, c'est entasser une requête HTTP entre les transitions.

Essayer l'API Beacon

L'exemple d'utilisation de base est très simple :

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

Utilisation de navigator.sendBeacon()

navigator.sendBeacon prend deux paramètres. Le premier est l'URL à laquelle la demande sera envoyée, le second concerne les données qui doivent être envoyées. La requête se présente sous la forme d'un HTTP POST.

data - ce paramètre peut accepter plusieurs formats de données, avec lesquels l'API Fetch fonctionne tous. Il peut s'agir de Blob, BufferSource, FormData ou URLSearchParams, etc.

J'aime utiliser FormData pour des données clé-valeur simples, ce n'est pas compliqué et facile à utiliser.

// URL où envoyer les données let url = "/api/my-endpoint"; // Crée un nouveau FormData let data = new FormData(); data.append("bonjour", "monde"); let result = navigator.sendBeacon(url, data); if (résultat) ( console.log("Ajouté à la file d'attente!"); ) else ( console.log("Erreur."); )

Prise en charge du navigateur

Le support de cette API est assez solide. Le seul navigateur qui ne prend pas en charge cela est Internet Explorer(Je ne m'attendais pas à cela) et Opera Mini. Mais tout fonctionne dans Edge. Dans la plupart des cas, il existe une assistance, mais il est préférable de vérifier au cas où :

if (navigator.sendBeacon) ( // Code de balise ) else ( // Utiliser XHR ? )

Exemple : enregistrer le temps passé sur la page

Afin de voir tout cela en pratique, créons système simple compter le temps pendant lequel l'utilisateur est sur la page. Lorsque la page se charge, nous regardons l'heure et lorsqu'elle quitte, nous envoyons une demande à partir de l'heure de début de visualisation et de l'heure actuelle au serveur.

Puisque nous ne nous intéressons qu'au temps passé sur la page et non au temps réel, nous pouvons utiliser performance.now() pour obtenir l'horodatage de base lors du chargement de la page :

laissez startTime = performance.now();

Enveloppons un petit morceau de logique dans une fonction facile à utiliser :

let logVisit = function() ( // Test que nous avons un support if (!navigator.sendBeacon) return true; // URL à laquelle envoyer les données, par exemple let url = "/api/log-visit"; // Données à send let data = new FormData(); data.append("start", startTime); data.append("end", performance.now()); ! navigator.sendBeacon(url, données);

Et enfin, nous devons appeler cette fonction lorsque l'utilisateur quitte la page. Ma première pensée a été d'utiliser unload , mais Safari sur Mac semble bloquer la demande pour des raisons de sécurité. Par conséquent, il est préférable d’utiliser beforeunload :

window.addEventListener("beforeunload", logVisit);

Au chargement de la page (ou avant), notre fonction logVisit() sera appelée et, si le navigateur prend en charge l'API Beacon, enverra une requête au serveur.

Quelques points

Parce que la plupart Les problèmes que l’API Beacon va permettre de résoudre tournent autour du suivi d’activité, il sera important de noter la partie sociale et juridique de toute cette cuisine.

RGPD

Souviens-toi juste de lui.

DNT : NE PAS SUIVRE

De plus, les navigateurs disposent d'une option qui permet aux utilisateurs d'indiquer qu'ils ne souhaitent pas que leur activité soit suivie. Do Not Track envoie un en-tête HTTP qui ressemble à ceci :

DN : 1

Si vous suivez des données pouvant indiquer un utilisateur et qu'il y a DNT : 1 dans les en-têtes de requête, il est alors préférable d'écouter l'utilisateur et de ne sauvegarder aucune donnée. Par exemple, en utilisant PHP, vous pouvez vérifier cela comme suit :

if (!empty($_SERVER["HTTP_DNT"])) ( // Je ne veux pas, je n'ai pas besoin )

En conclusion

L'API Beacon est vraiment très moyen pratique pour envoyer des données au serveur, notamment dans le cadre de la logging. La prise en charge du navigateur est suffisante bon niveau et vous permet d'enregistrer facilement n'importe quelle information sans aucune conséquence négative sur les performances et la réactivité de votre interface utilisateur. Le caractère non bloquant de ces requêtes y joue un très bon rôle, elles sont bien plus rapides que les alternatives XHR et Fetch.

Balises : Ajouter des balises

Avril 2018. J'avais 14 ans. Mes amis et moi avons joué au quiz en ligne alors très populaire « Clover » de VKontakte. L'un de nous (généralement moi) était toujours devant l'ordinateur portable pour essayer de rechercher rapidement des questions sur Google et de rechercher avec nos yeux. résultats de recherche bonne réponse. Mais soudain, j'ai réalisé que j'effectuais la même action à chaque fois, et j'ai décidé d'essayer de l'écrire en Python 3, que je connaissais partiellement à l'époque.

Étape 0. Que se passe-t-il ici

Tout d’abord, je vais vous rafraîchir la mémoire sur la mécanique de Clover.

Le jeu commence en même temps pour tout le monde - à 13h00 et 20h00, heure de Moscou. Pour jouer, vous devez vous rendre sur l'application à ce moment-là et vous connecter à la diffusion en direct. Le jeu est lancé 15 minutes, pendant lesquelles les participants recevront un appel téléphonique simultanément les questions arrivent. La réponse est donnée 10 secondes. Ensuite, la bonne réponse est annoncée. Tous ceux qui ont bien deviné passent à autre chose. Il y a 12 questions au total, et si vous répondez à toutes, vous recevrez un prix en espèces.

Il s'avère que notre tâche consiste à détecter instantanément les nouvelles questions du serveur Clover, à les traiter via un moteur de recherche et à déterminer la bonne réponse en fonction des résultats. Il a été décidé d'afficher la réponse dans un robot télégramme afin que les notifications de celui-ci apparaissent sur le téléphone pendant le jeu. Et tout cela est souhaitable en quelques secondes, car le temps de réponse est très limité. Si vous voulez voir comment un code assez simple mais fonctionnel (et il sera utile aux débutants de le regarder) nous a aidé à battre Clover, bienvenue chez le chat.