--- title: laravel5.3でwebsocket通信のチュートリアル(Pusher) tags: Laravel Pusher websocket 非同期処理 PHP author: sizukutamago slide: false --- **laravel5.4がリリースされましたが5.3の記事です** #こんな感じ ![test.gif](https://qiita-image-store.s3.amazonaws.com/0/100352/d41cdb14-7ac1-86b3-0458-a38921969e93.gif) #Pusherとは Pusherとは、webサーバからRESTfulなAPIを送信することによって、 クライアントとwebsocket通信を行ってくれる素敵なサービスです。 #Pusher登録 まず,[こちら]('https://dashboard.pusher.com/accounts/sign_in')でログインをします ![スクリーンショット 2017-02-07 21.47.18.png](https://qiita-image-store.s3.amazonaws.com/0/100352/e2fb9a33-c5bb-baef-44a4-835196ed9ad8.png) GitHubアカウントでログインできます。 ![スクリーンショット 2017-02-07 21.51.31.png](https://qiita-image-store.s3.amazonaws.com/0/100352/33f32279-788f-3e8c-4364-89ad00f5bf3b.png) アプリ名はご自由にどうぞ 3はJS,4は今回はLaravelを選択します 作成したらapp keysをメモしておきます #Laravel側 ##config まず、config/app.phpの175行目付近にある ```php App\Providers\BroadcastServiceProvider::class, ``` のコメントを外します ##.env .envを変更します BROADCAST_DRIVERをpusherに ここからpusherのapp keysの値を書いていきます PUSHER_KEY に key PUSHER_SECRET に secret PUSHER_APP_ID に app_id をそれぞれ記入します ##Pusherの使用 pusherを使用するために ```bash composer require pusher/pusher-php-server ``` を実行します またブロードキャストイベントのために、イベントクラスを作成します ```bash php artisan make:event PusherEvent ``` app/Events/下に作成されます ```php message = $message; } /** * Get the channels the event should broadcast on. * * @return Channel|array */ public function broadcastOn() { return ['my-channel']; } } ``` に変更します js側に送信したい情報をpublic 変数に渡してあげることでブロードキャストされます route.phpを ```php Route::get('/', function() { return view('pusher'); }); Route::get('/pusher', function() { event(new App\Events\PusherEvent('こんにちわ!')); }); ``` に変更 ##JS側 pusher.blade.phpを作成 ```php Pusher ``` pushボタンを押せば'こんにちわ!'が追加されていきます! 質問等あればどうぞ!