Share
Aujourd'hui, nous allons explorer le concept de radiodiffusion dans le cadre Web de Laravel. Il vous permet d’envoyer des notifications côté client lorsque quelque chose se passe côté serveur. Dans cet article, nous allons utiliser la bibliothèque tierce Pusher pour envoyer des notifications au côté client..
Si vous avez toujours voulu envoyer des notifications du serveur au client quand quelque chose se passe sur un serveur de Laravel, vous recherchez la fonctionnalité de diffusion..
Par exemple, supposons que vous ayez mis en place une application de messagerie permettant aux utilisateurs de votre système de s'échanger des messages. Désormais, lorsque l'utilisateur A envoie un message à l'utilisateur B, vous souhaitez le notifier à l'utilisateur B en temps réel. Vous pouvez afficher une fenêtre contextuelle ou une boîte d’alerte informant l’utilisateur B du nouveau message.!
C'est le cas d'utilisation idéal pour explorer le concept de radiodiffusion à Laravel, et c'est ce que nous allons mettre en œuvre dans cet article..
Si vous vous demandez comment le serveur pourrait envoyer des notifications au client, il utilise des sockets sous le capot pour le faire. Comprenons le flux de base des sockets avant de plonger plus profondément dans la mise en œuvre réelle.
Ne vous inquiétez pas si cela semble trop d'un coup; vous comprendrez tout au long de cet article.
Ensuite, regardons le fichier de configuration de diffusion par défaut à config / broadcast.php.
Accentsconagua
env ('BROADCAST_DRIVER', 'log'), / * | ---------------------------------------- -------------------------------------- | Connexions de diffusion | --------------------------------------------------- --------------------------- | | Ici, vous pouvez définir toutes les connexions de diffusion qui seront utilisées | pour diffuser des événements vers d'autres systèmes ou via des prises Web. Échantillons de | chaque type de connexion disponible est fourni à l'intérieur de ce tableau. | * / 'connexions' => ['poussoir' => ['driver' => 'poussoir', 'clé' => env ('PUSHER_APP_KEY'), 'secret' => env ('PUSHER_APP_SECRET'), 'app_id' => env ('PUSHER_APP_ID'),], 'redis' => ['driver' => 'redis', 'connection' => 'default',], 'log' => ['driver' => 'log ',],' null '=> [' driver '=>' null ',],],];Par défaut, Laravel prend en charge plusieurs adaptateurs de diffusion dans le cœur même..
Dans cet article, nous allons utiliser le Poussoir adaptateur de diffusion. À des fins de débogage, vous pouvez également utiliser l'adaptateur de journal. Bien sûr, si vous utilisez le bûche adaptateur, le client ne recevra aucune notification d'événement, et il ne sera consigné que sur le laravel.log fichier.
A partir de la section suivante, nous allons tout de suite plonger dans la mise en œuvre réelle du cas d'utilisation susmentionné..
En radiodiffusion, il existe différents types de chaînes: publique, privée et de présence. Lorsque vous souhaitez diffuser vos événements en public, c'est la chaîne publique que vous êtes censé utiliser. Inversement, le canal privé est utilisé lorsque vous souhaitez limiter les notifications d'événement à certains canaux privés..
Dans notre cas d'utilisation, nous souhaitons informer les utilisateurs lorsqu'ils reçoivent un nouveau message. Et pour pouvoir recevoir des notifications de diffusion, l'utilisateur doit être connecté. Par conséquent, nous devrons utiliser le canal privé dans notre cas..
Tout d'abord, vous devez activer le système d'authentification Laravel par défaut pour que les fonctionnalités telles que l'enregistrement, la connexion, etc. fonctionnent sans attendre. Si vous ne savez pas comment faire cela, la documentation officielle fournit un aperçu rapide de cette.
Comme nous allons utiliser le Poussoir En tant que serveur tiers, en tant que serveur tiers, vous devez créer un compte avec ce dernier et vous assurer que vous disposez des informations d'identification de l'API nécessaires lors de votre enregistrement. Si vous rencontrez des difficultés pour le créer, n'hésitez pas à me demander dans la section commentaires.
Ensuite, nous devons installer le kit de développement PHP Pusher afin que notre application Laravel puisse envoyer des notifications de diffusion au serveur de socket Web Pusher..
Dans la racine de votre application Laravel, exécutez la commande suivante pour l'installer en tant que package compositeur..
$ composer nécessite pusher / pusher-php-server "~ 3.0"
Modifions maintenant le fichier de configuration de diffusion pour activer l’adaptateur Pusher en tant que pilote de diffusion par défaut..
env ('BROADCAST_DRIVER', 'pusher'), / * | ---------------------------------------- -------------------------------------- | Connexions de diffusion | --------------------------------------------------- --------------------------- | | Ici, vous pouvez définir toutes les connexions de diffusion qui seront utilisées | pour diffuser des événements vers d'autres systèmes ou via des prises Web. Échantillons de | chaque type de connexion disponible est fourni à l'intérieur de ce tableau. | * / 'connexions' => ['poussoir' => ['driver' => 'poussoir', 'clé' => env ('PUSHER_APP_KEY'), 'secret' => env ('PUSHER_APP_SECRET'), 'app_id' => env ('PUSHER_APP_ID'), 'options' => ['cluster' => 'ap2', 'crypté' => true,,], 'redis' => ['pilote' => 'redis', ' connection '=>' default ',],' log '=> [' driver '=>' log ',],' null '=> [' driver '=>' null ',],],];Comme vous pouvez le constater, nous avons modifié le pilote de diffusion par défaut en Pusher. Nous avons également ajouté des options de configuration en cluster et chiffrées que vous auriez dû obtenir du compte Pusher en premier lieu..
En outre, il récupère les valeurs des variables d'environnement. Alors assurons-nous que nous définissons les variables suivantes dans le .env déposer correctement.
BROADCAST_DRIVER = pousseur PUSHER_APP_ID = VOTRE_APP_ID PUSHER_APP_KEY = VOTRE_APP_KEY PUSHER_APP_SECRET = VOTRE_APP_SECRET
Ensuite, je devais apporter quelques modifications à quelques fichiers Laravel de base afin de le rendre compatible avec le dernier SDK Pusher. Bien sûr, je ne recommande pas d’apporter de modifications au cadre principal, mais je vais simplement souligner ce qui doit être fait.
Allez-y et ouvrez le vendeur / laravel / framework / src / Illuminate / radiodiffusion / diffuseurs / PusherBroadcaster.php fichier. Il suffit de remplacer l'extrait utilisez Pusher; avec utilisez Pusher \ Pusher;.
Ensuite, ouvrons le fournisseur / laravel / framework / src / Illuminate / Broadcasting / BroadcastManager.php déposer et apporter une modification similaire dans l'extrait suivant.
retourne les nouveaux PusherBroadcaster (nouveaux \ Pusher \ Pusher ($ config ['key'], $ config ['secret'], $ config ['app_id'], Arr :: get ($ config, 'options', [])) )
Enfin, activons le service de diffusion dans config / app.php en supprimant le commentaire à la ligne suivante.
App \ Providers \ BroadcastServiceProvider :: class,
Jusqu'à présent, nous avons installé des bibliothèques spécifiques au serveur. Dans la section suivante, nous allons passer en revue les bibliothèques clientes qui doivent également être installées..
En radiodiffusion, la responsabilité du client est de s’abonner aux chaînes et d’écouter les événements souhaités. Sous le capot, il y parvient en ouvrant une nouvelle connexion au serveur de socket Web.
Heureusement, nous n’avons pas à implémenter de JavaScript complexe pour le réaliser, car Laravel fournit déjà une bibliothèque client utile, Laravel Echo, qui nous aide à gérer les sockets côté client. En outre, il prend en charge le service Pusher que nous allons utiliser dans cet article.
Vous pouvez installer Laravel Echo à l’aide du gestionnaire de packages NPM. Bien sûr, vous devez d'abord installer node et npm si vous ne les avez pas déjà. Le reste est assez simple, comme le montre l'extrait suivant.
$ npm installer laravel-echo
Ce qui nous intéresse, c'est le node_modules / laravel-echo / dist / echo.js fichier que vous devez copier public / echo.js.
Oui, je comprends, c'est un peu excessif de n'obtenir qu'un seul fichier JavaScript. Si vous ne voulez pas passer par cet exercice, vous pouvez télécharger le echo.js fichier de mon GitHub.
Et avec cela, nous en avons fini avec la configuration de nos bibliothèques clientes.
Rappelons que nous parlions de la mise en place d’une application permettant aux utilisateurs de notre application de s’envoyer des messages. D'autre part, nous enverrons des notifications de diffusion aux utilisateurs qui sont connectés lorsqu'ils reçoivent un nouveau message d'autres utilisateurs..
Dans cette section, nous allons créer les fichiers nécessaires à la mise en oeuvre du cas d'utilisation recherché..
Pour commencer, créons le Message modèle qui contient les messages envoyés par les utilisateurs les uns aux autres.
$ php artisan marque: modèle Message - migration
Nous devons également ajouter quelques champs tels que à, de et message à notre table de messages. Alors changeons le fichier de migration avant d'exécuter la commande migrate.
incréments ('id'); $ table-> entier ('from', FALSE, TRUE); $ table-> integer ('to', FALSE, TRUE); $ table-> text ('message'); $ table-> horodatages (); ); / ** * Inverser les migrations. * * @retour void * / public function down () Schema :: dropIfExists ('messages'); Maintenant, exécutons la commande migrate qui crée la table des messages dans la base de données.
$ php artisan migrate
Chaque fois que vous souhaitez soulever un événement personnalisé dans Laravel, vous devez créer une classe pour cet événement. En fonction du type d’événement, Laravel réagit en conséquence et prend les mesures nécessaires..
Si l'événement est un événement normal, Laravel appelle les classes d'écoute associées. Par contre, si l'événement est de type diffusion, Laravel l'envoie au serveur de socket Web configuré dans le répertoire. config / broadcast.php fichier.
Comme nous utilisons le service Pusher dans notre exemple, Laravel enverra des événements au serveur Pusher..
Utilisons la commande artisan suivante pour créer une classe d'événements personnalisée-NewMessageNotification.
$ php artisan marque: événement NewMessageNotification
Cela devrait créer le app / Events / NewMessageNotification.php classe. Remplaçons le contenu de ce fichier par le suivant.
message = $ message; / ** * Récupère les chaînes sur lesquelles l’événement doit être diffusé. * * @return Channel | array * / public function broadcastOn () return new PrivateChannel ('user.'. $ this-> message-> to); La chose importante à noter est que le NewMessageNotification la classe implémente le Devrait être diffusé maintenant interface. Ainsi, lorsque nous soulevons un événement, Laravel sait que cet événement doit être diffusé.
En fait, vous pouvez également mettre en œuvre la Devrait être diffusé et Laravel ajoute un événement dans la file d’événements. Il sera traité par le travailleur de la file d'attente d'événements lorsqu'il aura la possibilité de le faire. Dans notre cas, nous voulons le diffuser immédiatement, et c’est pourquoi nous avons utilisé la Devrait être diffusé maintenant interface.
Dans notre cas, nous voulons afficher un message que l'utilisateur a reçu, et nous avons donc passé le Message modèle dans l'argument constructeur. De cette façon, les données seront transmises avec l'événement.
Ensuite, il y a le broadcastOn méthode qui définit le nom du canal sur lequel l’événement sera diffusé. Dans notre cas, nous avons utilisé le canal privé pour limiter la diffusion d'événements aux utilisateurs connectés..
le $ this-> message-> to variable fait référence à l'identifiant de l'utilisateur sur lequel l'événement sera diffusé. Ainsi, le nom de la chaîne devient comme utilisateur. USER_ID.
Dans le cas de canaux privés, le client doit s'authentifier avant d'établir une connexion avec le serveur de socket Web. Il s'assure que les événements diffusés sur des canaux privés sont uniquement envoyés aux clients authentifiés. Dans notre cas, cela signifie que seuls les utilisateurs connectés pourront s'abonner à notre chaîne. utilisateur. USER_ID.
Si vous utilisez la bibliothèque cliente Laravel Echo pour vous abonner à un canal, vous avez de la chance! Il s'occupe automatiquement de la partie authentification et il vous suffit de définir les itinéraires de canaux.
Allons-y et ajoutons une route pour notre canal privé dans le routes / channels.php fichier.
id === (int) $ id; ); Broadcast :: channel ('user. ToUserId', function ($ user, $ toUserId) return $ user-> id == $ toUserId;);Comme vous pouvez le voir, nous avons défini le utilisateur. toUserId route pour notre canal privé.
Le deuxième argument de la méthode channel devrait être une fonction de fermeture. Laravel passe automatiquement l'utilisateur actuellement connecté en tant que premier argument de la fonction de fermeture, et le second argument est généralement extrait du nom du canal..
Lorsque le client tente de s'abonner au canal privé utilisateur. USER_ID, La bibliothèque Laravel Echo effectue l'authentification nécessaire en arrière-plan à l'aide de l'objet XMLHttpRequest, ou plus communément appelé XHR..
Jusqu'ici, nous avons terminé la configuration, alors allons-y et testons-le.
Dans cette section, nous allons créer les fichiers nécessaires au test de notre cas d'utilisation..
Allons-y et créons un fichier de contrôleur à app / Http / Controllers / MessageController.php avec le contenu suivant.
middleware ('auth'); public function index () $ user_id = Auth :: user () -> id; $ data = array ('user_id' => $ user_id); retourne la vue ('broadcast', $ data); fonction publique send () //… // message est en cours d'envoi $ message = new Message; $ message-> setAttribute ('from', 1); $ message-> setAttribute ('to', 2); $ message-> setAttribute ('message', 'Message de démonstration de l'utilisateur 1 à l'utilisateur 2'); $ message-> save (); // veut diffuser l'événement NewMessageNotification (new NewMessageNotification ($ message)); //…dans le indice méthode, nous utilisons le diffuser vue, alors créons le resources / views / broadcast.blade.php voir le fichier aussi.
Tester La nouvelle notification sera alertée en temps réel!
Et, bien sûr, nous devons également ajouter des itinéraires dans le routes / web.php fichier.
Route :: get ('message / index', 'MessageController @ index'); Route :: get ('message / send', 'MessageController @ send');Dans la méthode constructeur de la classe de contrôleur, vous pouvez voir que nous avons utilisé le auth middleware pour s'assurer que les méthodes du contrôleur ne sont accessibles qu'aux utilisateurs connectés.
Ensuite, il y a la indice méthode qui rend le diffuser vue. Tirons dans le code le plus important dans le fichier de vue.
Premièrement, nous chargeons les bibliothèques client nécessaires, Laravel Echo et Pusher, ce qui nous permet d’ouvrir la connexion de socket Web au serveur de socket Web Pusher..
Ensuite, nous créons l’instance d’Echo en fournissant Pusher comme adaptateur de diffusion et d’autres informations nécessaires relatives au pousseur.
Pour aller plus loin, nous utilisons la méthode privée d’Echo pour nous abonner au canal privé. utilisateur. USER_ID. Comme nous l'avons vu précédemment, le client doit s'authentifier avant de s'abonner au canal privé. Ainsi, le Écho object effectue l'authentification nécessaire en envoyant la XHR en arrière-plan avec les paramètres nécessaires. Enfin, Laravel tente de trouver le utilisateur. USER_ID route, et il devrait correspondre à la route que nous avons définie dans le routes / channels.php fichier.
Si tout se passe bien, vous devez ouvrir une connexion de socket Web avec le serveur de socket Web Pusher et répertorier les événements sur le serveur. utilisateur. USER_ID canal! A partir de maintenant, nous pourrons recevoir tous les événements entrants sur ce canal.
Dans notre cas, nous voulons écouter la NewMessageNotification événement et donc nous avons utilisé le écoute méthode du Écho objet pour y parvenir. Pour simplifier les choses, nous allons simplement alerter le message que nous avons reçu du serveur Pusher..
C'était donc la configuration pour recevoir des événements du serveur web-sockets. Ensuite, nous allons passer à travers le envoyer méthode dans le fichier contrôleur qui déclenche l'événement broadcast.
Tirons rapidement dans le code de la envoyer méthode.
fonction publique send () //… // message est en cours d'envoi $ message = new Message; $ message-> setAttribute ('from', 1); $ message-> setAttribute ('to', 2); $ message-> setAttribute ('message', 'Message de démonstration de l'utilisateur 1 à l'utilisateur 2'); $ message-> save (); // veut diffuser l'événement NewMessageNotification (new NewMessageNotification ($ message)); //…Dans notre cas, nous informerons les utilisateurs connectés lorsqu'ils recevront un nouveau message. Nous avons donc essayé d'imiter ce comportement dans le envoyer méthode.
Ensuite, nous avons utilisé le un événement fonction d'assistance pour élever le NewMessageNotification un événement. Depuis le NewMessageNotification événement est de Devrait être diffusé maintenant type, Laravel charge la configuration de diffusion par défaut à partir du config / broadcast.php fichier. Enfin, il diffuse les programmes NewMessageNotification événement sur le serveur de socket Web configuré sur le utilisateur. USER_ID canal.
Dans notre cas, l’événement sera transmis au serveur de socket Web Pusher sur le serveur utilisateur. USER_ID canal. Si l'ID de l'utilisateur destinataire est 1, l'événement sera diffusé sur le utilisateur.1 canal.
Comme nous en avons discuté précédemment, nous avons déjà une configuration qui écoute les événements sur ce canal. Il devrait donc pouvoir recevoir cet événement et le message d'alerte s'affiche pour l'utilisateur.!
Voyons comment vous êtes censé tester le cas d'utilisation que nous avons construit jusqu'à présent..
Ouvrez l’URL http: // votre-domaine-site-laravel / message / index dans votre navigateur. Si vous n'êtes pas encore connecté, vous serez redirigé vers l'écran de connexion. Une fois que vous êtes connecté, vous devriez voir la vue de diffusion que nous avons définie précédemment - rien d'extraordinaire pour l'instant.
En fait, Laravel a déjà effectué pas mal de travaux en arrière-plan pour vous. Comme nous avons activé le Pusher.logToConsole paramètre fourni par la bibliothèque client Pusher, il enregistre tout dans la console du navigateur à des fins de débogage. Voyons ce qui est enregistré dans la console lorsque vous accédez à la page http: // your-laravel-site-domain / message / index.
Pusher: Etat modifié: initialisé -> connexion Pusher: Connexion: "transport": "ws", "url": "wss: //ws-ap2.pusher.com: 443 / app / c91c1b7e8c6ece46053b? Protocol = 7 & client = js & version = 4.1.0 & flash = false " Pusher: Connexion: " transport ":" xhr_streaming "," url ":" https://sockjs-ap2.pusher.com:443/pusher/app/c91c1b7e8c6ece46053b?protocol=7&client= js & version = 4.1.0 " Pus: Etat modifié: connexion -> connecté avec une nouvelle douille ID 1386.68660 Pus Evénement envoyé: " événement ": "," channel ":" private-user.2 " Pusher: événement recd: " event ":" pusher_internal: subscription_succeeded "," data ": ," channel ":" private-user.2 " Pusher: aucun rappel sur l'utilisateur privé.2 pour le poussoir: subscription_succeeded
Il a ouvert la connexion de socket Web avec le serveur de socket Web Pusher et s'est abonné pour écouter les événements sur le canal privé. Bien entendu, vous pouvez attribuer un nom de canal différent à votre cas en fonction de l'ID de l'utilisateur avec lequel vous êtes connecté. Maintenant, gardons cette page ouverte pendant que nous allons tester le envoyer méthode.
Ensuite, ouvrons l’URL http: // your-laravel-site-domain / message / send dans l’autre onglet ou dans un autre navigateur. Si vous utilisez un autre navigateur, vous devez vous connecter pour pouvoir accéder à cette page..
Dès que vous ouvrez la page http: // votre-site-laravel-site / message / send, vous devriez pouvoir voir un message d'alerte dans l'autre onglet à l'adresse http: // votre-site-laravel-site / message /indice.
Naviguons vers la console pour voir ce qui vient de se passer.
Pusher: événement recd: "événement": "App \\ Événements \\ NewMessageNotification", "données": "message": "id": 57, "de": 1, "à": 2, "message ":" Message de démonstration de l'utilisateur 1 à l'utilisateur 2 "," created_at ":" 2018-01-13 07:10:10 "," updated_at ":" 2018-01-13 07:10:10 "," channel ":" private-user.2 "
Comme vous pouvez le constater, cela vous indique que vous venez de recevoir le App \ Events \ NewMessageNotification événement du serveur de socket Web Pusher sur le utilisateur privé.2 canal.
En fait, vous pouvez également voir ce qui se passe à l’extérieur du pousseur. Accédez à votre compte Pusher et accédez à votre application. Sous le Déboguer Console, vous devriez pouvoir voir les messages en cours de journalisation.
Et cela nous amène à la fin de cet article! Espérons que ce ne fut pas trop en une seule fois car j'ai essayé de simplifier les choses au mieux de mes connaissances.
Aujourd'hui, nous avons examiné l'une des caractéristiques les moins discutées de la radiodiffusion par Laravel. Il vous permet d'envoyer des notifications en temps réel à l'aide de sockets Web. Tout au long de cet article, nous avons construit un exemple concret illustrant le concept susmentionné..
.
