PusherドライバーをベースにしたLaravelイベントブロードキャスト (その1)

注: この記事は主に、プッシャーを使用したリアルタイム Laravel アプリの構築に基づいています。

この記事では主に、Pusher パッケージを使用してリアルタイム通信機能を備えた Laravel APP を開発する方法を紹介します。チュートリアル全体はわずか 2 時間でスムーズに完了します。同時に、作成者は開発プロセス中にいくつかのスクリーンショットとコードを貼り付けて、読み取り効率を向上させます。

1. チュートリアル関連

このチュートリアルの必要条件:

• Composer がインストールされている

• 基本的な理解PHP

• Laravel を基本的に理解している

• jQuery を基本的に理解している

• github アカウントを持っている

注: Laravel は人気のある PHP フルスタック フレームワーク、composer は PHP パッケージ マネージャー、jQuery は DOM ツリーを操作する JavaScript フレームワークです。何も理解できない場合は、チュートリアルを見る前に、Google で 30 分かけて基本的な内容を検索することをお勧めします。ブロックされた場合はどうすればよいですか? github でランタンを検索するとわかります。

1.1 プッシャーとは何ですか?

プッシャーは、クライアントとサーバー間のリアルタイム中間層であり、サーバーがクライアントにデータを送信できるように、WebSocket または HTTP を介してクライアントとの永続的な接続を実装します。リアルタイムで。一言で言えば、永続的なリンクを実装するパッケージです。

1.2 プッシャーの目的

(1) 通知/シグナル

通知は最も単純な例であり、最も頻繁に使用されます。シグナルには UI がない点を除けば、シグナルは通知の一種とみなすこともできます。

(2) アクティビティ ストリームアクティビティ ストリーム (フィード) はソーシャル ネットワークの中核です。たとえば、WeChat モーメントのいいねとコメントでは、A は B のいいねをリアルタイムで見ることができ、B は A のコメントをリアルタイムで見ることができます。

(3) ダッシュボードデータパネルへの投票数のリアルタイム表示や気象状況のリアルタイム表示など、リアルタイムデータの可視化。

(4) チャット

WeChatなどのチャット情報をリアルタイムに表示します。

待ってください。詳細については、「Pusher の使用例」を参照してください。

2. Pusher の主な内容には、主に Pusher アカウントの登録、PHP プログラムへの Pusher ID とキーの登録、および Pusher の PHP パッケージとの統合が含まれます。 JavaScript パッケージを入力し、Pusher プログラムをデバッグする方法を説明します。

2.1 Pusher アカウントの登録

Pusher アカウントの登録: ここで登録できます: プッシャー登録 アカウントの登録は主に、登録後に appid、secret、key の 3 つの認証キーを同時に取得します。 、個人ページに入り、Pusher の Pusher Debug Console を使用してインターフェイスの呼び出しステータスを表示できます。 github アカウントを使用して登録およびログインできます。

登録が成功したら、個人用バックエンド パネルに入り、新しいアプリケーション名を作成できます。同時に、右側の 2 番目のタブにもデバッグがあります。コンソールは、インターフェイス呼び出しステータスのデバッグと表示に使用されます。後で必要になります:

2.2 Laravel プログラムのインストール 最初にコンポーザーをグローバルにインストールします:

    curl -sS https://getcomposer.org/installer | php    mv composer.phar /usr/local/bin/composer

空のコンポーネントを作成します。

composer create-project laravel/laravel mylaravelapp --prefer-dist

2.3 Pusher 認証キーをプロジェクトのルート ディレクトリにある .env ファイルに追加します。 .env ファイルは、Laravel プロジェクト設定ファイルです。

PUSHER_APP_ID=YOUR_APP_IDPUSHER_KEY=YOUR_APP_KEYPUSHER_SECRET=YOUR_APP_SECRET

次に、Pusher を Laravel のバックエンドに統合するには、Laravel Pusher Bridge を使用する方法と、Laravel Event Broadcaster を使用する方法があります。

2.4 Laravel Pusher Bridge PHP パッケージのリソース ライブラリでプッシャーを見つけてインストールします。

composer require vinkla/pusher

インストール後、サービスを登録します。サービス プロバイダーは主に、ダウンロードしたばかりのサービス (パッケージ) を配置します。 Laravel コンテナに登録します。各サービス (パッケージ) には、対応するサービスプロバイダーがあります:

Vinkla\Pusher\PusherServiceProvider::class,

このパッケージの構成ファイルを config フォルダーにコピーします。pusher.php が多すぎます。ファイル:

php artisan vendor:publish

config/pusher.php の構成ファイルを更新します。 ファイル:

