Comment utiliser Laravel avec Socket.Io

Sockets websockets sont cool. Ils sont vraiment utiles si vous souhaitez afficher des activités en temps réel de vos utilisateurs (ou peut-être des emplois de file d'attente).

Maintenant, si vous avez peur du mot «Websockets», ne soyez pas. Je vais mettre les instructions sur la façon dont vous pouvez l'utiliser et je serai là pour répondre à vos questions si vous en avez besoin.

J'avais ce défi où j'en avais besoin pour afficher une liste de personnes qui consultent actuellement une URL spécifique Laravel. Alors j'ai commencé à penser. Une partie de moi voulait faire un hack rapide (heureusement, ce n'est pas le côté le plus fort de moi). Tandis que l'autre voulait construire quelque chose de cool, réutilisable et durable.

«Pourquoi n'utilisez-vous pas simplement Pusher?"

Voici la chose.

Laravel est livré avec un poussoir activé. Même si Pusher semble être une solution rapide «plug and play» (ce qu'il est), il est livré avec des limitations. Consultez https: // pusher.com / tarification

Et la plupart des tutoriels vous trompent avec leur titre de mise en œuvre de WebSockets alors qu'en réalité ils veulent juste vous donner un poussoir. (Et ma partie préférée est quand ils disent que vous pouvez facilement passer à la prise.io)

"Nous voulons avoir un nombre illimité de connexions"

Nous ne voulons pas nous soucier des limitations.

Commençons.

J'utilise Vagrant / Homestead.

Pour cela, nous devrons lire sur la diffusion des événements.

Des choses à noter ici (donc je n'ai pas à répéter les choses):

1. Devrait interface de broadcast pour les événements

2. Activer les itinéraires de diffusion et utiliser des itinéraires / canaux.PHP pour authentifier les utilisateurs

3. Channel public - tout le monde peut écouter

4. Canal privé - vous devez autoriser les utilisateurs avant de pouvoir rejoindre un canal

5. Channel de présence - comme privé, mais vous pouvez passer beaucoup de métadonnées supplémentaires sur cette chaîne et obtenir une liste de personnes qui ont rejoint la chaîne.Méthode de l'événement BroadCaston ()

Créez votre événement

PHP Artisan Make: Event MessagePushed

Vous pouvez même suivre l'exemple spécifique dans la documentation de diffusion de l'événement. (Ce que nous devrions vraiment).

Installer Redis

Avant cela, j'avais en fait une configuration de files d'attente avec le superviseur / redis / horizon. Horizon est génial et vous pouvez trouver des informations à ce sujet ici https: // laravel.com / docs / 5.6 / horizon

Une fois que vos files d'attente fonctionnaient, cet événement Message Pushed devra utiliser des files d'attente.

Remarque: Pour que tout cela fonctionne, assurez-vous de modifier votre .fichier env:

Broadcast_driver = redis
Queue_driver = redis (c'est de la configuration de l'horizon en fait, mais nous en aurons besoin pour plus tard)
Redis_host = 127.0.0.1
Redis_password = null
Redis_port = 6379

Installer Laravel Echo Server

Donc, cette pièce est en fait là où nous installons la prise.Serveur IO qui est regroupé à l'intérieur de Laravel-Echo-Server. Vous pouvez y trouver ici: https: // github.com / tlaverdure / laravel-echo-server

Remarque: vérifiez les exigences en haut!

Exécutez ce qui suit (comme indiqué dans le document)

NPM Install -g Laravel-Echo-Server

Puis exécutez l'initiale afin d'obtenir votre Laravel-Echo-Server.Fichier JSON généré dans la racine de l'application (que nous devrons configurer).

Laravel-Echo-Server Init

Une fois que vous avez généré votre Laravel-Echo-Server.Fichier JSON, cela devrait ressembler à ceci.

"Authhost": "http: // local-website.application ",
"AuthendPoint": "/ Broadcasting / Auth",
"clients": [

"appid": "my-app-id",
"Key": "My-Key-Generated-with-in-Command"

]],
"base de données": "redis",
"DatabaseConfig":
"redis": ,
"sqlite":
"DatabasePath": "/ base de données / Laravel-Echo-Server.sqlite "
,
"Port": "6379",
"hôte": "127.0.0.1"
,
"DevMode": False,
"hôte": null,
"port": "6001",
"protocole": "http",
"sockettio": ,
"sslcertpath": "",
"sslkeypath": "",
"sslcertchainpath": "",
"sslpassphrase": ""

Remarque: Si vous souhaitez pousser cela à votre serveur public, assurez-vous d'ajouter Laravel-Echo-Server.JSON à votre .gitignore. Générez ce fichier sur le serveur, sinon vous devrez modifier votre authoste tout le temps.

Exécutez votre serveur Laravel Echo

Vous devez l'exécuter pour démarrer les websockets.

Laravel-Echo-Server Start

(À l'intérieur de votre racine - où votre écho-serveur Laravel.JSON est placé)

Il devrait commencer avec succès. (Maintenant, nous voulons ajouter cela au superviseur de votre serveur, il est donc démarré automatiquement et redémarré au cas où il se bloque)

À l'intérieur de votre / etc / superviseur / confr.D / Laravel-Echo.confr (créez ce fichier à l'intérieur de votre confis.Dossier D) Placez ce qui suit:

[Programme: Laravel-Echo]
répertoire = / var / www / my-website-folder
process_name =% (programme_name) s _% (process_num) 02d
Command = Laravel-Echo-Server Start
autostart = true
autorestart = true
utilisateur = votre utilisateur-linux
Numprocs = 1
redirect_stderr = true
stdout_logfile = / var / www / my-website-folder / stockage / journaux / écho.enregistrer

Une fois que vous positionnez dans votre racine de Laravel, vous pouvez courir

PWD

Pour obtenir le chemin de votre «répertoire» ci-dessus et «stdout_logfile» préfixe.

Votre utilisateur sera votre utilisateur Linux (Vagrant ou Ubuntu ou un autre)

Enregistrer le fichier et sortir.

Si vous avez utilisé Vim Laravel-Echo.Conf puis à l'intérieur, appuyez sur I (comme Istanbul) sur votre clavier pour modifier un fichier avec VIM, puis tapez ESC suivant: WQ! Pour fermer le fichier et l'enregistrer.

Ensuite, nous devons exécuter les commandes suivantes:

Sudo Supervisorctl Stop All
SUDO Supervisorctl Reread
SUDO Supervisorctl Reload

Après ce chèque pour voir si Laravel Echo fonctionne

Statut Sudo Supervisorctl

Installez le client Laravel Echo et Socket IO

Installation de NPM - Écho de l'énergie
Installation de NPM - Prise de sauvegarde.io-client
[/ c] c
Et puis dans votre bootstrap.JS (j'utilise Vue JS) Enregistrez votre écho
[cc lang = "bash" fusced = "true" width = "800"]
Importer l'écho de "Laravel-Echo"
fenêtre.io = require ('socket.io-client ');
// AVEZ CECI au cas où vous arrêtez d'exécuter votre
Laravel Echo ServerIF (Typeof IO !== 'Undefined')
fenêtre.Echo = new echo (
diffuseur: 'socket.io ',
Hôte: fenêtre.emplacement.nom d'hôte + ': 6001',
);

Maintenant, vérifiez à nouveau comment écouter vos événements sur des canaux spécifiques.

Suivant la documentation sur la radiodiffusion Laravel que nous avons partagée ci-dessus, si vous définissez votre méthode Broadcaston () pour retourner un nouveau Presencannel (j'expliquerai le cas particulier que j'ai fait, mais n'hésitez pas à poser des questions au cas où vous auriez besoin de quelque chose d'autre mis en œuvre. Je trouve que cela est de plus grande complexité que d'utiliser simplement un canal public, afin que nous puissions évoluer sans problème), puis nous voulons écouter ce canal du côté javascript (frontend).

Voici un exemple concret:

1. J'ai poussé un événement sur un canal de présence (j'avais affaire à des enquêtes)

fonction publique Broadcaston ()
Retourner Nouveau PresencEChenel ('Enquête.' . $ this-> enquête-> id);

2. Après avoir poussé l'événement, il passera par des canaux.php. Là, nous voulons créer une autorisation pour cet utilisateur. (N'oubliez pas de retourner un tableau pour l'autorisation des canaux de présence et non un booléen.)

Broadcast :: Channel ('Enquête.Survey_id ', fonction ($ utilisateur, $ enquête_id) return
['id' => $ user-> id, 'image' => $ user-> image (), 'full_name' => $ user-> full_name];);

3. Ensuite, dans mon composant VUEJS qui se charge sur la page que je souhaite surveiller, je définis une méthode qui sera initiée à partir de la méthode créée () sur charge:

écouterForBroadcast (Survey_id)
Écho.Rejoignez ('sondage.'+ Survey_id)
.ici ((utilisateurs) =>
ce.users_viewing = utilisateurs;
ce.$ ForceUpdate ();
)
.joint ((user) =>
si ce.CheckIfuSeralReadyViewingSurvey (utilisateur))
ce.Users_Viewing.push (utilisateur);
ce.$ ForceUpdate ();

)
.quitter ((utilisateur) =>
ce.retireViewingUser (utilisateur);
ce.$ ForceUpdate ();
);
,

J'ai évidemment retiré du code du contexte ici, mais j'ai ce tableau «Users_Viewing» pour garder mes utilisateurs actuels qui ont rejoint la chaîne.
Et ce serait vraiment.

J'espère que vous avez pu suivre car j'ai essayé d'être détaillé comme je peux.

Codage heureux!