Apprenez à utiliser laravel-websockets pour créer un système de diffusion « discret »

Cet article vous apporte des connaissances pertinentes sur Laravel. Il présente principalement comment utiliser laravel-websockets pour implémenter un système de diffusion "à faible configuration". Les amis intéressés devraient y jeter un œil. .

Avant-propos

J'ai cherché plusieurs tutoriels sur Internet sans succès, puis je me suis tenu à un seul tutoriel et j'ai continué à l'étudier et j'ai finalement réussi. Ensuite, j'ai écrit ce tutoriel, dans l'espoir d'aider des gens aussi stupides que moi. J’espère également ne pas induire les lecteurs en erreur. J'espère que les lecteurs ne feront pas trop confiance à mon tutoriel. En fait, j'ai réussi dans un état second, et il peut y avoir des pièges dans mon tutoriel. Un autre point est que j'estime que mon processus de recherche semble assez fructueux. Si vous disposez de suffisamment de temps, je vous suggère de faire vos propres recherches.

Au début du tutoriel, je présenterai brièvement comment j'ai trouvé la méthode présentée dans ce tutoriel. Je suggère aux personnes qui lisent le didacticiel de prêter attention à cette partie, car je soupçonne qu'une fois Laravel ou les bibliothèques associées mises à jour, elles peuvent devenir incompatibles ou déroutantes, et il y aura alors à nouveau des problèmes. À ce moment-là, les lecteurs devront peut-être faire leurs propres recherches.

Pourquoi est-ce que je dis que c’est une introduction générale Parce que j’ai l’impression que de nombreux endroits sont le résultat de ma propre cécité ? De plus, cela peut nécessiter une expérience indescriptible.

Essayez de réduire la taille des sujets expérimentaux et recherchez des tutoriels avec moins d'étapes.

Au début, j'ai suivi la version chinoise de la documentation officielle. Plus tard, j'ai trouvé que c'était trop compliqué, et je risquais d'échouer si je le faisais. un faux pas. Et parfois, il n'y a même pas de message d'erreur. Même s'il y a un message d'erreur, soit il est introuvable, soit il y a trop de questions avec des réponses complètement différentes. Si vous réduisez l’échelle autant que possible, vous devriez pouvoir éviter autant d’embûches que possible.

Décomposez la tâche afin que vous puissiez avoir un retour sur le succès des sous-tâches

Au début, je l'ai suivi étape par étape, puis j'ai finalement vu si elle réussissait. Plus tard, j'ai trouvé que cette méthode était trop inefficace. Ensuite, j'ai découvert que certaines sous-étapes peuvent être jugées par certaines méthodes pour déterminer si elles réussissent. Par exemple, une fois laravel-websockets installé avec succès, le tableau de bord peut être ouvert. C'est /laravel-websockets . Il existe également du code pour envoyer des diffusions. En cas de succès, vous pouvez voir l'effet dans le tableau de bord mentionné ci-dessus. Enfin, si tout réussit, vous pouvez voir l'effet dans le navigateur. Donc plus tard, si je n’y parvenais pas à ce stade, je ne continuerais pas à le faire et je continuerais à étudier ce qui n’allait pas à ce stade.

Connectez-vous plus

J'ai découvert en vous connectant que l'Echo du client n'avait pas été initialisé avec succès car il y avait peu de paramètres. Il semblait y avoir un message d'erreur auparavant, mais je ne semblais pas le comprendre. En produisant deux journaux différents avant et après l'initialisation d'Echo, j'ai constaté que seul le premier était exécuté et que le dernier n'était pas exécuté du tout, je suis donc arrivé à la conclusion que le programme s'arrêtait de s'exécuter lorsqu'il rencontrait une erreur.

Essayez de vous familiariser autant que possible avec les sujets testés

Par exemple, je n'ai trouvé aucune information pertinente sur un certain rapport d'erreur. Mais plus tard, j'ai découvert qu'un certain mot apparaissait dans la configuration, alors j'ai juste changé la configuration et tout allait bien. C'est ceci : « L'objet Options non capturées doit fournir un cluster ». Mais ensuite j’ai trouvé sur Internet une méthode qui était la même que la mienne. Peut-être l’avais-je déjà vue, peut-être parce que l’affiche disait qu’elle était inutile, alors je ne l’ai pas essayée.

Informations complètes de toutes les parties, en particulier celles qui réussissent

Bien que cela ne soit pas facile à utiliser et puisse même être trompeur, je pense que plus d'informations seront plus utiles pour résoudre le problème. Par exemple, j'ai recherché « laravel diffusion » sur Bilibili et regardé quelques vidéos. J'ai également recherché des didacticiels de documentation non officiels.

Si le message d'erreur de recherche est inutile ou s'il y a trop de résultats de recherche, jetez un œil au code

Mais je pense que la probabilité que cela soit utile est faible, alors utilisez-le lorsque vous n'avez pas d'autres options. Grâce à cette méthode, j'ai constaté que je décommentais une ligne de moins lorsque je décommentais le code, puis un message d'erreur très étrange est apparu.