'connections' => [    'main' => [        'auth_key' => env('PUSHER_KEY'),        'secret' => env('PUSHER_SECRET'),        'app_id' => env('PUSHER_APP_ID'),        'options' => [],        'host' => null,        'port' => null,        'timeout' => null,    ],

ここにはインストールのバグがあります: config/app にもある場合 If Facade .phpに設定するとエラーが報告されるため、設定する必要はありません。 IlluminateSupportFacadesApp::make('pusher') を使用して、Laravel の Container コンテナから Pusher サービスを取り出すことができます。一般に、Facade を使用してコンテナからサービスを削除できますが、このパッケージは使いにくく、バグがあります。 次の文を config/app.php の aliases[] 配列に追加する必要はありません。

'Pusher' => Vinkla\Pusher\Facades\Pusher::class

このパッケージを構成してインストールした後、使用できるかどうかを確認してみましょう:

get('/bridge', function() {    $pusher = \Illuminate\Support\Facades\App::make('pusher');    $pusher->trigger( 'test-channel',                      'test-event',                       ['text' => 'I Love China!!!']                    );    return 'This is a Laravel Pusher Bridge Test!';});

著者は MAMP PRO 環境にいます。Apache ポートは 8888 です。それを入力してくださいブラウザの http://laravelpusher.app:8888/bridge ルートでは、This is a Laravel Pusher Bridge Test! が正しく返され、プッシャーがトリガーされたことを示します。プッシャー デバッグ コンソールのバックグラウンドでトリガーされているかどうかを確認できます:

確かに、非常に簡単ですよね。

2.5 Laravel イベントブロードキャスター

Laravel5.1以后提供了Event Broadcaster功能，配置文件是config/broadcasting.php，并且默认驱动是pusher: 'default' => env('BROADCAST_DRIVER', 'pusher') ，如果不是可以在.env文件中添加BROADCAST_DRIVER=pusher。总之，不需要修改啥配置了。broadcasting.php中也是要读取pusher的密钥：

'connections' => [        'pusher' => [            'driver' => 'pusher',            'key' => env('PUSHER_KEY'),            'secret' => env('PUSHER_SECRET'),            'app_id' => env('PUSHER_APP_ID'),            'options' => [                //            ],        ],        ...

既然事件广播，那就需要生成事件和对应的监听器，在app/Providers/EventServiceProvider.php中写入任何一个事件名称如SomeEvent，和对应的监听器如EventListener：

protected $listen = [        'App\Events\PusherEvent' => [            'App\Listeners\PusherEventListener',        ],    ];

然后在项目根目录生成事件和对应的监听器：

php artisan event:generate

Laravel中事件如果需要广播，必须实现IlluminateContractsBroadcastingShouldBroadcast接口，并且事件中public属性都会被序列化作被广播的数据，即public属性数据会被发送。同时，还需要在broadcastOn()函数中写入任意字符的广播频道：

class PusherEvent extends Event implements ShouldBroadcast{    use SerializesModels;    public $text, $id;    /**     * Create a new event instance.     *     * @return void     */    public function __construct($text, $id)    {        $this->text = $text;        $this->id   = $id;    }    /**     * Get the channels the event should be broadcast on.     *     * @return array     */    public function broadcastOn()    {        return ['laravel-broadcast-channel'];    }}

好，然后触发这个事件，为了简单，就直接在路由中触发：

Route::get('/broadcast', function () {    event(new \App\Events\PusherEvent('Great Wall is great ', '1'));    return 'This is a Laravel Broadcaster Test!';});

在Pusher Debug Console中查看触发结果：

It is working! 。

其中'laravel-broadcast-channel'就是Channel属性，AppEventsPusherEvent是Event属性，PusherEvent的public属性是被广播的数据，为了检验只有public属性被广播：

class PusherEvent extends Event implements ShouldBroadcast{    use SerializesModels;    public $text, $id;    private $content;    protected $title;    /**     * Create a new event instance.     *     * @return void     */    public function __construct($text, $id, $content, $title)    {        $this->text    = $text;        $this->id      = $id;        $this->content = $content;        $this->title   = $title;    }    /**     * Get the channels the event should be broadcast on.     *     * @return array     */    public function broadcastOn()    {        return ['laravel-broadcast-channel'];    }}//routes.php中Route::get('/broadcast', function () {    event(new \App\Events\PusherEvent('This is a public attribute', '2', 'This is a private attribute', 'This is a protected attribute'));    return 'This is a Laravel Broadcaster Test, and private/protected attribute is not fired!';});

重新触发查看Pusher Debug Console，的确只有public属性数据被广播：

2.6 Laravel Pusher Bridge vs Laravel Event Broadcaster

使用Laravel Pusher Bridge可以不必被Event Broadcaster的一些规则束缚，并且可以通过pusher实例来获取Pusher提供的其他服务如验证频道订阅，查询程序状态等等。不过使用Laravel Event Broadcaster可以实现模块解耦，当有其他的更好的push包时可以快速切换别的服务。可以选择适合的方法。

2.7 调试Pusher服务端集成包 本小节主要涵盖使用Laravel Pusher Bridge方法作为事件广播的调试。使用Pusher PHP包的Log模块并结合Laravel的Log模块进行调试：

use Illuminate\Support\Facades\App;use Illuminate\Support\Facades\Log;class LaravelLoggerProxy{    public function log($msg)    {        Log::info($msg);    }}class AppServiceProvider extends ServiceProvider{    /**     * Bootstrap any application services.     *     * @return void     */    public function boot()    {        $pusher = App::make('pusher');        $pusher->set_logger();    }    ...

作者在个人环境中，输入 http://laravelpusher.app:8888/bridge ，在storage/logs/laravel.log中会出现类似如下的调试信息，可以先清空下laravel.log文件再查看：

[2016-04-25 02:25:10] local.INFO: Pusher: ->trigger received string channel "test-channel". Converting to array.  [2016-04-25 02:25:10] local.INFO: Pusher: curl_init( http://api.pusherapp.com:80/apps/200664/events?auth_key=ae93fbeaff568a9223d3&auth_signature=ff8ce0b76038aea6613b4849ddda1b2bd0b14976738e8751264bf8f3cab3bc41&auth_timestamp=1461551110&auth_version=1.0&body_md5=bde7265f1c9da80ce0a3e0bde5886b5a )  [2016-04-25 02:25:10] local.INFO: Pusher: trigger POST: {"name":"test-event","data":"{\"text\":\"I Love China!!!\"}","channels":["test-channel"]}  [2016-04-25 02:25:11] local.INFO: Pusher: exec_curl response: Array(    [body] => {}    [status] => 200)

调试信息可看到，使用pusher是往这个接口 http://api.pusherapp.com:80/apps/200664/events?auth_key=&auth_signature=&auth_timestamp=&auth_version=&body_md5= 发POST数据，发的数据主要是3个：频道channels(如:test-channel)，事件event(如:test-event)和数据data(如:I love China)。最后返回响应，状态200，就表示发送成功了。如果输入路由 http://laravelpusher.app:8888/broadcast 则laravel.log中不打印调试消息。

有时间可以看下Laravel Debug Bar，就是一个供Laravel调试的包，地址： Laravel Debug Bar ，这大牛还写了个Laravel IDE Helper也非常好用： Laravel IDE Helper 。。强烈建议把这两个包安装到你的项目中，每一个新Laravel项目都可以安装下。。

2.8 使用Pusher JavaScript包

好，既然服务端可以工作正常了，那现在开始研究下客户端来接收事件触发时服务端发送来的数据。

可以新建一个view，或者直接使用已有的welcome.blade.php这个view，但先把这个文件的注销掉免得每次加载有些慢。在文件中写入代码：

<script src="//js.pusher.com/3.0/pusher.min.js"></script><script>var pusher = new Pusher("{{env("PUSHER_KEY")}}")var channel = pusher.subscribe('test-channel');channel.bind('test-event', function(data) {  console.log(data);  console.log(data.text);});</script>

先加载pusher的js包，再利用pusher对象去订阅频道，再用频道绑定触发事件，闭包返回接收到的数据。这里订阅Laravel Pusher Bridge里写的test-channel频道，绑定test-event事件，打印text属性的数据，我们知道上文中我们写入了数据为['text' => 'I Love China!!!']，那客户端打印的数据应该是'I Love China!!!'，看看是不是。在路由中输入 http://laravelpusher.app:8888/bridge 看看Pusher Debug Console发生什么：

然后新开一个标签页再输入路由看看console窗口打印信息：

It is working!

可以多次刷新路由，在两个标签页面间切换看看打印的数据。A页面触发事件B页面能接收到数据；B页面触发事件A页面接收到数据。

2.9 调试Pusher JavaScript客户端 可以使用Pusher Debug Console控制面板查看触发情况，当然可以在客户端打印调试信息：

<script>            Pusher.log = function(msg) {                console.log(msg);            };            var pusher = new Pusher("{{env("PUSHER_KEY")}}");            var channel = pusher.subscribe('test-channel');            ...

看打印信息知道，开始是connecting，然后连接成功connected，然后频道订阅成功subscription_succeeded，最后事件也被接收且数据也发送成功Event recd。

概要: 前のパートには、Pusher サービス アカウントの登録、Laravel リアルタイム APP のインストール、Pusher サーバーの統合とデバッグ、および Pusher クライアントの統合とデバッグが含まれています。次の部分では、主にリアルタイム通知、アクティビティ ストリーム、チャットなどの例を使用して説明します。