簡單 16步走一遍 Laravel Echo 的使用

先飈幾句英文，說說 Laravel Echo 的做用：

One of my favorite projects in the Laravel ecosystem is Echo. Echo enables real-time web applications through the use of WebSockets and hooks directly into Laravel's event broadcasting features. This means developers can use a familiar PHP API to send real-time data. A very common use-case for this type of functionality would be a notification or chat system.

翻譯「略」

摘自：www.imarc.com/blog/realti…

官方文檔推薦使用 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>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card card-default">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        <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('rss')
                .listen('RssCreatedEvent', (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('rss');
    }

    /** * 指定廣播數據。 * * @return array */
    public function broadcastWith() {
        // 返回當前時間
        return ['name' => Carbon::now()->toDateTimeString()];
    }
}
複製代碼

而後咱們就能夠作一個定時任務了，讓它每隔一分鐘，廣播一次：

protected function schedule(Schedule $schedule) {
    // 15. 每隔一分鐘執行一次
    $schedule->call(function () {
        event(new RssCreatedEvent());
    })->everyMinute();
}
複製代碼

最後讓首頁加載 vue 組件，刷新測試:

<!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('js/app.js') }}"></script>
    </body>
</html>
複製代碼

注：須要在 header 引入

<meta name="csrf-token" content="{{ csrf_token() }}">
複製代碼

編譯前端：

// 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 都爲你準備好了。

「完」