Se mettre en temps réel avec Pusher

Voulez-vous donner du piment à vos applications Web en les rendant en temps réel, mais ne voulez pas créer de nouvelles infrastructures dans le seul but de faire fonctionner les sockets Web? Dans cet article, nous verrons comment utiliser et mettre en œuvre Poussoir, un service de messagerie en temps réel basé sur HTML5 WebSocket pour vos applications.

introduction

Que sont les WebSockets?

Selon la page Wikipedia de WebSocket, WebSocket est une technologie fournissant des canaux de communication bidirectionnels, en duplex intégral, sur une seule connexion TCP..

En termes simples, WebSockets permet à un client et à un serveur de communiquer dans les deux sens. Il permet à un serveur d'envoyer des messages au client, et inversement.

En quoi cela concerne-t-il mon application Web??

Au fil des ans, l’expiration des données a toujours posé un problème avec les applications Web, en particulier celles ayant plusieurs utilisateurs connectés et travaillant sur les mêmes tâches. Par exemple, dans une application de gestion de projet, les utilisateurs créent parfois des tâches que leurs membres d'équipe créent simultanément. Avec WebSockets, cela peut être atténué en permettant au serveur de pousser notifications à toutes les parties connectées, permettant aux navigateurs de recevoir de nouvelles données en temps réel. En effet, avant de créer une tâche en double, vous verrez que quelqu'un d'autre l'a déjà créée..

Qu'est-ce que c'est Pusher?

Pusher est une API hébergée permettant d'ajouter rapidement, facilement et en toute sécurité des fonctionnalités évolutives en temps réel via WebSockets aux applications Web et mobiles..

Essentiellement, Pusher encapsule l'implémentation, les fonctionnalités, le débogage et l'hébergement de WebSockets pour vous..
Au lieu d'avoir à exécuter votre propre serveur WebSockets, il vous permet de décharger tout le processus sur les serveurs de Pusher, ce qui vous fait économiser du temps et de l'argent..

Pusher est une API hébergée permettant d'ajouter rapidement, facilement et en toute sécurité des fonctionnalités évolutives en temps réel via WebSockets aux applications Web et mobiles..

Pour que Pusher fonctionne, vous avez besoin à la fois d'une bibliothèque client et d'une bibliothèque éditeur. Les bibliothèques client sont utilisées avec le client qui s'interface avec votre application. Cela peut être un navigateur (via JavaScript), une application iPhone (via Objective-C) ou Flash (via ActionScript). Les bibliothèques d'éditeurs sont utilisées sur votre serveur pour envoyer des événements à vos clients..

Actuellement, Pusher possède des bibliothèques client pour JavaScript, Objective-C, ActionScript, .NET et Silverlight, Ruby et Arduino. Il possède des bibliothèques d'éditeurs pour Node.js, Java, Groovy, Grails, Clojure, Python, VB.NET, C #, PHP, Ruby, Perl et ColdFusion..

Pour les besoins de ce didacticiel, nous utiliserons la bibliothèque client JavaScript et la bibliothèque éditeur PHP. L'implémentation ne devrait pas être trop différente si vous utilisez un autre langage de programmation.

J'ai envie de construire un widget de chat en direct pour que les gens puissent discuter en temps réel sur un site Web. Dans cet esprit, continuons.

Mise en place du poussoir

Étape 1: Inscrivez-vous pour un compte de développeur Pusher gratuit

Pour commencer, allez sur le site Web de Pusher et enregistrez-vous pour votre compte. Ils offrent un compte gratuit pour les utilisateurs du plan Sandbox, qui comprend 20 connexions et 100 000 messages par jour. Lorsque vous êtes prêt, vous pouvez toujours passer à un plan payant, mais comme nous allons l'utiliser uniquement pour notre exemple d'application, un plan Sandbox gratuit fera l'affaire.!

Inscription pousseur

Sur le site, cliquez sur le bouton S'inscrire bouton que vous trouverez dans le coin supérieur droit et entrez les détails requis. Une fois cela fait, cliquez sur le bouton S'inscrire cliquez à nouveau pour terminer votre inscription.

Étape 2: Connectez-vous pour la première fois

Après votre inscription, vous serez redirigé vers votre Page d'administration pousseur. C'est ici que vous pouvez gérer toutes vos applications Pusher. Un seul compte peut héberger plusieurs applications.

Page d'administration du pousseur

En haut, vous avez votre barre de navigation, où vous trouverez les sections suivantes:

