Share
Channels from Pusher est une plateforme qui vous permet de donner à vos applications des données en temps réel et transparentes..
Dans cet article, je vais vous montrer comment écrire les composants fonctionnels d'une application de chat très simple. C'est un exemple épuré, mais vous verrez comment les chaînes peuvent simplifier la mise en œuvre de la communication en temps réel dans une application Web..
Notre application serveur est un fichier PHP unique appelé messages.php qui gérera les requêtes POST provenant du navigateur. Notre gestionnaire de messages enverra les messages du client au service Channels, qui les diffusera ensuite à d'autres clients..
Lorsque vous utilisez PHP pour votre application serveur, vous souhaitez télécharger et utiliser la bibliothèque Channels. Vous pouvez installer cette bibliothèque à l'aide de composer et de la commande suivante:
compositeur nécessite pousseur / serveur pousseur-php
Le code pour messages.php est presque une copie exacte de ce que vous pouvez trouver sur la page Mise en route de votre tableau de bord Canaux. Il y a juste quelques modifications.
Tout d’abord, vous devez avoir besoin du autoload.php fichier à utiliser la bibliothèque Pusher:
require './… /vendor/autoload.php';
Ensuite, les données provenant du client sont au format JSON, nous voulons donc évidemment les décoder dans un tableau PHP exploitable..
Accentsconagua
$ data = json_decode (file_get_contents ('php: // input'), true);Nous voulons ensuite configurer notre objet Pusher pour pouvoir ensuite déclencher un événement.
$ options = array ('cluster' => 'us2'); $ pusher = new Pusher \ Pusher ('427017da1bd2036904f3', 'c46fabbaf65c4c31686b', '534815', $ options);Mon installation PHP ne fonctionne pas si le crypté L'option est activée, je l'ai donc omise de mon code. Votre kilométrage peut varier, mais il est important de noter que le crypté Cette option détermine si les données envoyées entre le serveur et Channels sont cryptées. Cela n’a rien à voir avec la connexion entre les canaux et vos clients - la bibliothèque cliente gère.
La dernière ligne du code de notre serveur envoie les données du message aux canaux:
$ pusher-> trigger ('anon-chat', 'send-message', $ data);Comme avec les autres bibliothèques de serveurs, nous passons trois choses à la déclencheur() méthode:
anon-chat envoyer le message $ data Notez que les noms de canal et d'événement sont différents des noms de canal et d'événement utilisés sur la page Mise en route. Vous n'avez pas besoin de créer de nouveaux canaux ni de définir des événements personnalisés dans le tableau de bord. il suffit d'utiliser les noms de canaux et d'événements que vous voulez dans votre code.
Notre client est une page Web avec trois composants Vue.js alimentant l'interface utilisateur. Le composant principal s'appelle ChannelsChat, et c’est là que nous mettrons notre Poussoir objet qui écoute envoyer le message événements dans le anon-chat canal. Utilisons le créé crochet.
created () let pusher = new Pusher ('427017da1bd2036904f3', cluster: 'us2', crypté: true); let channel = pusher.subscribe ('anon-chat'); channel.bind ('send-message', function () // à implémenter ultérieurement); Dans ce code, nous créons le Poussoir objet, abonnez-vous à la anon-chat canal, et écouter envoyer le message événements.
Comme il s’agit d’une application de discussion en ligne, nous devons stocker l’historique des messages afin que ceux qui l'utilisent puissent voir tous les messages reçus au cours de leur session. Pour ce faire, le moyen le plus simple consiste à stocker chaque message en tant qu'élément du tableau. Alors ajoutons un messages propriété data de ce composant, comme indiqué dans le code suivant:
data () return messages: []
Ensuite, lorsque nous recevons un message, nous allons simplement pousser() à notre tableau, comme indiqué dans le code suivant:
channel.bind ('send-message', (data) => this.messages.push (data.message));Nous passerons ensuite le messages au MessageView composant:
Le dernier de notre code appartient à la Message envoyé composant; lorsque l'utilisateur tape un message et clique sur le bouton Envoyer, nous devons envoyer ces données à messages.php.
Premièrement, assurons-nous que l'utilisateur a saisi quelque chose dans la zone de texte. Sinon, il n'y a rien à faire!
sendMessage (e) if (! this.message) return; // à suivre…
le message la propriété est liée à la La valeur de, nous allons donc l'utiliser pour déterminer si nous avons des données.
Ensuite, nous envoyons la demande POST à message.php, et les données sont un objet avec un message propriété.
// (suite) axios.post ('/ message.php', message: this.message). then (() => this.message = ";). catch ((err) => alert (err););Si la demande aboutit, nous effaçons le message la valeur de la propriété, qui efface à son tour la La valeur de (souvenez-vous qu'ils sont liés). Si la demande échoue, un message d'alerte indique à l'utilisateur qu'une erreur s'est produite..
Voilà pour le code. Alors ouvrez deux fenêtres de navigateur et pointez-les vers index.php. Commencez à envoyer des messages et vous devriez voir les deux fenêtres se mettre à jour automatiquement et les afficher.
Comme vous pouvez le constater, les canaux permettent d’ajouter rapidement une communication en temps réel à vos applications, ce qui est extrêmement simple et ne nécessite même pas beaucoup de code.!
Vous avez également appris que vous pouvez créer des chaînes et des événements à la volée lorsque vous écrivez votre code. Il n'y a pas besoin de les configurer avant de les utiliser.
Enfin, vous avez appris comment configurer vos applications pour intégrer la communication en temps réel. Il vous suffit de gérer les entrées utilisateur de votre serveur et de déclencher des événements en fonction de cette entrée..
