Laravel + Laravel Echo + Pusher 網頁推送

helong3314發表於2021-02-20
Laravel網頁

1. 應用場景：客戶端網頁無刷信實時獲取資料

2. 測試環境

  • Laravel 5.7
  • PHP 7.2

3. 使用laravel new 命令新建專案

3. laravel new mytest

4. 目前有兩種廣播機制可選：

  • pusher：laravel自帶方案，但是有使用限制，需要收費

  • Redis + socket.io：無限制

    我們今天先採用第一種方案，快速實現需求。

5. 啟用廣播服務

註冊 BroadcastServiceProvider，開啟 app/config/app.php 找到 ‘provides’ 屬性，將 BroadcastServiceProvider 前的註釋去掉

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

  1. 設定廣播路由

    開啟廣播路由配置檔案 app/routes/channels.php , 增加一個新的廣播通道 message. 因為是公共頻道，函式直接返回true就可以了。

Broadcast::channel('message', function ($user, $id) { return true; });

7. 設定佇列驅動

由於廣播機制是基於佇列（queue）機制實現的。所以queue的儲存設定會直接決定廣播事件的儲存位置。我們這裡是測試，所以先設定成同步即可。生產部署可以用redis驅動。 編輯 .env 檔案，修改 QUEUE_DRIVER

QUEUE_CONNECTION=sync

  1. 建立Event

使用以下命令建立 Message Event物件

php artisan make:event Message

上面命令新建了以下檔案： app/Events/Message.php ， 開啟該檔案進行以下修改：

  • 增加對 ShouldBroadcast 的實現
  • 修改建構函式
  • 修改broadcastOn 方法，使用公共廣播通道 message
```php
<?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又透過以下引用在頁面被呼叫。

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


打包成功後會輸出以下日誌:



14\. **檢視成果**

在瀏覽器中訪問專案首頁, 我這裡是 http://127.0.0.1:8080 , 然後開啟開發者工具，切到console項下：

![eb462f2ae81beaa081d062c52bccdca5c88.jpg](https://cdn.learnku.com/uploads/images/202102/20/70645/jSnniXB3HR.webp!large)

我們在終端視窗，傳送一個sendMessage廣播：

php artisan sendMessage
```

然後回到測試頁面的控制檯，如果看到收到了一條廣播，就表示已經接收廣播成功。


轉載於:my.oschina.net/u/193006/blog/28771...

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章