Tableau de bord - C’est ici que vous verrez les statistiques de votre application Pusher. Tu peux voir le Taux de message (nombre de messages envoyés par minute), Les liaisons (nombre de connexions ouvertes à un moment donné), et messages (nombre total de messages envoyés par votre application par jour).
modifier - Ici, vous pouvez renommer l'application actuelle et choisir d'utiliser ou non le cryptage SSL..
Accès API - cela contient votre application Informations d'identification de l'API, dont nous aurons besoin plus tard.
Déboguer - cela affichera tous les événements déclenchés et les messages envoyés par votre application Pusher, ainsi que lorsque les clients se connectent ou se déconnectent. Ceci est extrêmement utile lors du développement de votre application Web, car vous pouvez voir ici exactement ce que Pusher envoie et reçoit et qui est en ligne pour les recevoir..
Créateur d'événement - C'est un outil utile pour envoyer des événements de test à vos clients connectés, sans avoir à les déclencher vous-même à partir de votre application Web..

Vous êtes maintenant prêt à commencer à développer avec Pusher!

Développer avec Pusher

Étape 1: Créez le HTML, CSS, JavaScript et PHP

Commençons à développer notre widget de chat en direct en créant le code HTML. Ce que j'ai en tête, c'est un widget qui apparaîtra au bas de l'écran, avec un? Qui est en ligne? liste sur le côté, comme IRC.

      Prénom:    
    messages de chat vont ici 
 
  Qui est en ligne (0)
  les utilisateurs en ligne vont ici

Quelques CSS pour dénommer notre HTML:

 #chat_widget_container padding: 20px 20px 5px 20px; couleur de fond: # F2F2F2; bordure: 5px solide #AFAFAF; bordure inférieure: 0px; largeur: 333px; taille de police: 11px; font-family: "Lucida Grande", Arial, Helvetica, sans serif; position: fixe; en bas: 0px; right: 20px #chat_widget_login width: 333px; text-align: center; hauteur: 166px; margin-top: 80px #chat_widget_main_container display: none #chat_widget_messages_container float: left; largeur: 200px; bordure: 1px solide #DDD; hauteur: 200px; débordement: auto; rembourrage: 5px; couleur de fond: #FFF; position: relative #chat_widget_messages overflow-x: hidden; débordement-y: auto; position: absolue; bottom: 0px #chat_widget_online width: 100px; hauteur: 210px; float: gauche; remplissage: 0px 10px; bordure: 1px solide #DDD; bordure de gauche: 0px; couleur de fond: #FFF; débordement: auto; #chat_widget_online_list list-style: none; padding: 0px #chat_widget_online_list> li marge-gauche: 0px #chat_widget_input_container margin-top: 10px; text-align: left #chat_widget_input width: 260px; marge droite: 10px; bordure: 1px solide #DDD; padding: 2px 5px #chat_widget_loader display: none #chat_widget_login_loader display: none .clear clear: les deux

Les codes HTML et CSS combinés ci-dessus devraient donner un résultat similaire à:

Connexion démo

Nous aurons besoin de créer une fonction qui se déclenche lorsque nous cliquons sur le S'identifier bouton et vérifie la valeur entrée, alors faisons cela:

 $ ('# chat_widget_login_button'). click (function () $ (this) .hide (); // masque le bouton de connexion $ ('# chat_widget_login_loader'). show (); // affiche le gif du chargeur. Nom d'utilisateur = $ ('#chat_widget_username'). val (); // récupère le nom d'utilisateur username = username.replace (/ [^ a-z0-9] / gi, "); // filtre le si ((username ==") / / si vide, alerter l'alerte utilisateur ('Veuillez fournir un nom d'utilisateur valide (alphanumérique uniquement)'); autre // sinon, connectez-vous à notre utilisateur via start_session.php ajaxCall ('start_session.php', nomutilisateur: nomutilisateur , function () // Nous sommes connectés! Maintenant quoi?););

Ensuite, nous devons informer le serveur lorsque nous nous sommes connectés. Pour ce faire, nous allons créer un start_session.php fichier qui se connectera essentiellement à l'utilisateur.

  vrai)); sortie(); ?>

Vous remarquerez que j'ai créé un ajaxCall fonction, qui entoure la fonction jQuery $ .ajax. Ajoutez simplement ceci avant la ligne $ (document) .ready ().

 fonction ajaxCall (ajax_url, ajax_data, successCallback) $ .ajax (type: "POST", url: ajax_url, dataType: "json", données: ajax_data, heure: 10, succès: function (msg) if (msg.) succès) successCallback (msg); else alert (msg.errormsg); erreur: function (msg) );

