简单 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.

翻译「略」

摘自:https://www.imarc.com/blog/realtime-notifi...

官方文档推荐使用 Pusher 或者 laravel-echo-server (是一个使用 NodeJS + Socket.IO 实现的 WebSocket 服务端)。

在国内,个人还是不推荐使用 Pusher,访问速度有所影响,而且其还是一个商业产品。

今天利用最简便的「16」步,走一遍代码集成 laradocklaravel-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 都为你准备好了。

「完」

本作品采用《CC 协议》,转载必须注明作者和本文链接
本帖由系统于 5年前 自动加精
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 25
xingchen

这个是否适合做一些字幕类的应用?大家能举一些适合这方便的应用吗

5年前 评论

我这个为啥总是连不上呀?

file

5年前 评论
senhanxiao 3年前

@839891627 看看是不是没开启laravel-echo-server container或者服务

5年前 评论
Toiu

收藏

5年前 评论

请问下请求为什么会包含csrf_token,能隐藏嘛?关闭开发模式也没用,感觉这样不是很安全。类似下面的链接请求,

file

5年前 评论

@anyuzhe laravel-echo-server 一直在监听 redis 的事件发布,数据是laravel-echo-server传输给前端的,不需要队列

5年前 评论

@anyuzhe

file
不好意思,忘了这个了,在 laravel 把事件 推给 redis 的时候,这里会使用的队列,广播通知需要使用队列

5年前 评论

编译完成后,总是报错:

Uncaught SyntaxError: Unexpected end of input

vue 哪里有错啊,符号都匹配了 啊,


<template>
    <div class="container">

        <ul>
            <li v-for="name in names" >{{name}}</li>
        </ul>

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

file

5年前 评论

就服你那句“翻译「略」”

5年前 评论

welcome.blade.php

file

file

不要慌,清下浏览器缓存

5年前 评论

讲的不错 按照步骤弄下来 结果page 只有 Example Component 没有时间
怎么debug 那个 broadcast呢
console 里也没有新的request 出来
是忘记了什么么?

5年前 评论

建议加上https://learnku.com/laravel/t/13101/using-laravel-echo-server-to-build-real-time-applications 文章中的 Laravel-echo-server的安装与运行部分,要不会一直报错

5年前 评论

博主可否在文章里加入一下使用工具的版本号。

4年前 评论

问下,前后端分离 laravel-echo-server 是前端进行 安装吗

4年前 评论
hello-laravel 4年前

我就想问下laradock定时任务怎么启动,文档写的不清不楚的。

4年前 评论
hello-laravel 4年前
hello-laravel 4年前
waney (作者) 4年前
waney (作者) 4年前

老铁如何知道 laravel-echo 用户是否下线

3年前 评论
playmaker

我现在 dnmp 环境部署的项目 ,laravel + Dcat admin 这种 后台上列表页能实现实时更新数据的显示吗?如果可以的话 ,有哪些可行的方案。

3年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!