Laravel + Laravel Echo + Pusher 网页推送

最新推荐文章于 2023-02-14 15:57:06 发布

chengshun3560

最新推荐文章于 2023-02-14 15:57:06 发布

阅读量2k

点赞数

文章标签： php 前端数据库 ViewUI

原文链接：https://my.oschina.net/u/193006/blog/2877151

版权

1. 应用场景：客户端网页无刷信实时获取数据

2. 测试环境

Laravel 5.7
PHP 7.2

3. 使用laravel new 命令新建项目

3. laravel new mytest

4. 目前有两种广播机制可选：

pusher：laravel自带方案，但是有使用限制，需要收费
Redis + socket.io：无限制

我们今天先采用第一种方案，快速实现需求。

5. 启用广播服务

/*

* Application Service Providers...

*/

App\Providers\AppServiceProvider::class,

App\Providers\AuthServiceProvider::class,

App\Providers\BroadcastServiceProvider::class,

App\Providers\EventServiceProvider::class,

App\Providers\HorizonServiceProvider::class,

App\Providers\TelescopeServiceProvider::class,

6. 设置广播路由

打开广播路由配置文件 app/routes/channels.php , 增加一个新的广播通道 message. 因为是公共频道，函数直接返回true就可以了。

Broadcast::channel('message', function ($user, $id) {

return true;

});

7. 设置队列驱动

由于广播机制是基于队列（queue）机制实现的。所以queue的存储设置会直接决定广播事件的存储位置。我们这里是测试，所以先设置成同步即可。生产部署可以用redis驱动。编辑 .env 文件，修改 QUEUE_DRIVER

QUEUE_CONNECTION=sync

8. 建立Event

使用以下命令建立 Message Event对象

php artisan make:event Message

上面命令新建了以下文件： app/Events/Message.php ，打开该文件进行以下修改：

增加对 ShouldBroadcast 的实现
修改构造函数
修改broadcastOn 方法，使用公共广播通道 message

<?php

namespace App\Events;

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 Message implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;
    
    public $message;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct($message)
    {
        $this->message = $message;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new Channel('message');
    }
}

9.测试广播

接下来，我们要通过新增一个artisan命令来测试是否可以将广播发送到队列中。编辑 routes/console.php ，增加 sendMessage 命令

Artisan::command('sendMessage', function () {
    broadcast(new Message(date('Y-m-d h:i:s').": this is a new message"));
    $this->comment("message sent");
})->describe('Send message');

在命令行执行 sendMessage 命令：

php artisan sendMessage

命令行返回 "message sent", 说明队列就绪。

10. 安装pusher组件

composer require pusher/pusher-php-server "~3.0"

然后到 pusher官网注册一个账号，有免费版。 https://pusher.com/

注册登录后，新建一个应用，会生成以下数据,

app_id = "xxx"
key = "kkkkkkkkk"
secret = "ssssssssssssssss"
cluster = "xxx"

然后在项目环境文件 .env 中填入对应的数据。没有的常量自己可以增加。

BROADCAST_DRIVER=pusher

PUSHER_APP_ID=xxxxx
PUSHER_APP_KEY=kkkkkkkkk
PUSHER_APP_SECRET=ssssssssssssss
PUSHER_APP_CLUSTER=xxx

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

11. 网页客户端接收广播

前端接收广播需要 Laravel Echo + pusher 配合，所以需要安装相应的js包。

npm install --save laravel-echo pusher-js

上述包安装以后，打开 resources/assets/js/bootstrap.js 文件，你会发现在这个文件的结尾已经预先写上了 laravel-echo 的使用例子。把这段代码前端注释去掉，如果前面都配置正确，这里只要去掉注释即可。

import Echo from 'laravel-echo'

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
});

bootstrap.js 会被 resources/assets/js/app.js 调用。app.js又通过以下引用在页面被调用。

<script src="{{ mix('js/app.js') }}"></script>

12. 建立前端页面

我们就在首页欢迎页上测试，打开 resources/views/welcome.blade.php, 进行相应修改。确认头部包含csrf-token 验证的meta标签。这个必须！！！

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Laravel</title>
</head>
<body>
<div class="content">
    Laravel
</div>
<script src="{{ mix('js/app.js') }}"></script>
<script>
    Echo.channel('message')
        .listen('Message', (e) => {
        console.log(e.message);
    });
</script>
</body>
</html>

13. 基本构建

在打开浏览器访问页面之前，我们先进行一些基本的环境构建。

安装js依赖包

npm install

打包js和css，这步作用是压缩、优化合并js，css文件，并生成相应文件到public目录下。

npm run dev

打包成功后会输出以下日志:

 DONE  Compiled successfully in 4847ms                                                                                                                                       12:36:20

       Asset     Size  Chunks                    Chunk Names
  /js/app.js  1.68 MB       0  [emitted]  [big]  /js/app
/css/app.css   198 kB       0  [emitted]         /js/app

14. 查看成果

在浏览器中访问项目首页, 我这里是 http://127.0.0.1:8080 , 然后打开开发者工具，切到console项下：

我们在终端窗口，发送一个sendMessage广播：

php artisan sendMessage

然后回到测试页面的控制台，如果看到收到了一条广播，就表示已经接收广播成功。

转载于:https://my.oschina.net/u/193006/blog/2877151

chengshun3560

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Laravel + Laravel Echo + Pusher 网页推送

1.应用场景：客户端网页无刷信实时获取数据 2. 测试环境 Laravel 5.7 PHP 7.2 3. 使用laravel new 命令新建项目 3. laravel new mytest 4. 目前有两种广播机制可选： pusher：lar...
复制链接

扫一扫