Der Nutzungsprozess von Echo im Laravel-Framework

In diesem Artikel werde ich Ihnen Schritt für Schritt die Verwendung von Echo im Laravel-Framework vorstellen Es kann Freunden in Not helfen. Da gibt es nicht viel zu sagen, kommen wir gleich zum Inhalt.

In der offiziellen Dokumentation wird die Verwendung von Pusher oder laravel-echo-server empfohlen (ein NodeJS-Server, der mit Socket.IO + WebSocket implementiert wird).

In China wird die Verwendung von Pusher immer noch nicht empfohlen, da die Zugriffsgeschwindigkeit beeinträchtigt wird und es sich immer noch um ein kommerzielles Produkt handelt.

Nutzen Sie heute die einfachsten „16“ Schritte, um die Code-Integration von laradock und laravel-echo-server zur Verwendung von Laravel Echo durchzuführen.

Aufbau der Grundumgebung

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

Okay, beginnen wir mit der Eingabe in den Browser: http: //localhost, die Website läuft

Mit Laravel Echo Server

Weil Laradock „Laravel“ integriert Echo Server“, sodass wir ihn sehr bequem nutzen können Laravel Echo.

// 8. 配置广播驱动和 redis 服务器
BROADCAST_DRIVER=redis
REDIS_HOST=redis

// 9. 安装 predis
composer require predis/predis

Nachdem wir die Backend-Konfiguration vorbereitet haben, beginnen wir mit der Installation des Front-End-Plug-Ins. Schließlich handelt es sich bei Laravel Echo um ein Front-End-Tool.

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

instanziiert resources/assets/js/bootstrap.js in 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
// });

Dann können wir die Echo-Instanz verwenden, um vom Backend gesendete Broadcasts oder Benachrichtigungen abzuhören.

Zuerst verwenden wir die angegebene ExampleComponent-Transformation, um einen Echo-Listener zu erstellen, warten auf das Eintreffen der Daten und zeigen sie dann auf der Seite an. Der Code ist einfach:

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

Wir fügen ein rsserstelltes Ereignis RssCreatedEvent im Backend hinzu und erben ShouldBroadcast.

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

Wir verwenden gefälschte Daten und lassen sie die aktuelle Zeit zurückgeben, um die Anzeige des Effekts zu erleichtern:

<?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()];
    }
}

Dann können wir eine geplante Aufgabe erstellen und sie jede Minute senden lassen:

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

Lassen Sie die Homepage schließlich die vue-Komponente laden und aktualisieren Sie den Test:

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

Hinweis: Sie müssen header

<meta>

in

einführen, um das Frontend zu kompilieren:

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

Aktualisieren Sie die Webseite, um den laufenden Effekt zu sehen:

Wie gewünscht wird die Übertragung jede Minute durchgeführt, und Das Frontend laravel-echo lauscht und erfasst die Übertragung, liest dann die Daten und zeigt sie an.

Zusammenfassung

Bisher haben wir folgende Technologien verwendet:

1. Die Verwendung von Laradock

2 von Laravel Echo Server

3. Broadcast-Ereignis

4.event() Hilfsfunktion

5.$geplante Aufgabe planen

6.Laravel Echo We Grundsätzlich kann

verwendet werden. Für eine ausführlichere Verwendung wird empfohlen, die offizielle Website-Dokumentation zu lesen. Laravel Echo

Abschließend empfehle ich Ihnen dringend,

zum Bereitstellen der Docker-Entwicklungsumgebung zu verwenden, da laradock meiner Meinung nach alle Tools und Umgebungen vorbereitet hat, die Sie verwenden möchten. laradock

Das Obige ist der gesamte Inhalt dieses Artikels. Weitere Laravel-Inhalte finden Sie im

Einführungs-Tutorial zum Laravel-Framework.

Empfohlene verwandte Artikel:

Code-Analyse des Autoloader-Moduls im Laravel-Framework

Eingehende Analyse des Darstellungsmodus im Laravel-Framework

Verwandte Kursempfehlungen:

Die neuesten fünf Laravel-Video-Tutorial-Empfehlungen im Jahr 2017

Das obige ist der detaillierte Inhalt vonDer Nutzungsprozess von Echo im Laravel-Framework. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!