Share
Channels from Pusher est une plateforme qui facilite l’ajout de données en temps réel et transparentes dans vos applications. Dans cette vidéo, je vais vous montrer comment commencer à coder la communication en temps réel entre les applications client et serveur avec JavaScript et les chaînes de Pusher..
La première chose à faire est de créer un compte sur https://www.pusher.com. Clique le S'inscrire bouton, et choisissez comment vous voulez vous connecter à votre compte. Vous pouvez utiliser votre compte GitHub ou Google, ou vous pouvez utiliser une adresse e-mail et un mot de passe. Allez-y et connectez-vous après avoir créé votre compte.
La première fois que vous vous connectez, vous serez invité à créer une nouvelle application Channels. Channels donnera un nom par défaut à votre application, mais il est plus logique de lui attribuer un nom similaire à celui de votre application. Parce que nous allons écrire une application console Node.js, je vais appeler mon application application console-noeud. Notez que la convention de nommage consiste à utiliser des tirets à la place d'espaces.
Ensuite, vous devez choisir votre cluster et choisir celui qui est le plus proche de votre serveur car les clients peuvent être situés n'importe où dans le monde. Pour moi, c'est un affrontement entre l'Ohio et la Virginie du Nord. J'ai choisi Ohio parce que c'était sélectionné par défaut.
Vous devez ensuite choisir les technologies que vous utiliserez pour écrire votre application. J'ai choisi Node.js, mais n'hésitez pas à utiliser les technologies de votre choix.
Après avoir cliqué sur le Créer mon application bouton, vous verrez le Commencer page. Cette page est un client et remarquez que l'état de la connexion est connecté. Si on regarde le Vue d'ensemble page, nous voyons qu'il y a un client. C’est ce client de démonstration sur la page Mise en route.
Au bas de la page de présentation, vous trouverez l'id de l'application, la clé, la clé secrète et le cluster. Ce sont les informations dont vous avez besoin pour vous connecter à votre application Channels à partir de vos applications client et serveur..
Dans un nouveau répertoire, créez un package.json fichier avec la commande suivante:
npm init --oui
Vous voudrez alors installer le paquet Pusher.
npm install pusher --save
Ensuite, créez un fichier appelé server.js-c'est notre dossier de candidature. Entrez le code suivant:
Accentsconagua
'use strict'; const Pusher = require ('pousseur'); var pousseur = nouveau poussoir (appId: '530620', clé: 'b534d4fac76717b9872e', secret: 'f84f62e45f82cc09b8c8', cluster: 'us2', crypté: true);Ce code crée un Poussoir objet en passant un objet qui possède des propriétés pour l'ID d'application, la clé, la clé secrète et le cluster au constructeur - en gros toutes les informations que nous venons de voir dans la vue d'ensemblela page va être ici. Il y a aussi une autre propriété appelée crypté qui spécifie que Pusher doit chiffrer la communication entre notre application serveur et le service Channels.
Notre application serveur simple acceptera les entrées de l'utilisateur en nous permettant de taper dans la fenêtre de la console. Nous allons saisir cette entrée, puis déclencher un événement de messagerie. Ce code ressemble à ceci:
process.stdin.on ('data', (chunk) => const str = chunk.toString (). trim (); if (str === 'exit') process.exit (0); poussoir. trigger ('mon-canal', 'mon-événement', message: str);); console.log ('Tapez un message…');Dans ce code, nous utilisons le flux d'entrée standard et écoutons l'événement de données. Les données que nous recevons sont des données brutes. Nous les convertissons ensuite en chaîne et réduisons les espaces. Nous vérifions ensuite si l'utilisateur a tapé le mot "exit" et, le cas échéant, nous quittons le programme..
Nous utilisons ensuite le Poussoir objets déclencheur() méthode pour déclencher la mon-événement événement dans le ma Chaîne canal. Donc, le déclenchement d'un événement implique les trois informations suivantes dans l'ordre:
Il est important de noter que le nom de la chaîne n'est pas le nom de l'application Channels. C'est plutôt un nom arbitraire qui, espérons-le, a une signification pour notre application. Nous avons utilisé le défaut, ma Chaîne, parce que c'est ce que le client de démonstration sur leLa page de démarrage est souscrite. Les clients abonnés à ce canal peuvent alors écouter les événements qui se produisent dans le réseau. ma Chaîne canal. Dans ce cas, ils devront écouter le message mon-événement événement, parce que c'est ce que nous déclenchons lorsque nous entrons quelque chose dans la console de l'application Node.js.
Le contenu du message peut être un objet de n'importe quelle forme. Encore une fois, ce code définit une propriété de message car c’est ce que recherche le client Getting Started..
Nous avons terminé notre code d'application en envoyant un message indiquant à l'utilisateur que l'application est prête..
Vous pouvez immédiatement tester votre application serveur car nous avons déjà un client: la page Mise en route. Vous pouvez exécuter le serveur avec la commande suivante:
noeud serveur.js
Les messages que vous tapez dans l'application console doivent s'afficher dans une zone d'alerte de la page Mise en route. N'hésitez pas à jouer avec cela avant de passer à l'écriture de l'application client dans la section suivante.
Initialisez le projet client dans un autre répertoire avec la commande suivante:
npm init --oui
Ensuite, installez la bibliothèque client Pusher avec la commande suivante:
npm installer pusher-js --save
Créez un fichier appelé client.js et tapez le code suivant:
'use strict'; const Pusher = require ('pousseur-js'); let Pusher = new Pusher ('b534d4fac76717b9872e', cluster: 'us2', crypté: true); let channel = pusher.subscribe ('my-channel'); channel.bind ('my-event', (data) => console.log (data.message);); console.log ('Écoute de messages…');Ce code crée un client Poussoir objet. Notez que l'objet client nécessite moins d'informations que le serveur-n'incluez pas la clé secrète ni l'identifiant de l'application dans votre code client! Dans notre exemple, nous nous abonnons ensuite à la ma Chaîne canal en utilisant le Poussoir objets souscrire() méthode. Cela vous permet d'écouter n'importe quel événement de ce canal..
L'abonnement à un canal vous donne un objet canal que vous pouvez ensuite utiliser pour écouter les événements qui se produisent dans ce canal. Dans ce code, nous avons utilisé lier() méthode pour lier un écouteur à la mon-événement un événement. Chaque fois que le client gère le mon-événement événement, il utilise console.log () écrire le message à l'écran.
Allez-y et exécutez le client dans une fenêtre de console distincte afin de pouvoir exécuter le client et le serveur simultanément. La commande pour exécuter l'application est:
noeud client.js
Tapez des messages dans l'application serveur et vous devriez voir le client les recevoir et les sortir..
Channels est une plate-forme fantastique qui vous permet d’ajouter une communication en temps réel à vos applications. Comme vous pouvez le constater à partir des deux applications que nous avons écrites dans cette vidéo, vous pouvez ajouter toute la puissance de la communication en temps réel à l’aide de chaînes et de canaux. leurs bibliothèques.
