laravel5.3でwebsocket通信のチュートリアル(Pusher)

**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
<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class PusherEvent
{
    use InteractsWithSockets, SerializesModels;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return Channel|array
     */
    public function broadcastOn()
    {
        return new PrivateChannel('channel-name');
    }
}
```

これを

```php

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

use Illuminate\Console\Scheduling\Event;

class PusherEvent extends Event implements ShouldBroadcast
{
    use 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 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
<!DOCTYPE html>
<html>
<head>
    <title>Pusher</title>
</head>
<body>
<input type="button" value="push" onclick='push()'>
<ul id="messages"></ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://js.pusher.com/3.1/pusher.min.js"></script>
<script>
    //Pusherキー
    var pusher = new Pusher( '{{ env('PUSHER_KEY') }}' , {
        encrypted: true
    });

    //LaravelのEventクラスで設定したチャンネル名
    var channel = pusher.subscribe('my-channel');

    //Laravelのクラス
    channel.bind('App\\Events\\PusherEvent', addMessage);

    function addMessage(data) {
        $('#messages').prepend(data.message);
    }

    function push(){
        $.get('/pusher');
    }
</script>
</body>
</html>
```

pushボタンを押せば'こんにちわ！'が追加されていきます!

質問等あればどうぞ！