Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

laravel5.4がリリースされましたが5.3の記事です

こんな感じ

test.gif

Pusherとは

Pusherとは、webサーバからRESTfulなAPIを送信することによって、
クライアントとwebsocket通信を行ってくれる素敵なサービスです。

Pusher登録

まず,こちらでログインをします

スクリーンショット 2017-02-07 21.47.18.png

GitHubアカウントでログインできます。

スクリーンショット 2017-02-07 21.51.31.png

アプリ名はご自由にどうぞ
3はJS,4は今回はLaravelを選択します

作成したらapp keysをメモしておきます

Laravel側

config

まず、config/app.phpの175行目付近にある

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を使用するために

composer require pusher/pusher-php-server

を実行します

またブロードキャストイベントのために、イベントクラスを作成します

php artisan make:event PusherEvent

app/Events/下に作成されます

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

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を

Route::get('/', function() {
    return view('pusher');
});

Route::get('/pusher', function() {
    event(new App\Events\PusherEvent('こんにちわ!'));
});

に変更

JS側

pusher.blade.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ボタンを押せば'こんにちわ!'が追加されていきます!

質問等あればどうぞ!

tambourine
私たちは好奇心を武器に、あたらしいことが大好きな仲間たちと「世界を変えるアイデア」をカタチにするテクノロジスト集団です。
https://www.tam-bourine.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした