Utilisez Laravel Echo en 16 étapes simples

Permettez-moi de commencer par quelques mots en anglais et de parler du rôle de Laravel Echo :

L'un de mes projets préférés dans l'écosystème Laravel est Echo . Echo permet des applications Web en temps réel grâce à l'utilisation de WebSockets et se connecte directement aux fonctionnalités de diffusion d'événements de Laravel. Cela signifie que les développeurs peuvent utiliser une API PHP familière pour envoyer des données en temps réel. être un système de notification ou de chat.

Traduction "Courte"

Extrait de : https://www.imarc.com/blog/realtime-notifications-with-laravel-echo-server- docker-and-traefik

La documentation officielle recommande d'utiliser Pusher ou laravel-echo-server (un serveur WebSocket implémenté à l'aide de NodeJS + Socket.IO).

Recommandation : tutoriel Laravel

En Chine, je ne recommande personnellement pas d'utiliser Pusher, car la vitesse d'accès est affectée et il s'agit toujours d'un produit commercial.

Aujourd'hui, utilisez les "16" étapes les plus simples pour parcourir le code permettant d'intégrer laradock et laravel-echo-server afin d'utiliser Laravel Echo.

Construire l'environnement de base

// 1. new project
laravel new echolearning
// 2. 使用 laradock
git clone https://github.com/Laradock/laradock.git
// 3. 创建 .env
cp env-example .env
// 4. 创建 container
docker-compose up -d php-worker laravel-echo-server nginx redis

// 5. 进入 workspace 容器
docker-compose exec --user=laradock workspace bash
// 6. 安装插件
// 6.1 推荐使用 laravel-china 维护的 composer 国内镜像
composer config -g repo.packagist composer https://packagist.laravel-china.org
// 6.2 并行下载插件
composer global require "hirak/prestissimo"
// 6.3 配置 yarn 国内镜像
yarn config set registry 'https://registry.npm.taobao.org'
// 注：以上可以在 laradock 中配置
// 6.4 执行安装
composer install
yarn install
// 7. 创建 .env 和 key
cp .env.example .env
php artisan key:generate

D'accord, commençons à taper dans le navigateur : http://localhost, et le le site Web fonctionnera Get up

Utiliser Laravel Echo Server

Parce que laradock intègre "Laravel Echo Server", nous pouvons l'utiliser très idéalement Laravel Echo.

// 8. 配置广播驱动和 redis 服务器
BROADCAST_DRIVER=redis
REDIS_HOST=redis
// 9. 安装 predis
composer require predis/predis

Après avoir préparé la configuration du backend, nous avons commencé à installer le plug-in front-end. Après tout, Laravel Echo est un outil front-end.

// 10. 安装 socket.io-client laravel-echo
yarn add socket.io-client laravel-echo

Instantiate Echo dans resources/assets/js/bootstrap.js :

// 11. 实例化 Echo
import Echo from 'laravel-echo'
window.io = require('socket.io-client')
window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001'
});
// Laravel 官方推荐使用 pusher
// window.Pusher = require('pusher-js');
// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: process.env.MIX_PUSHER_APP_KEY,
//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
//     encrypted: true
// });

Ensuite, nous pouvons utiliser l'instance Echo pour écouter les diffusions ou les notifications envoyées par le backend.

Tout d'abord, nous utilisons le SampleComponent donné pour le modifier, créer un écouteur Echo, attendre l'arrivée des données, puis l'afficher sur la page. Le code est simple :

<template>
    <div>
        <div class="row justify-content-center">
            <div>
                <div class="card card-default">
                    <div>Example Component</div>
                    <div>
                        <ul>
                            <li v-for="name in names" :key="name">{{ name }}</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                names: []
            }
        },
        mounted() {
            let that = this
            // 12. 创建 Echo 监听
            Echo.channel(&#39;rss&#39;)
                .listen(&#39;RssCreatedEvent&#39;, (e) => {
                    that.names.push(e.name)
                });
        }
    }
</script>

Nous ajoutons un événement créé par rss RssCreatedEvent dans le backend et héritons de ShouldBroadcast.

// 13. 创建 RssCreatedEvent 事件
php artisan make:event RssCreatedEvent

Nous utilisons de fausses données et les laissons renvoyer l'heure actuelle pour faciliter la visualisation de l'effet :

<?php
namespace App\Events;
use Carbon\Carbon;
use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
class RssCreatedEvent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;
    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }
    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        // 14. 创建频道
        return new Channel(&#39;rss&#39;);
    }
    /**
     * 指定广播数据。
     *
     * @return array
     */
    public function broadcastWith()
    {
        // 返回当前时间
        return [&#39;name&#39; => Carbon::now()->toDateTimeString()];
    }
}

Ensuite, nous pouvons créer une tâche planifiée et la laisser diffuser toutes les minutes :

protected function schedule(Schedule $schedule)
{
    // 15. 每隔一分钟执行一次
    $schedule->call(function () {
        event(new RssCreatedEvent());
    })->everyMinute();
}

Enfin, laissez la page d'accueil charger le composant vue, actualisez le test :

<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
    </head>
    <body>
    <div id="app">
        <example-component></example-component>
    </div>
    <script src="{{ asset(&#39;js/app.js&#39;) }}"></script>
    </body>
</html>

Remarque : Vous devez introduire

<meta name="csrf-token" content="{{ csrf_token() }}">

dans l'en-tête pour compiler le front-end :

// 16. 运行 watch
yarn run watch-poll

Actualisez la page Web, vérifiez l'effet de fonctionnement :

Comme nous le souhaitons, la diffusion est diffusée toutes les minutes. Le laravel-echo frontal écoute et. capture la diffusion, puis lit les données et les affiche.

Résumé

Jusqu'à présent, les technologies que nous avons utilisées sont :

1 L'utilisation de laradock

2. du serveur d'écho Laravel

3. Événement de diffusion

4.Fonction auxiliaire event()

5.$planifier la tâche planifiée

6.Utilisation de Laravel Echo

Nous pouvons essentiellement utiliser Laravel Echo. Quant à une utilisation plus approfondie, il est recommandé de consulter la documentation du site officiel.

Enfin, je vous recommande fortement d'utiliser laradock pour déployer l'environnement de développement Docker, car je pense que laradock a préparé tous les outils et environnements que vous souhaitez utiliser.

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!