Maison  >  Article  >  cadre php  >  Parlons du mécanisme de diffusion de laravel7.0, il y a toujours ce que l'on veut !

Parlons du mécanisme de diffusion de laravel7.0, il y a toujours ce que l'on veut !

藏色散人
藏色散人avant
2021-07-28 15:57:541818parcourir

Mécanisme de diffusion laravel7.0 (Redis + socket.io)

Fournisseur de services de diffusion

Avant de diffuser un événement, vous devez d'abord vous inscrire AppProvidersBroadcastServiceProvider . Dans une application Laravel nouvellement installée, il vous suffit de décocher le fichier de configuration config/app.php Les annotations avant les fournisseurs de services correspondants dans les fournisseurscode> tableau suffit. Ce fournisseur vous permet d'enregistrer des routes d'autorisation de diffusion et des rappelsAppProvidersBroadcastServiceProvider。在新安装的 Laravel 应用中,你只需要取消 config/app.php 配置文件中 providers 数组内对应服务提供者之前的注释即可。该提供者允许你注册广播授权路由和回调

相关栏目教程推荐:《laravel教程

设置 Redis 连接

需要修改 .env 文件中的广播驱动为 redis

BROADCAST_DRIVER=redis

建立 Event

php artisan make:event OrderShipped

执行上诉命令之后 app 目录下会出现一个 Events 目录,在该目录下产生了广播事件类 OrderShipped.php。我们要对自动生成的 OrderShipped 类进行以下修改

  • 增加对 ShouldBroadcast 的实现

  • 修改 broadcastOn 方法,使用公共广播通道 orderStatus

  • 自定义广播的消息名(非必须)【默认情况下,Laravel 会使用事件的类名来广播事件,不过,你可以通过在事件中定义 broadcastAs 方法来自定义广播名称:】

  • 修改构造函数

完整修改如下 可直接替换

<?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 OrderShipped implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;
    //可添加任意成员变量
    public $id;
    //事件构造函数
    public function __construct($id)
    {
        $this->id = $id;
    }
    //自定义广播的消息名
    public function broadcastAs()
    {
        return &#39;anyName&#39;;
    }
    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new Channel(&#39;orderStatus&#39;);
    }
}

设置 api 路由

Route::get(&#39;/ship&#39;, function (Request $request) {
    $id = $request->input(&#39;id&#39;);
    broadcast(new OrderShipped($id)); // 触发事件
    return &#39;Order Shipped!&#39;;
});

安装前端脚手架

composer require laravel/uiphp artisan ui vue --auth

Redis

因为咱们使用 Redis 广播,需要安装 Predis 库:

composer require predis/predis

Redis 广播使用 Redis 的 pub/sub 功能进行广播;不过,你需要将其和能够接受 Redis 消息的 Websocket 服务器进行配对以便将消息广播到 Websocket 频道

当 Redis 广播发布事件时,事件将会被发布到指定的频道上,传递的数据是一个 JSON 格式的字符串,其中包含了事件名称、负载数据 data、以及生成事件 socket ID 的用户

安装 laravel-echo-server 订阅 Redis Sub

如果使用 pusher 那么直接使只用 laravel 就可以了,如果使用 Redis + socket.io 则需要使用开源项目 laravel-echo-server 。所以我们现在要使用 laravel-echo-server

全局安装

npm install -g laravel-echo-server

初始化 laravel-echo-server

laravel-echo-server init

// 是否在开发模式下运行此服务器(y/n) 输入y
? Do you want to run this server in development mode? (y/N)// 设置服务器的端口 默认 6001 输入 6001就可以了 或者你想要的
? Which port would you like to serve from? (6001)// 想用的数据库  选择 redis
? Which database would you like to use to store presence channel members? (Use arrow keys)❯ redis
  sqlite