Ne soyez pas trop heureux même si vous réussissez, pratiquez-le encore quelques fois

Plus vous avez d'étapes, plus il est facile d'avoir des problèmes. Il y a tellement d'étapes dans ce système de diffusion. Plus vous pratiquez, plus vous deviendrez familier.

Essayez de choisir des tutoriels mis à jour

J'ajoute généralement une condition dans un délai d'un an dans le moteur de recherche.

Programmation pour les moteurs de recherche

J'ai l'impression que cette fois, plus de la moitié des problèmes ont été résolus grâce aux moteurs de recherche, et il semble y avoir très peu de parties qui ont été complètement résolues par moi-même.

Ontologie

Certains aspects de mon tutoriel sont un peu longs. Il commence par la création d'un projet et mentionne également la configuration de la base de données. Les lecteurs avancés peuvent ignorer certains contenus. Quant aux lecteurs haut de gamme, il ne devrait pas être nécessaire de lire ce genre de choses de ma part. Cependant, je n'ai pratiquement aucune introduction à la commande. Si vous en avez besoin, je vous recommande de lire l'article en anglais suivant.
Memo

Ceci est une chaîne publique. Il existe également des files d'attente qui utilisent la synchronisation par défaut, censée n'être utilisée que dans les environnements de développement. Bref, mon tutoriel est probablement assez paralysé, mais si vous le parcourez, vous devriez pouvoir l'utiliser comme point de départ pour expérimenter de nouvelles configurations et ajouter de nouvelles fonctions selon les documents officiels.

Mon tutoriel fait principalement référence à cet article : Comment utiliser Laravel WebSockets.

Créez un projet

Exécutez la commande suivante dans Apache24htdocs ou un endroit similaire :

composer create-project laravel/laravel bc

Exécutez la commande suivante dans le chemin du projet :

php artisan serve

Notez qu'après avoir exécuté la commande ci-dessus, la fenêtre de ligne de commande actuelle ne peut généralement pas exécuter de commandes et doit être redémarré Une fenêtre de ligne de commande. Vous souhaitez continuer à exécuter des commandes dans la fenêtre de ligne de commande actuelle, sauf si vous coopérez avec des commandes exécutées en arrière-plan.

Configurer les informations de la base de données

Vous devez créer une base de données avant de configurer la base de données. J'utilise le test. Cependant, même s'il n'est pas créé, il sera invité à le créer lors de la migration. J'ai presque oublié cela car je n'ai jamais supprimé cette base de données auparavant.

.env

DB_CONNECTION=mysqlDB_HOST=127.0.0.1DB_PORT=3306DB_DATABASE=testDB_USERNAME=rootDB_PASSWORD=1234

Attention à renseigner les informations réelles de votre base de données, ne copiez pas ma configuration.

Installez le package côté serveur Beyondcode/laravel-websockets

Exécutez la commande suivante dans le chemin du projet :

composer require beyondcode/laravel-websockets
php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="migrations"php artisan migrate
php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="config"

Install pusher

Exécutez la commande suivante dans le chemin du projet :

composer require pusher/pusher-php-server

Faites attention à cet article que je mentionné Non, celui que j'ai installé doit être la dernière version. Le texte original semble avoir une version spécifiée.

Configuration de Laravel WebSockets

.env

BROADCAST_DRIVER=pusherPUSHER_APP_ID=12345PUSHER_APP_KEY=ABCDEFGPUSHER_APP_SECRET=HIJKLMNOPPUSHER_HOST=127.0.0.1PUSHER_PORT=6001PUSHER_SCHEME=httpPUSHER_APP_CLUSTER=mt1

Notez que ceci est également différent de l'article anglais auquel j'ai fait référence. J'ai un trouble obsessionnel-compulsif et je pense que passer à .env est plus élégant. Après tout, d'autres endroits liront .env en premier. On a l'impression que .env ressemble plus à une fonction. Si vous changez un emplacement, vous n'avez pas besoin de modifier tous les emplacements appelants. J'ai l'impression qu'il y a quelque chose qui ne va pas avec la phrase précédente, c'est peut-être ce que cela signifie.

Veuillez noter encore une fois que les valeurs du deuxième au quatrième élément sont renseignées avec désinvolture.

Exécutez le serveur Laravel WebSockets

Exécutez la commande suivante dans le chemin du projet :

php artisan websockets:serve

Cela signifie également qu'après l'exécution, la fenêtre de ligne de commande actuelle ne peut pas saisir de commandes. [Apprentissage recommandé : tutoriel vidéo laravel] Après

