Laravelでチャット機能構築 [WebSocket][pusher][Vue.js]

2020年7月11日

PHP

LaravelにおいてWebSocket接続経由のチャット機能を構築してみます。

 

開発環境

Laravel Framework 7.19.0

 

本記事ではログインしたユーザーのみが利用できる簡単なチャットを作成します。フロント側ではVue.jsを利用します。なおバリデーションの処理は省いています。

 

 

 

イベントブロードキャストアプリの概要


 

LaravelにおいてWebSocketによるアプリを構築する場合、主に以下2つの枠組が考えられます。

・Redis + laravel-echo-server

・Pusherチャンネルという外部サービスの利用

 

下記イラストは上記2つの枠組みにおいて、イベント(event)をブロードキャストする際のざっくりとした構成を表しています。

 

 

本記事では「Pusherチャンネル」を利用したアプリ構築のみを説明しますが、比較として「Redis + laravel-echo-server」について簡単に説明しておきます。

 

laravel-echo-serverはNode.js製のサーバーで、Redisと接続し、Socket.ioによってクライアントとの間にWebsocketを確立することができます。クライアント側では2つのパッケージを利用します。Socket.ioと接続するsocket.io-client、そしてチャンネルをサブスクライブしてイベントをリッスンするlaravel-echoです。

 

Pusherチャンネル(とpusher/pusher-php-server)を利用すれば、Redisとlaravel-echo-serverを用意することなしにWebSocketによるアプリを構築できます。

 

 

プロジェクトの準備


 

プロジェクトを作成します。

 

laravel/uiパッケージをインストールします。

 

認証機能の構築に必要なビューなどのファイルを生成します。

 

マイグレーションを実行します。すでにデータベースと接続していることを前提に説明します。

 

パッケージをインストールし、watchでコンパイルを自動化します。

 

以上でログイン機能が実装されます。サーバーを起動し、適当なユーザーを登録しておきます。

 

関連ページ

Laravel 6.x〜 でログイン機能を構築

 

 

ブロードキャスト実装の準備


 

ブロードキャストを有効にするために、下記ファイル/部分のコメントを外します。

config/app.php

 

PusherチャンネルPHP SDKをインストールします。

 

クライアント側で必要な2つのパッケージをインストールします。

 

bootstrap.jsの下記コードのコメントアウトを解除します。

resources/js/bootstrap.js

 

 

Pusherチャンネルの設定


 

PUSHER にサインアップ/サインインをしたら、Create app の画面において、フロントエンドでVue.js、バックエンドでLaravelを選択します。

 

 

App keysを取得できる画面があるので、それをコピーして、.envの下記項目にそれぞれ設定します。

 

また.envのブロードキャストドライバー項目をpusherに設定します。.envを編集したらキャッシュのクリアを忘れずに。

 

 

Messageモデルの作成


 

チャット機能のメッセージを保存するためのMessageモデルを作成します。すでに存在するUserが親でMessageが子の関係となる「1対多」のリレーションとして構築していきます。

 

関連ページ

1対多のモデルを構築する[belongsTo]

 

Messageモデルとマイグレーションファイルを作成し、下記のように編集します。

 

database/migrations/2020_07_09_142245_create_messages_table.php

 

app/Message.php

 

 

またUserモデルのクラスに下記関数を追記します。

app/User.php

 

マイグレーションを実行します。

 

 

ルーティング・コントローラの作成


 

web.phpに下記コードを追記します。

routes/web.php

 

コントローラを作成し、下記のように編集します。

 

app/Http/Controllers/ChatsController.php

35行目

MessageSentイベント(後述で作成)を発行しています。引数にはログインしているユーザーとチャットのメッセージを指定しています。

 

event関数はbroadcast関数に置き換えることも可能です。

またtoOthersで自分以外のユーザーにブロードキャストできるようになります。

 

 

イベントの作成・チャンネル


 

関連ページ

イベント/リスナを利用する

 

イベントを作成します。

 

生成されたSampleEvent.phpを下記のように編集します。

app/Events/MessageSent.php

15行目 ShouldBroadcastインターフェイスを実装します。

 

37〜40行目

イベントは任意のチャンネル上でブロードキャストされます。チャンネルは大まかにパブリックとプライベートに分けられます。パブリックなチャンネルは全てのユーザーが利用でき、ある任意のユーザーが利用するにはプライベートを利用します。本記事ではログインユーザーが利用するためのchatという名前のチャンネルをPrivateChannel()関数に設定しています。パブリックな場合はChannel()関数を利用します。

 

 

プライベートチャンネルをリッスンする場合、channels.phpに許可ルールを記述する必要があります。下記コードを追記します。

routes/channels.php

chatチャンネルを利用できるのは、現在ログインしているユーザー(コールバックの引数$user)に対して、trueを返すように記述する必要があります。この場合、Auth::check()を返しています。

 

 

フロントエンド


 

Vue.jsを利用した開発については下記ページもご覧下さい。

Laravel 6.x〜 Vue.jsを利用する

 

 

post.blade.phpを作成し、下記のように編集します。

resources/views/post.blade.php

 

本記事ではすでに登録・生成されているexample-componentコンポーネントをそのまま利用します。下記のように編集します。

resources/js/components/ExampleComponent.vue

29〜34行目

イベントのリッスンをおこなっています。今回はプライベートチャンネルなのでprivateメソッドを利用しています。listenメソッドではイベントを指定し、値を受け取ります。

 

以上でユーザーを適当に作成し ~/post にアクセスするとチャット画面が表示されるようになります。ログインしていない場合は、ログイン画面に遷移します。

 

 

参照ページ


 

Laravel 7.x ブロードキャスト

 

BUILD A CHAT APP WITH LARAVEL

 

 

 

LINEで送る
Pocket

定番本
定期本
 
Copyright © 2020 思考の葉 All Rights Reserved.  プライバシーポリシー