//   这里输入 你的laravel  项目的访问域名
? Enter the host of your Laravel authentication server. (http://localhost)// 选择 网络协议 http
? Will you be serving on http or https? (Use arrow keys)❯ http
  https

// 您想为HTTP API生成客户端ID/密钥吗 N
? Do you want to generate a client ID/Key for HTTP API? (y/N)// 要设置对API的跨域访问吗?(y/n)N
Configuration file saved. Run laravel-echo-server start to run server.

//您希望将此配置另存为什么? (laravel-echo-server.json)回车就行
? What do you want this config to be saved as? (laravel-echo-server.json)

启动 laravel-echo-server

laravel-echo-server start
  • 成功启动后会输出以下日志
L A R A V E L  E C H O  S E R V E R

version 1.6.0

⚠ Starting server in DEV mode...

✔  Running at localhost on port 6001
✔  Channels are ready.
✔  Listening for http events...
✔  Listening for redis events...

Server ready!

测试广播

在浏览器上执行 http://yourhost/api/ship?id=16

Channel: laravel_database_orderStatus
Event: anyName
  • laravel-echo-server 连接成功!

安装 laravel-echo 的前依赖

由于前端使用的是 laravel-echo来收听广播,我们选择的底层实现方式是socket.io。所以首先我们要在package.json中添加 laravel-echosocket.io

Tutoriels recommandés dans les colonnes associées : "
tutoriel laravel

Configurer la connexion Redis

Vous devez modifier le pilote de diffusion dans le fichier .env pour redis :

npm i --save socket.io-client
npm i --save laravel-echo

Créer un événement🎜🎜🎜
import Echo from "laravel-echo";
window.io = require("socket.io-client");
window.Echo = new Echo({    
broadcaster: "socket.io",    
host: window.location.hostname + ":6001"
});
🎜🎜🎜Après avoir exécuté la commande d'appel, un événement apparaîtra dans le répertoire de l'application. La classe d'événements de diffusion OrderShipped.php est générée dans ce répertoire. Nous devons apporter les modifications suivantes à la classe OrderShipped générée automatiquement🎜
  • 🎜Ajouter l'implémentation de ShouldBroadcast🎜
  • 🎜Modifier la méthode BroadcastOn et utiliser le canal de diffusion public orderStatus🎜
  • 🎜Personnaliser le nom du message de diffusion (🎜Pas obligatoire🎜) [Par défaut, Laravel utilisera le nom de la classe d'événement pour diffuser l'événement, mais vous pouvez personnaliser le nom de diffusion en définissant la méthode BroadcastAs dans l'événement :]🎜
  • 🎜Modifier le constructeur🎜
🎜La modification complète est la suivante et peut être directement remplacée🎜
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="">
    <title>News Room</title>
    <link href="" rel="stylesheet">
</head>

<body>
    <div class="content">
        News Room
    </div>
    <script src=""></script>
    <script>
        Echo.channel("laravel_database_orderStatus") // 广播频道名称
    .listen(".anyName", e => {
        // 消息名称
        console.log(e); // 收到消息进行的操作,参数 e 为所携带的数据
    });
    </script>
</body>

</html>

Set api router🎜
npm install && npm run watch

Installer l'échafaudage frontal🎜🎜🎜rrreee🎜🎜

Redis🎜🎜Parce que nous utilisons la diffusion Redis, nous devons installer la bibliothèque Predis : 🎜🎜 🎜rrreee🎜🎜
🎜La diffusion Redis utilise la fonction pub/sub Redis pour diffuser, cependant, vous devez la coupler avec un serveur Websocket qui peut accepter les messages Redis afin de diffuser des messages sur le canal Websocket🎜
🎜Lorsque Redis diffuse un événement, l'événement sera publié sur le canal spécifié, les données transmises sont une chaîne au format JSON, qui contient le nom de l'événement, les données de charge utile et l'utilisateur qui a généré l'ID de socket d'événement🎜

Installer laravel -echo-server Abonnez-vous à Redis Sub🎜🎜Si vous utilisez pusher, utilisez simplement laravel. Si vous utilisez 🎜Redis + socket.io🎜, vous devez utiliser un projet open source <. a href="https://github.com/tlaverdure%20/laravel-echo-server" target="_blank">laravel-echo-server

. Nous allons donc maintenant utiliser laravel-echo-server🎜🎜installation globale🎜🎜🎜rrreee🎜🎜

pour initialiser laravel -echo- server🎜
🎜rrreee🎜🎜

Démarrez laravel-echo-server🎜🎜🎜rrreee🎜🎜
  • Ce sera sortie après un démarrage réussi Les journaux suivants
rrreee

Test de diffusion 🎜🎜Exécuté sur le navigateurhttp://votrehôte/ api/ship ?id=16🎜🎜🎜rrreee🎜🎜
  • Connexion laravel-echo-server réussie !

Installer les dépendances de laravel-echo 🎜🎜Puisque le front-end utilise laravel-echo Pour écouter la radio, l'implémentation sous-jacente que nous avons choisie est socket.io. Nous devons donc d'abord ajouter laravel-echo et à <code class="langage-plaintext highlighter-rouge">package.json Dépendances de class="langage-plaintext highlighter-rouge">socket.io🎜🎜🎜rrreee🎜🎜🎜Modifiez Resource/js/bootstrap.js et ajoutez le code suivant🎜🎜🎜rrreee🎜🎜

测试页面

resources/views/ 下建立页面 test.blade.php 内容为

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="">
    <title>News Room</title>
    <link href="" rel="stylesheet">
</head>

<body>
    <div class="content">
        News Room
    </div>
    <script src=""></script>
    <script>
        Echo.channel("laravel_database_orderStatus") // 广播频道名称
    .listen(".anyName", e => {
        // 消息名称
        console.log(e); // 收到消息进行的操作,参数 e 为所携带的数据
    });
    </script>
</body>

</html>

js 代码的意思是收听 news 通道内的 News 事件对象,将接收到的事件在控制台打印出来。

基本构建

npm install && npm run watch

相关推荐:最新的五个Laravel视频教程

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!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent:Parlons du conteneur de services dans LaravelArticle suivant:Parlons du conteneur de services dans Laravel

Articles Liés

Voir plus