Le processus d'utilisation d'Echo dans le framework Laravel

Dans cet article d'aujourd'hui, je vais partager avec vous l'utilisation d'echo dans le framework laravel. Le contenu de l'article est étape par étape. Il a fallu 16 étapes pour terminer un processus, j'espère. cela peut aider des amis dans le besoin. Pas grand chose à dire, passons directement au contenu.

La documentation officielle recommande d'utiliser Pusher ou laravel-echo-server (qui est un serveur NodeJS implémenté en utilisant Socket.IO + WebSocket).

En Chine, les particuliers ne recommandent toujours pas d'utiliser Pusher, car la vitesse d'accès en sera affectée, et il s'agit toujours d'un produit commercial.

Aujourd'hui, profitez des "16" étapes les plus simples pour passer par l'intégration du code de laradock et laravel-echo-server pour utiliser Laravel Echo.

Créer 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 dans le navigateur Entrez : http://localhost, le site Web est en cours d'exécution

Utilisation de Laravel Echo Server

Parce que laradock intègre "Laravel Echo Server", nous pouvons donc l'utiliser très facilement 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 commençons à 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

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

// 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.

Nous utilisons d'abord la transformation ExampleComponent donnée pour créer un Echo auditeur, attendons que les données arrivent, puis les affichons sur la page. Le code est simple :

<template>
    <p>
        </p>
<p>
            </p>
<p>
                </p>
<p>
                    </p>
<p>Example Component</p>

                    <p>
                        </p>
<ul>
                            <li>{{ name }}</li>
                        </ul>
                    
                
            
        
    
</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 rss événement créé RssCreatedEvent dans le backend et héritons ShouldBroadcast.

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

Nous utilisons de fausses données pour les ramener à l'heure actuelle pour une visualisation facile :

<?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 faire toutes les minutes, diffusée une fois :

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

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

nbsp;html>
getLocale() }}">
    
        <meta>
        <meta>
        <meta>
        <meta>
        <title>Laravel</title>
    
    
    <p>
        <example-component></example-component>
    </p>
    <script></script>
    

Remarque : header

>Compilez le front-end :

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

Actualisez la page Web pour voir l'effet de fonctionnement :

Comme nous le souhaitons , chaque minute, diffusée une fois, le front-end

écoute et capture la diffusion, puis lit les données et les affiche. laravel-echo

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.Laravel Echo We peut essentiellement utiliser

Pour une utilisation plus approfondie, il est recommandé de consulter la documentation du site officiel.

Laravel EchoEnfin, je vous recommande fortement d'utiliser

pour déployer l'environnement de développement Docker, car je pense que

a préparé tous les outils et environnements que vous souhaitez utiliser pour vous. laradocklaradockCe qui précède représente l'intégralité du contenu de cet article. Pour plus de contenu sur Laravel, veuillez prêter attention au

tutoriel d'introduction au framework Laravel

. Articles connexes recommandés :

Analyse du code du module Autoloader dans le framework Laravel

Analyse approfondie du mode d'apparence dans le framework Laravel

Recommandations de cours associées :

Cinq derniers didacticiels vidéo Laravel recommandés en 2017

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!