Laravel框架中Echo的使用過程

今天的這篇文章中給大家分享關於laravel框架中echo的使用，文章的內容是一步一步來的，用了16步走完一個過程，過程很清晰，希望可以幫助到有需要的朋友吧。話不多說，直接看內容。

官方文件推薦使用Pusher 或laravel-echo-server (是一個使用NodeJS Socket.IO# 實現的WebSocket 服務端)。

在國內，個人還是不建議使用 Pusher，訪問速度有所影響，而且其還是一個商業產品。

今天利用最簡單的「16」步，走一遍程式碼整合 laradock 和 laravel-echo-server 來使用 Laravel Echo。

建立基礎環境

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

好了，我們開始在瀏覽器輸入：http: //localhost，網站跑起來了

#使用Laravel Echo Server

因為laradock 整合了“ Laravel Echo Server」，所以我們很方便的使用到Laravel Echo。

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

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

準備好後端設定後，我們開始安裝前端插件，畢竟 Laravel Echo  是前端工具。

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

在resources/assets/js/bootstrap.js 實例化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
// });

接下來我們就可以使用Echo 實例，監聽後端發過來的廣播或通知了。

首先我們利用已經給的 ExampleComponent 改造下，創建 Echo 監聽，等待資料的到來，然後再顯示在頁面上。程式碼簡單：

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

我們在後端加入一個 rss 被建立的事件 RssCreatedEvent，並繼承 ShouldBroadcast#。

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

我們使用假數據，讓它返回當前的時間，方便查看效果：

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

然後我們就可以做一個定時任務了，讓它每隔一分鐘，廣播一次：

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

最後讓首頁載入vue 元件，刷新測試:

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

註：需要在header 引入

<meta>

編譯前端：

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

刷新網頁，查看運行效果：

#如我們所願，每隔一分鐘，廣播一次，前端laravel-echo 監聽並捕獲該廣播，然後讀取數據，展示出來。

總結

到目前為止，我們用到的技術都有：

1.laradock 的使用

2. laravel echo server 的使用

3.廣播事件

4.event() 輔助函數

5.$schedule 定時任務

6.Laravel Echo的使用

我們基本上可以使用Laravel Echo 了，至於更深入的使用，推薦查看官網文件。

最後再一次強烈推薦大家用laradock 來部署Docker 開發環境，因為你想要用到的工具和環境，相信laradock 都為你準備好了。

以上就是本篇文章的全部內容了，更多laravel內容請關注laravel框架入門教學。

相關文章推薦：

Laravel框架中Autoloader模組的程式碼分析

Laravel框架中外觀模式的深入解析

相關課程推薦：

2017年最新的五個Laravel影片教學推薦

#

以上是Laravel框架中Echo的使用過程的詳細內容。更多資訊請關注PHP中文網其他相關文章！