Heim > Artikel > PHP-Framework > 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.
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.
// 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
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('rss') .listen('RssCreatedEvent', (e) => { that.names.push(e.name) }); } } </script>
Wir fügen ein rss
erstelltes 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('rss'); } /** * 指定广播数据。 * * @return array */ public function broadcastWith() { // 返回当前时间 return ['name' => 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.
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
zum Bereitstellen der Docker-Entwicklungsumgebung zu verwenden, da laradock
meiner Meinung nach alle Tools und Umgebungen vorbereitet hat, die Sie verwenden möchten. laradock
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!