Nous allons maintenant charger la bibliothèque JavaScript Pusher et jQuery. Placez les références de script suivantes dans le de votre HTML:

Étape 2: Prenez note de vos informations d'identification API

Se souvenir du Accès API page d'en haut? Retournez-y et notez vos informations d'identification API. Nous aurons besoin de ces valeurs lors de la configuration des bibliothèques client et éditeur..

Informations d'identification de l'API pousseur

N'hésitez pas à utiliser le mien, cependant, je vous recommande vivement de vous procurer le vôtre, car un compte gratuit est limité et vous risquez d'être coupé en cours de route..

Étape 3: Implémentez le code du pousseur

Avant de commencer à implémenter Pusher dans notre application, nous devons comprendre quelques termes de Pusher:

Canal - un moyen de différencier les flux de données au sein d'une application. Une application peut avoir plusieurs canaux et un canal peut avoir plusieurs clients. Nous pouvons comparer cela avec un forum de discussion dans IRC - tous les messages envoyés à un forum de discussion spécifique peuvent être vus par toutes les personnes qui se trouvent à l'intérieur..
Événements - Cela revient à ce que le serveur envoie des données au client afin que vous puissiez voir les messages dans la salle de discussion. Les événements sont déclenchés par la bibliothèque de l'éditeur et les clients peuvent s'abonner à ces événements. Dans notre analogie, s’abonner à un événement revient à écouter lorsque les gens discutent dans la salle et à prendre note de ce qu’ils disent..

Il existe trois types de canaux:

Chaînes publiques - chaînes auxquelles tout le monde peut s'abonner, pourvu qu'elles connaissent le nom de la chaîne.
Chaînes privées - canaux auxquels seuls les utilisateurs authentifiés peuvent s'abonner.
Canaux de présence - similaires aux canaux privés, mais nous permettent également de notifier les autres clients connectés avec des informations sur la connexion du client. Nous utiliserons ce canal dans notre widget de chat.

Les canaux de présence sont spéciaux car ils nous permettent d’envoyer des informations sur les utilisateurs lorsqu’ils se connectent. Ils ont également des événements spéciaux auxquels nous pouvons nous abonner afin de savoir quand un utilisateur se connecte et se déconnecte. Les canaux de présence sont parfaits pour les canaux privés sécurisés qui ont besoin de savoir quand un utilisateur entre ou sort..

Connexion au service de pousseur

Commençons par connecter notre client au service Pusher. Pour ce faire, nous devons créer une nouvelle instance de l’objet Pusher (à partir de la bibliothèque) et appeler le souscrire une fonction. Ajoutez le code suivant après le // Nous sommes connectés! Maintenant quoi? commentaire.

le Souscrire La fonction oblige essentiellement le client à rejoindre le canal. Une fois dans le canal, le client pourra recevoir les événements qui s'y passent..

 poussoir = nouveau poussoir ('12c4f4771a7f75100398'); // APP KEY Pusher.channel_auth_endpoint = 'pusher_auth.php'; // substitue le point de terminaison du canal nettuts_channel = pusher.subscribe ('presence-nettuts'); // rejoindre le canal presence-nettuts

Qu'est ce qu'un ?channel_auth_endpoint??

Lorsque vous vous abonnez à un présence ou privé canal, nous devons nous assurer que l’utilisateur se connectant est autorisé à accéder au canal. Par conséquent, avant de laisser le client s’y connecter entièrement, le client Pusher appelle automatiquement l’URL définie dans le message. channel_auth_endpoint variable et lui envoie des informations sur l'utilisateur qui se connecte. Puis à travers channel_auth_endpoint, nous pouvons déterminer si l'utilisateur qui se connecte est autorisé.

Par défaut, cet appel est fait pour / pusher / auth, mais nous pouvons le remplacer en définissant la channel_auth_endpoint variable.

Un unique socket_id est généré et envoyé au navigateur par Pusher. Quand on tente de s'abonner à un canal privé ou de présence la socket_id et nom du canal est envoyé à votre application, (1) via une demande AJAX POST qui autorise l'utilisateur à accéder au canal par rapport à votre système d'authentification existant. En cas de succès, votre application renvoie au navigateur une chaîne d'autorisation signée avec votre secret Pusher. Ceci est envoyé à Pusher sur le WebSocket, qui complète l'autorisation (2) si la chaîne d'autorisation correspond.

