走一遍 Laravel-Echo 的使用

走一遍 Laravel-Echo 的使用

官方文档推荐使用 Pusher 或者 laravel-echo-server (是一个使用 NodeJS + Socket.IO 实现的 WebSocket 服务端)。
在国内，不使用 Pusher，访问速度有所影响，而且其还是一个商业产品。

配置 Echo Server

// 8. 配置广播驱动和 redis 服务器
BROADCAST_DRIVER=redis
REDIS_HOST=redis
// 9. 安装 predis
composer require predis/predis

准备好后端配置后，我们开始安装前端插件，毕竟 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 实例，监听后端发过来的广播或者通知了。

<template>
    <p class="container">
        <p class="row justify-content-center">
            <p class="col-md-8">
                <p class="card card-default">
                    <p class="card-header">Example Component</p>
                    <p class="card-body">
                        <ul>
                            <li v-for="name in names" :key="name">{{ name }}</li>
                        </ul>
                    </p>
                </p>
            </p>
        </p>
    </p>
</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。

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)
{
    // 每隔一分钟执行一次
    $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>
    <p id="app">
        <example-component></example-component>
    </p>
    <script src="{{ asset('js/app.js') }}"></script>
    </body>
</html>
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 实例，监听后端发过来的广播或者通知了。

<template>
    <p class="container">
        <p class="row justify-content-center">
            <p class="col-md-8">
                <p class="card card-default">
                    <p class="card-header">Example Component</p>
                    <p class="card-body">
                        <ul>
                            <li v-for="name in names" :key="name">{{ name }}</li>
                        </ul>
                    </p>
                </p>
            </p>
        </p>
    </p>
</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。

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)
{
    // 每隔一分钟执行一次
    $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>
    <p id="app">
        <example-component></example-component>
    </p>
    <script src="{{ asset('js/app.js') }}"></script>
    </body>
</html>

注：需要在 header 引入

<meta name="csrf-token" content="{{ csrf_token() }}">

编译前端

yarn run watch-poll

如我所愿，每隔一分钟，广播一次，前端 laravel-echo 监听并捕获该广播，然后读取数据，展示出来。

总结

到这里为止, 用到的技术:

  1. laravel echo server 的使用
  2. 广播事件
  3. event() 辅助函数
  4. $schedule 定时任务
  5. Laravel Echo 的使用
    Happy coding !!!



​

日记本
© 著作权归作者 曾达威 所有
举报文章

如果觉得我的文章对您有用，请随意赞赏。您的支持将鼓励我继续创作！

赞赏支持
被以下专题收入，发现更多相似内容
＋ 收入我的专题
推荐阅读 更多精彩内容