, entrez 127.0.0.1:8000/laravel-websockets dans la barre d'adresse du navigateur pour voir si l'opération précédente a réussi. Si vous n'exécutez pas le serveur via "php artisan serve", le port peut être différent. Cliquez sur le bouton Connecter et si quelque chose apparaît sous Événements, cela devrait être un succès progressif. Notez que cette page Web est très lente à ouvrir sans cela, du moins elle est très lente pour moi. Parce qu'il contient une bibliothèque js qui est très lente à télécharger. Notez que le comportement suivant consistant à modifier le modèle de lame est facultatif ! De plus, je ne sais pas s’il y a un problème avec le CDN ci-dessous. Après tout, il ne semble pas s’agir d’un CDN d’un grand fabricant. Si vous êtes trop lent et que vous ne voulez pas faire cela, vous pouvez remplacer

<script  src="https://www.php.cn/link/19e0c9edc141240b5de750fa83ba1bed"></script>

dans supplierbeyondcodelaravel-websocketsresourcesviewsdashboard.blade.php par

<script  src="https://cdn.bootcdn.net/ajax/libs/plotly.js/2.17.0/plotly.min.js"></script>

J'ai recherché directement cdn.plot.ly/plotly-latest en utilisant le VS Fonction de recherche de code. min.js J'ai trouvé ce fichier. De plus, dans le réseau d'outils de développement Firefox, j'ai constaté que la vitesse de chargement de cette bibliothèque js est lente. De plus, il serait inélégant de modifier directement des fichiers dans de tels endroits.

Créer des événements

Exécutez la commande suivante dans le chemin du projet :

php artisan make:event NewTrade

appEventsNewTrade.php

<?php
namespace App\Events;use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;
class NewTrade implements ShouldBroadcast{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $trade;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct($trade)
    {
        $this->trade = $trade;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new Channel('trades');
    }}

Exécutez la commande suivante dans le chemin du projet :

php artisan tinker

Après avoir exécuté cette commande, l'interpréteur interactif de Laravel sera lancé, je comprends Entrez simplement quelques instructions et elles peuvent être exécutées directement. Il existe également d'autres commandes pratiques. Cela signifie également qu'après l'exécution, la fenêtre de ligne de commande actuelle ne peut pas saisir de commandes système normales, mais après cette fenêtre de ligne de commande, les instructions php doivent être saisies. À propos, le terminal dans VS Code ne peut pas utiliser Ctrl + V pour bricoler, mais la fonction clic droit peut être utilisée pour coller.

Ensuite, exécutez la commande suivante dans la fenêtre de ligne de commande où php artisan tinker a été exécuté ci-dessus :

event (new \App\Events\NewTrade('test'))

Ensuite, vous pouvez voir le message envoyé sur la page 127.0.0.1:8000/laravel-websockets mentionnée ci-dessus . Si vous pouvez le voir, cela signifie que l'étape est réussie.

Installez le package client laravel-echo

Exécutez la commande suivante dans le chemin du projet :

npm installnpm install --save-dev laravel-echo pusher-js

resourcesjsbootstrap.js

import Echo from 'laravel-echo';import Pusher from 'pusher-js';window.Pusher = Pusher;window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    wsHost: import.meta.env.VITE_PUSHER_HOST ? import.meta.env.VITE_PUSHER_HOST : `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
    wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
    wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,});

Notez que ceci est également différent de l'article anglais auquel j'ai fait référence. J'ai simplement décommenté ces éléments dans ce fichier et ajouté la ligne "cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER" à la fin.

Exécutez la commande suivante dans le chemin du projet :

npm run dev

Après avoir exécuté cela, vous ne pourrez plus saisir de commandes dans la fenêtre de ligne de commande actuelle.

添加客户端脚本

在文件
resources\views\welcome.blade.php
的 head 标签的结尾添加以下代码：

        @vite('resources/js/app.js')        <script>
            window.onload = function(){
                Echo.channel('trades')
                .listen('NewTrade', (e) => {
                    console.log(e.trade);
                });
            };
        </script>
    </head>

注意这里也跟我参考的那篇英文文章不一样。改了两处，一个是导入 app.js 的方法换了。另外套了一层 window.onload。

然后在浏览器的地址栏输入 127.0.0.1:8000/ 启动开发者工具并切换到控制台标签页。然后再在前面运行过 php artisan tinker 的那个命令行窗口中执行以下命令：

event (new \App\Events\NewTrade('test'))

最后切换到前面提到的开发者工具中的控制台标签页，应该能看到一条“test”消息。能看到就说明最终成功了。

结语

我只是个菜狗，不要问我太复杂的问题。我从开始搞这个广播系统到最终成功好像用了两三天的时间，就凭这个时间你应该就能体会到我有多菜了。

最后因为我是菜狗，所以可能会有一些理解上的错误，欢迎指出来。不过按照我的这个教程做基本上应该是会成功的。我做完这个教程自己照着又做了两遍，没问题。不过也可能会因为我没注意到一些东西，或者读者的环境跟我的不一样导致读者不成功。所以我也不敢保证。感觉早晚会失效，失效了如果我没更新的话谁看到了就回复一下提醒一下别人吧。

原文地址：https://learnku.com/articles/74366

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!