はじめに
「Laravel×Vueでリアルタイムチャットを構築したいな。」と思い、まずは以下３点の概要を調べ、まとめました。
・Pusher
・Laravel Echo
・Broadcasting
きっかけはGPTに「LaravelとVueでリアルタイムチャットを作りたい」と言ったところ、画像のような返答をしてきたからです。リアルタイム通信ライブラリ？があることを初めて知りました。
Pusherとは
Pusherとは、リアルタイムWebアプリケーションを構築するためのホステッドサービスです。
Pusherを使用すると、webSocketをベースにした通信を利用して、クライアントとサーバ間でリアルタイムのデータのやり取りを実現できます。LaravelのBroadcastはPusherをサポートしており、Pusherのアカウントを作成し、キーとシークレットを設定することで、PusherをLaravelプロジェクトで利用できます。
Pusherは、リアルタイム通知、チャットアプリ、ライブダッシュボード、オンラインゲームなど、様々なアプリケーションで利用されています。デベロッパーが手軽に導入できるAPIを提供しており、複雑な実装をすることなくリアルタイムな機能を組み込むことができます。
Pusherの機能
・Channels：リアルタイムコンテンツの作成
・Beams：プッシュ通知
※無料プランの条件
・同時接続は、100ユーザーまで
・１日200,000メッセージまで
Pusherを使う手順
Pusherアカウント登録後、アプリを作成
↓
PusherからAPIキーを取得
↓
Laravelの.envを編集
↓
必要なパッケージのインストール(PHPとJS)
↓
ビルド
↓
イベント作成
↓
最終アクセス日時を保存
↓
ルート設定
↓
ビューを作成
参考・引用
Laravel Echoとは
Laravel Echoとは、リアルタイムウェブソケット通信のためのライブラリです。PusherやRedis、その他のサポートされているバックエンドプロンプトを介して、リアルタイムなイベントの発信と受信を容易にするために作られました。
Laravel Echoは、ブラウザやモバイルアプリケーションでのリアルタイムなイベントの受信と表示を簡略化するためのAPIを提供しています。これにより、サーバーからのデータ変更やイベントが発生した場合に、クライアント側で即座に反応できるようになります。
WebSocketをベースとするプッシュ通知のほかに、他の一般的なチャンネルやイベントのリスニングもサポートしており、サーバーとクライアント間でのリアルタイムな通信が容易になります。
バックエンドとしてLaravel Echo ServerやPusherといったサードパーティのプロバイダを使用することができます。
※WebSocketとは
別に記事を書きました。
https://qiita.com/MK32A/items/7cd77ab3443e03656613
特徴
Broadcastuingのサポート
Laravel Echoは、LaravelのBroadcasting機能と統合されており、Laravelアプリケーション内で発生する特定のイベントを簡単にリアルタイムにブロードキャストできます。
※ブロードキャストとは
通信ネットワークで一つの送信元が複数の受信者にデータを同時に送信する手法です。ウェブアプリケーション開発において、リアルタイムな通知やデータの同期を実現するために、サーバー上でのイベントをブロードキャストしてクライアント側でリアルタイムに処理する手法が使われます。
チャンネルの概念
チャンネルは、特定のトピックやイベントに関連する通信を管理するための仕組みです。
例）chatというチャンネルに接続することで、チャット関連のイベントをリアルタイムに受信できます。
イベントリスナー
Laravel Echoは、データを受信するだけでなく、そのデータをクライアント側でどのように処理するか定義できます。そのため、リアルタイムなデータ更新や通知の処理が柔軟に行うことができます。
Broadcastingとは
Broadcastingは、リアルタイムでデータをクライアントとサーバー間で送信するための仕組みを提供する機能です。これにより、アプリケーション内で発生したイベントやデータの変更を即座に関連するクライアントに通知することができます。通常、WebSocketなどのリアルタイム通信プロトコルを使用して実現します。
主要な要素と概念
Broadcasting Drivers
Laravelは複数のBroadcastingドライバ(Pusher/Redis/Log)をサポートしており、このドライバはリアルタイムメッセージングのためのバックエンドを提供します。
Broadcast Events
Laravelでは、アプリケーション内で発生する特定のイベントを指定してBroadcastすることができます。
例）ユーザーが新しいメッセージを投稿した。
Event Broadcasting
特定のイベントをブロードキャストするには、そのイベントがShouldBroadcastインターフェースを実装している必要があります。これにより、イベントが発生したときに関連するデータをブロードキャストすることができます。
Broadcasting Channels
Broadcasting Channelsは、一般的なチャットアプリケーションやリアルタイム通知などで使用される、特定のトピックなチャンネルに対するBroadcastイベントのグループの仕組みです。
Broadcasting Events to JavaScript Clients
Laravelのフロントエンド側では、Vue.jsなどのJavaScriptフレームワークを使用して、Broadcasrされたイベントを受信し処理することができます。
リアルタイムチャットを実装するには
Pusherアカウントの取得とプロジェクト作成。
↓
LaravelでPusherパッケージをインストールし、設定。
↓
Laravel Echoeのセットアップ。
↓
チャットメッセージをブロードキャストするためのイベント作成
↓
Vue.jsでLaravel Echoを使用してイベントをリッスンし、リアルタイムでメッセージを表示。
参考・引用