Laravel × vueでリアルタイムチャット

やりたいこと

laravelとvueでリアルタイムチャット(LINEみたいな)を実装したい

使用技術

• Laravel関係
  • Laravel Echo
  • イベント・リスナ
  • ブロードキャスト
• Vue関係
  • axios
  • Laravel Echo
• その他
  • Pusher

ロジック

1. メッセージ送信時にイベント発火
2. イベント内でPusherに通知（ブロードキャスト）
3. Pusherへの通知をLaravel Echoが感知
4. Laravel Echoでメッセージ再読み込み

実装手順

今回の例はpusherへ通知を行うとすべてのクライアントでメッセージ再読み込みが行われるため、複数の1対1同時接続を再現するには修正が必要です！！！！

　　→[ハッシュ化ユーザーID]みたいなチャンネル名でブロードキャストすればできそう

(web)Pusherに登録

👉Pusher 登録ページ

(Laravel)Pusherへブロードキャストする設定をする

1. .envに記述

.env

BROADCAST_DRIVER=pusher
# 以下pusherからコピペ
PUSHER_APP_ID=******
PUSHER_APP_KEY=********************
PUSHER_APP_SECRET=********************
PUSHER_APP_CLUSTER=***

2.cinfig/app.phpのBroadcastServiceProviderのコメントアウトを解除
3.必要パッケージのインストール

$composer require pusher/pusher-php-server "~3.0"

(Vue)Pusherの監視をするLaravel Echoの設定をする

1.必要パッケージのインストール

$npm install --save laravel-echo pusher-js

2.Laravel Echoをアクティブに

resources/js/bootstrap.jsのlaravelEchoに関するコメントアウトを解除

resources/js/bootstrap.js

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
});

(Laravel)Pusherへの通知イベント実装

1.イベント作成

$php artisan make:event MessageCreated

2.pusherへ通知する部分の実装

app/Events/MessageCreated.phpのShouldBroadcast インターフェースの実装

app/Events/MessageCreated.php

<?php

namespace App\Events;

use App\Message;
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 MessageCreated implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct(Message $message)
    {
        $this->message = $message;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new Channel('chat');
    }
}

3.メッセージ送信時にイベント発火するように

Controller.php

public function create(Request $request) {

    $message = \App\Message::create([
        'body' => $request->message
    ]);
    event(new MessageCreated($message));

}

(Vue)Laravel Echoでメッセージ再読み込み実装

vue.js

mounted() {
    this.getMessages();
    Echo.channel('chat')
        .listen('MessageCreated', (e) => {
            this.getMessages(); // 全メッセージを再読込
        });
}

参考

Laravel+Vueでリアルタイム・チャットをつくる（ダウンロード可）[最終更新:2019/06/03]
https://blog.capilano-fw.com/?p=1418#Ajax