Web開発者として、リアルタイム機能をアプリケーションに実装することは、ユーザー体験を大きく向上させる重要な要素です。Laravel Echoを使えば、簡単にリアルタイム機能を実現することができます。本記事では、LaravelとLaravel Echoを利用してリアルタイム機能を実装する方法について詳しく解説していきます。
Laravel Echoとは？
Laravel Echoは、LaravelアプリケーションでWebSocketを利用してリアルタイム通知を簡単に実装するためのツールです。Echoは、イベントブロードキャストをリスンし、リアルタイム機能をサポートするためのJavaScriptライブラリを提供します。
EchoはPusherやSocket.ioといったWebSocketサービスをサポートしており、これらのサービスを通じて効率的にデータをブロードキャストすることができます。
Laravel Reverbという選択肢
Laravel 11以降では、Laravel公式が提供するLaravel ReverbもWebSocketサーバーの選択肢に加わりました。Reverbはファーストパーティ製で自前のサーバーとして動作するため、Pusherのような外部SaaSの料金や利用制限を気にせずリアルタイム機能を実装できます。
php artisan install:broadcasting
上記コマンドでReverbを含むブロードキャスト関連の設定一式が導入されます。新規プロジェクトで外部サービスへの依存を避けたい場合はReverb、既にPusherの運用実績がある場合や、Pusherが提供するスケーラブルなマネージドインフラを活用したい場合は、本記事で解説する構成が適しています。
準備
必要なもの
- Laravelが動作する環境
- Composer
- Node.js
- NPM（Node Package Manager）
インストールとセットアップ
始めにLaravel Echoと依存関係を含むEchoサーバーをインストールします。
npm install --save laravel-echo pusher-js
Pusherを利用する場合は、Pusherのアカウントを作成し、アプリケーションのクレデンシャルを取得してください。これらのクレデンシャルはLaravelプロジェクトの.envファイルに追加します。
PUSHER_APP_ID=your-app-id
PUSHER_APP_KEY=your-app-key
PUSHER_APP_SECRET=your-app-secret
PUSHER_APP_CLUSTER=your-app-cluster
Laravel側のセットアップ
ブロードキャスト設定
config/broadcasting.phpで、利用するブロードキャストドライバ（例: Pusher）を設定します。
'default' => env('BROADCAST_DRIVER', 'pusher'),
イベントの作成
リアルタイムでデータを送信するためにはイベントを作成する必要があります。以下コマンドで新しいイベントを作成します。
php artisan make:event MessageSent
イベントでは、送信するデータをプロパティとして定義します。例えば、チャットメッセージを送信する場合は以下のようにします。
namespace App\Events;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;
class MessageSent implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $message;
public function __construct($message)
{
$this->message = $message;
}
public function broadcastOn()
{
return ['chat-channel'];
}
}
イベントクラスでShouldBroadcastインターフェースを実装することで、自動的にブロードキャストされるようになります。
ブロードキャストのトリガー
イベントを発行するために、コントローラでイベントをディスパッチします。
use App\Events\MessageSent;
public function sendMessage(Request $request)
{
$message = $request->input('message');
// 何らかの方法でメッセージを保存する
event(new MessageSent($message));
return response()->json(['status' => 'Message Sent!']);
}
クライアント側のセットアップ
クライアント側では、Laravel EchoとPusherを使って新しいメッセージを受信します。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
});
window.Echo.channel('chat-channel')
.listen('MessageSent', (e) => {
console.log(e.message);
// メッセージをUIに反映する処理
});
.envファイルにPusherのキーを環境変数として設定し、それを用いてEchoインスタンスを構成します。
テストとデプロイ
開発が完了したら、ローカル環境でテストしてライブで配信されるイベントが正しく機能することを確認してください。また、サーバー環境でも.env設定を適切に設置してください。
よくある質問
Laravel EchoとLaravel Reverbはどちらを使うべきですか？
Laravel Echoはクライアント側のJavaScriptライブラリ、Reverbはサーバー側のWebSocketサーバーという役割の違いがあります。Reverbを使う場合もクライアント側では引き続きLaravel Echoを利用するため、両者は競合するものではなく組み合わせて使うのが基本です。
Pusherは無料で使えますか？
Pusherには無料プランがありますが、同時接続数やメッセージ数に制限があります。本番運用でトラフィックが増える場合は、有料プランへの切り替えか、自前運用できるLaravel Reverbの利用を検討してください。
WebSocketの仕組み自体をもっと詳しく知りたい場合は？
WebSocketプロトコルの基礎から実装パターンまで幅広く知りたい方は、Laravel WebSocketを活用してリアルタイム機能を実装する完全ガイドもあわせてご覧ください。
Laravel EchoとPusher（またはReverb）を使うことで、煩雑になりがちなリアルタイム通信をシンプルに実装できます。これを活用することで、チャットアプリケーションや通知機能、データの即時更新など、さまざまなリアルタイム機能をユーザーに提供することができます。リアルタイム機能以外のLaravelの機能を俯瞰したい方はLaravelの主要機能一覧もご確認ください。
コメント