Pour revenir à notre application, nous devons créer notre channel_auth_endpoint. Créez un fichier, appelé pusher_auth.php et placez ceci à l'intérieur:

 hasAccessTo ($ channel_name) == false) header (", true, 403); echo (" Non autorisé "); exit (); * / $ pusher = new Pusher ('12c4f4771a7f75100398', // APP KEY '51399f661b4e0ff15af6 ', // APP SECRET' 8896 '// // ID APP); // Toutes les données que vous souhaitez envoyer sur la personne abonnée $ presence_data = array (' nomutilisateur '=> $ _SESSION [' nomutilisateur ']); echo $ pusher-> presence_auth ($ channel_name, // le nom du canal auquel l'utilisateur s'abonne auprès de $ socket_id, // l'identifiant de socket reçu de la bibliothèque du client pousseur $ _SESSION ['userid'], // un identifiant d'utilisateur unique identifiant l'utilisateur $ presence_data // les données relatives à la personne); exit ();?>

Maintenant que nous pouvons authentifier nos utilisateurs qui se connectent, nous devrons lier certaines fonctions JavaScript à des événements Pusher pour indiquer que nous sommes déjà connectés. Mettez à jour le code situé en dessous de // Nous sommes connectés! Maintenant quoi? commentaire, comme si:

 // Nous sommes connectés! Maintenant quoi? poussoir = nouveau poussoir ('12c4f4771a7f75100398'); // APP KEY Pusher.channel_auth_endpoint = 'pusher_auth.php'; // substitue le point de terminaison du canal nettuts_channel = pusher.subscribe ('presence-nettuts'); // rejoindre le canal de présence-nettuts pusher.connection.bind ('connected', function () // lie une fonction après la connexion à Pusher $ ('# chat_widget_login_loader'). hide (); // masque les loading gif $ ('# chat_widget_login_button'). show (); // affiche à nouveau le bouton de connexion $ ('# chat_widget_login'). hide (); // masque l'écran de connexion $ ('# chat_widget_main_container'). show () ; // affiche l'écran de discussion //, nous lions ici à l'événement pousseur: subscription_succeeded, appelé chaque fois que vous // souscrivez avec succès à un canal nettuts_channel.bind ('pusher: subscription_succeeded', fonction (membres) // this établit une liste de tous les clients en ligne et définit la liste en ligne html // met également à jour le nombre en ligne var whosonline_html = "; members.each (fonction (membre) whosonline_html + = ''+ membre.info.username +'
'; ); $ ('# chat_widget_online_list'). html (whosonline_html); updateOnlineCount (); ); // nous lions ici à l'événement pousseur: member_added, qui nous avertit lorsqu'un autre // est abonné avec succès au canal nettuts_channel.bind ('pusher: member_added', function (membre) // this ajoute le nom du nouveau client connecté à la liste en ligne // et met également à jour le nombre en ligne $ ('# chat_widget_online_list'). append (''+ membre.info.username +'
'); updateOnlineCount (); ); // ici, nous nous associons à l'événement pusher: member_removed, qui nous avertit à chaque fois que // quelqu'un se désabonne ou se déconnecte du canal nettuts_channel.bind ('pusher: member_removed', function (membre) // cela supprime le client de la liste en ligne. et met à jour le nombre en ligne $ ('# chat_widget_member_' + membre.id) .remove (); updateOnlineCount ();); );

N'oubliez pas d'ajouter le updateOnlineCount (); fonction au-dessus de la $ (document) .ready () ligne:

 function updateOnlineCount () $ ('# chat_widget_counter'). html ($ ('. chat_widget_member'). length);

Une explication de ce que nous venons d'ajouter

le pusher.connection.bind fonction nous permet de lier une fonction de rappel chaque fois que l’état de la connexion du pousseur change. Il existe de nombreux statuts possibles, tels que initialisé, en cours de connexion, indisponible, en échec et déconnecté. Nous ne les utiliserons pas dans ce tutoriel, mais vous pouvez en savoir plus à leur sujet dans la documentation de Pusher..

le nom_canal.bind function nous permet de lier une fonction à un événement spécifique susceptible de se produire dans le canal. Par défaut, les canaux de présence ont leurs propres événements auxquels nous pouvons lier des fonctions, comme le pusher: subscription_succeeded événement que nous avons utilisé ci-dessus. Vous pouvez en savoir plus à leur sujet dans la documentation relative aux événements de présence sur le client..

Testons maintenant l'application et voyons ce qui se passe. Pour ce faire, ouvrez deux onglets de votre application et connectez-vous deux fois. Vous devriez voir quelque chose comme ça:

Premier test

Lorsque vous fermez un onglet, le deuxième client se ferme également, ce qui déclenche notre poussoir: membre_removed événement et en supprimant le client de la liste en ligne:

Deuxième test

Maintenant que cela fonctionne, nous pouvons enfin implémenter la fonctionnalité principale de notre application - le chat en direct.

Implémentation de la fonctionnalité de chat en direct

Commençons par lier une fonction à l'événement submit de notre formulaire de discussion:

 $ ('# chat_widget_form'). submit (function () var chat_widget_input = $ ('# chat_widget_input'), chat_widget_button = $ ('# chat_widget_button'), chat_widget_loader = $ ('# chat_widget_loader'), message = chat_widget_input.val (); // récupère la valeur de l'entrée de texte chat_widget_button.hide (); // masque le bouton de chat chat_widget_loader.show (); // affiche le chargeur de chat gif ajaxCall ('send_message.php', message: message , function (msg) // lance un appel ajax à send_message.php chat_widget_input.val ("); // efface la saisie de texte chat_widget_loader.hide (); // masque le chargeur. gif chat_widget_button.show (); // montre le bouton de discussion newMessageCallback (msg.data); // affiche le message avec la fonction newMessageCallback); return false;);

le nouveauMessageCallback une fonction:

 function newMessageCallback (data) if (has_chat == false) // si l'utilisateur n'a pas encore de messages de discussion dans le div. $ ('# chat_widget_messages'). html ("); // supprime le contenu, par exemple 'chat les messages vont ici 'has_chat = true; // et le règlent pour qu'il ne rentre plus dans cette instruction if $ (' # chat_widget_messages '). append (data.message +'
');

Ensuite, nous devrons créer send_message.php pour recevoir notre appel AJAX d'en haut et déclencher la nouveau message un événement:

 <$_SESSION['username']> $ message "; // déclenche l'événement 'new_message' dans notre canal, 'presence-nettuts' $ pusher-> trigger ('presence-nettuts', // le canal 'new_message', // le tableau d'événements (' message '=> $ message) // les données à envoyer) // // écho le tableau de succès pour l'appel ajax echo json_encode (array (' message '=> $ message,' success '=> true)); exit () ;?>

Vous vous demandez probablement pourquoi nous avons extrait le nouveauMessageCallback dans sa propre fonction. Eh bien, nous devrons le rappeler quand nous recevrons un nouveau message événement de Pusher. Le code suivant lie une fonction à un événement, appelé nouveau message, qui se déclenche chaque fois qu'un utilisateur envoie un message. Ajoutez ce code après le nettuts_channel.bind ('pusher: member_removed') bloc de code:

 nettuts_channel.bind ('new_message', function (data) newMessageCallback (data););

le Les données variable dans la fonction de liaison ci-dessus sera les données que le serveur envoie dans le $ poussoir-> trigger () appel, qui doit contenir les données du message.

Essai

Essayons notre application à nouveau avec deux navigateurs, pas des onglets. (Ou essayez-le avec un ami si vous l'avez téléchargé quelque part.)

Salut l'ami!

Toutes nos félicitations! Vous avez créé avec succès une application qui fonctionne avec Pusher..

Conclusion

Là vous l'avez, un travail temps réél application alimentée par Pusher. N'hésitez pas à visiter la démonstration en direct que j'ai configurée ici.

Il y a beaucoup d'autres choses que je n'ai pas abordées dans ce didacticiel, telles que le débogage de vos applications, l'exclusion des destinataires d'événements et le déclenchement d'événements côté client, mais vous pouvez les apprendre simplement en lisant la documentation de Pusher. Vous pouvez même consulter leur catalogue de sites Web et d’applications utilisant Pusher pour fonctionner en temps réel..

Ce tutoriel ne fait qu'effleurer la surface du Pusher et des WebSockets en général. Avec ce type de technologie, ce que vous pouvez faire n’est limité que par ce que vous pouvez imaginer.

Avez-vous essayé de créer quelque chose avec Pusher ou prévoyez-vous le faire bientôt? Faites-moi savoir dans les commentaires!

Remarque: Pusher a demandé la réinitialisation des informations d'identification de l'API utilisées par le compte de démonstration de ce didacticiel par précaution pour éviter les abus. Je m'excuse auprès de vous les gars et j'espère que vous pourrez obtenir le vôtre :) Merci!

Code