【Laravel】Reverbでリアルタイム通信を実装する方法

当ページのリンクには広告が含まれています。
いずみ

こんな悩みを解決できる記事を書きました!

僕は現役フリーランスエンジニア(歴年)で、資格は個保有しています。

LaravelでWebSocketを使ったリアルタイム通信を実装したい」とお考えではありませんか?

チャットや通知、進捗バーのように、画面をリロードせず更新したい場面は多いです。

Laravel公式のWebSocketサーバーであるReverbを使えば、外部サービスなしでリアルタイム通信を実装できます

いずみ

導入コマンド1つで始められます。サクッと解説します。

ということで、本記事ではLaravelでReverbを使いリアルタイム通信(WebSocket)を実装する方法を解説します。

いずみ

すぐ読み終わるので、ぜひ最後まで読んでくださいませ。

スクロールできます
【当サイト】おすすめフリーランスエージェント3選
エージェント評価ポイント公式サイト
レバテックフリーランス

5.0
業界最大級のエージェント。
高単価案件が豊富。
公式
Midworks

4.8
満足度調査で
3年連続3冠を達成。
公式
ITプロパートナーズ

4.6
週2〜3向けの案件が豊富。公式
執筆者/監修者
  • フリーランスエンジニア(保有資格個、企業と直接契約
  • ブログ・アフィリエイト歴7年(2018年〜)
  • ブランドせどりで月利50万円⇨脱サラ
  • 投資(仮想通貨・FX)歴7年(2018年〜)
  • X(旧Twitter)フォロワー約1,900人
  • 運営者情報はこちら
いずみです
目次

【Laravel】Reverbでリアルタイム通信を実装する方法

早速ですが、LaravelでReverbを使ってリアルタイム通信を実装していきます。

Reverbとは何か

ReverbはLaravelチームが開発しているWebSocketサーバーです。

Pusherプロトコル互換で動くため、Laravelのイベントブロードキャスト機能とLaravel Echoをそのまま利用できます。

PusherやAblyのような外部サービスと違い、Reverbは自前のインフラ上で動きます。

動作にはLaravel 11以上とPHP 8.2以上が必要という仕様になっています(将来変更される可能性があります)。

いずみ

WebSocketサーバーを別で立てて運用する手間が、Laravel本体に取り込まれた形です。

Reverbを導入する

まずはReverbをプロジェクトに導入します。

STEP
install:broadcasting を実行する

Artisanコマンドを1つ実行するだけでReverbが入ります。

php artisan install:broadcasting

install:broadcasting は内部で reverb:install を呼び出し、Reverbの追加・config/reverb.php の生成・ブロードキャスト設定の公開・フロント側のEchoの雛形作成までまとめて行います。

あわせて .env の BROADCAST_CONNECTION が reverb に設定されます。

STEP
環境変数を確認する

.env に接続用の認証情報とホスト情報が追加されます。

REVERB_APP_ID=my-app-id
REVERB_APP_KEY=my-app-key
REVERB_APP_SECRET=my-app-secret
REVERB_HOST="localhost"
REVERB_PORT=8080
REVERB_SCHEME=http

VITE_REVERB_APP_KEY="${REVERB_APP_KEY}"
VITE_REVERB_HOST="${REVERB_HOST}"
VITE_REVERB_PORT="${REVERB_PORT}"
VITE_REVERB_SCHEME="${REVERB_SCHEME}"

REVERB_APP_KEY などのアプリ認証情報は、クライアントとサーバーの間で交換され、リクエストの正当性を検証するために使われます。

VITE_ で始まる変数はフロント側のEchoが参照します。

STEP
Reverbサーバーを起動する
php artisan reverb:start

デフォルトでは 0.0.0.0:8080 で待ち受けます。

ホストやポートを変えたい場合、通信内容を確認したい場合はオプションを付けます。

php artisan reverb:start --host=127.0.0.1 --port=9000 --debug

–debug を付けるとReverbを通過するデータの流れがコンソールに表示されます。

いずみ

ここまでで通信基盤は完成です。あとはイベントを流し込むだけになります。

ブロードキャストするイベントを作る

サーバー側からクライアントへ流したい出来事を、イベントクラスとして定義します。

STEP
イベントクラスを作成する
php artisan make:event OrderShipmentStatusUpdated

ShouldBroadcast インターフェースを実装し、broadcastOn で配信先チャンネルを返します。

<?php

namespace App\Events;

use App\Models\Order;
use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class OrderShipmentStatusUpdated implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public function __construct(public Order $order)
    {
    }

    public function broadcastOn(): Channel
    {
        return new PrivateChannel('orders.'.$this->order->id);
    }

    public function broadcastWith(): array
    {
        return [
            'id' => $this->order->id,
            'status' => $this->order->status,
        ];
    }
}

broadcastWith を定義すると、配信するペイロードを必要な項目だけに絞れます。

誰でも購読してよい通知なら PrivateChannel の代わりに Channel を返します。

STEP
チャンネル認可を定義する

PrivateChannel を使う場合、routes/channels.php で購読可否を判定します。

use App\Models\Order;
use App\Models\User;

Broadcast::channel('orders.{orderId}', function (User $user, int $orderId) {
    return $user->id === Order::findOrNew($orderId)->user_id;
});

コールバックが true を返したユーザーだけが、対象のチャンネルを購読できます。

公開チャンネルだけを使う場合、認可の定義は不要です。

STEP
イベントを発火する
use App\Events\OrderShipmentStatusUpdated;

broadcast(new OrderShipmentStatusUpdated($order))->toOthers();

コントローラーやサービス層で broadcast ヘルパを呼ぶと、Reverb経由でクライアントへ配信されます。

toOthers を付けると、イベントを発生させた本人の接続には配信されません。

いずみ

自分の操作で二重に画面更新されるのを防げます。

フロントエンドで受信する

install:broadcasting を実行すると、resources/js/echo.js が生成され、bootstrap.js から読み込まれます。

STEP
Echoの設定を確認する
import Echo from 'laravel-echo';

import Pusher from 'pusher-js';
window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'reverb',
    key: import.meta.env.VITE_REVERB_APP_KEY,
    wsHost: import.meta.env.VITE_REVERB_HOST,
    wsPort: import.meta.env.VITE_REVERB_PORT ?? 80,
    wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
});

broadcaster に reverb を指定している点がポイントです。

STEP
アセットをビルドする
npm install
npm run dev

laravel-echo と pusher-js が入り、Echoがブラウザで使えるようになります。

STEP
イベントを購読する
Echo.private(`orders.${orderId}`)
    .listen('OrderShipmentStatusUpdated', (e) => {
        console.log(e.status);
    });

listen の第1引数はイベントクラス名で、コールバックの引数には broadcastWith で返した配列が渡ります。

公開チャンネルを購読する場合は Echo.private の代わりに Echo.channel を使います。

いずみ

サーバーで broadcast、ブラウザで listen。役割がはっきり分かれていて分かりやすいです。

本番環境で運用するときの注意点

Reverbは常駐する長時間プロセスなので、いくつか運用上の配慮が必要です。

プロセスマネージャとしてSupervisorを使い、reverb:start を常時起動させておきます。

コードを変更しても稼働中のプロセスには反映されないため、デプロイ後は reverb:restart を実行します。

reverb:restart は接続を安全に閉じてから停止するので、Supervisor管理下なら自動で再起動されます。

公開ポートからの通信は、Nginxなどのリバースプロキシで 8080 番のReverbへ流します。

ReverbはWebSocket接続を /app で、API リクエストを /apps で受けるため、両方のパスをプロキシ対象にします。

同時接続が1,000を超える見込みなら、ext-uv 拡張を入れます。

pecl install uv

標準の stream_select は約1,024ファイルで頭打ちになりますが、ext-uv があればReverbが自動で切り替えます。

OSのファイルディスクリプタ上限(ulimit -n)や、Supervisorの minfds も接続数に合わせて引き上げます。

1台で足りなくなったら REVERB_SCALING_ENABLED を true にして、Redis経由で複数のReverbサーバーを水平スケールできます。

いずみ

小規模なら1台のVPSで十分さばけます。まずはSupervisor常駐から始めるのがおすすめです。

スクロールできます
【当サイト】おすすめフリーランスエージェント3選
エージェント評価ポイント公式サイト
レバテックフリーランス

5.0
業界最大級のエージェント。
高単価案件が豊富。
公式
Midworks

4.8
満足度調査で
3年連続3冠を達成。
公式
ITプロパートナーズ

4.6
週2〜3向けの案件が豊富。公式

【厳選】フリーランスエンジニアにおすすめなエージェント3選

フリーランスエンジニアになるにはエージェントから案件をもらう必要があります。

僕が実際に利用しているおすすめエージェントを紹介しますね。

いずみ

エージェントは必ず複数登録してください。

担当者によっては「全然案件紹介してくれない…」みたいなこともあるので…

僕は実際に5つのエージェントを使い回していますよ。

フリーランスを始めるなら「

案件数マージン率単価
約88,000件非公開
初心者福利厚生申し込み
無料
Good Point
  • 業界最大級の案件数。
  • 業界トップクラスの高単価報酬、低マージン(平均年収862万円)。
  • 案件参画中のフォローの充実。

※詳細は「【業界最大手】レバテックフリーランスとは?メリットや利用手順を解説!」を参照。

は業界最大手のフリーランスエージェントです。

とにかく案件数が多いので、とりあえず登録しておけば間違いないエージェントです!

いずみ

僕もはじめてフリーランスの案件を貰ったのはです。

保有している案件数が多いので、業務経験がなくても何かしらの案件は紹介してもらえますよ(僕はJavaの経験3年でも案件を貰えました)。

手厚い保障を重視したいなら「

案件数マージン率単価
約10,000件非公開
初心者福利厚生申し込み
無料
Good Point
  • 手厚い保障で正社員並みの安心感。
  • 還元率60%超え&単価公開でクリアな契約。
  • 給与保障制度(審査あり)。

は手厚い保障が特徴のフリーランスエージェントです。

フリーランスを目指しているけど不安な方や保障を重視したい方におすすめです。

いずみ

僕も何度か案件を紹介してもらいました。

自分のスキルに合った案件を紹介してもらえましたし、電話のやり取りも非常に丁寧でした。

週2〜3日の案件探しなら「

案件数マージン率単価
約5,000件非公開
初心者福利厚生申し込み
経験者向け無料
Good Point
  • IT案件に特化したフリーランスエージェント。
  • 週2〜3日の案件が豊富。
  • リモート案件が多く、直エンドなので単価も高い。

※詳細は「【週2・3案件】ITプロパートナーズとは?メリットや利用手順を解説!」を参照。

はIT案件に特化したフリーランスエージェントです。

週2〜3日から参画できる案件が豊富なので、起業したい人にもおすすめです。

いずみ

週2〜3日の案件はある程度スキルがないと紹介してもらえない印象です。

とはいえ、週5の案件ももちろんありますし、僕が利用した時は迅速・丁寧に対応していただきました!

よくある質問

Pusherから乗り換えられますか?

ReverbはPusherプロトコル互換のため、移行の手間は小さいです。

config/broadcasting.php の接続を reverb に変え、フロントのEcho設定を reverb 用に書き換えれば、イベントクラスや listen のコードはほぼそのまま動きます。

Reverbサーバーが落ちるとどうなりますか?

WebSocket接続が切れ、リアルタイム更新は止まります。

通常のHTTPリクエストは影響を受けないため、画面はリロードすれば表示されます。

Supervisorで常駐させ、プロセス異常時に自動再起動する構成にしておくと安全です。

WebSocketとポーリングはどちらを選ぶべきですか?

数秒の遅延を許容できて更新頻度も低いなら、定期的なHTTPポーリングで十分です。

チャットや通知、共同編集のように即時性が要る画面ではWebSocketが向いています。

Reverbは単一サーバーでも数千の同時接続をさばけます。

まとめ

今回は、LaravelでReverbを使いリアルタイム通信(WebSocket)を実装する方法について解説しました。

以下が本記事のまとめになります。

まとめ
  • ReverbはLaravel公式のWebSocketサーバーで、install:broadcasting だけで導入できる。
  • ShouldBroadcast を実装したイベントを broadcast ヘルパで発火し、Laravel Echo の listen で受信する。
  • Pusherプロトコル互換なので、Pusherからの移行は設定の書き換えだけで済む。
  • 本番ではSupervisorで常駐させ、接続数が多い場合は ext-uv とRedisスケーリングを使う。
まとめ
  • おすすめ本
¥2,673 (2023/07/23 15:53時点 | Amazon調べ)

Laravelの勉強なら「」が分かりやすくておすすめですよ♪

いずみ

最後までお読みいただき、ありがとうございました!

スクロールできます
【当サイト】おすすめフリーランスエージェント3選
エージェント評価ポイント公式サイト
レバテックフリーランス

5.0
業界最大級のエージェント。
高単価案件が豊富。
公式
Midworks

4.8
満足度調査で
3年連続3冠を達成。
公式
ITプロパートナーズ

4.6
週2〜3向けの案件が豊富。公式
  • クソおすすめ本
¥4,480 (2024/06/01 23:28時点 | Amazon調べ)
いずみ

海外のエンジニアがどういった思考で働いているかが理解できます。

海外に行く気はないけど海外エンジニアの動向が気になる雑魚エンジニアにおすすめです(本当におすすめな本しか紹介しないのでご安心を)。

この記事が気に入ったら
フォローしてね!

シェアしてね!
  • URLをコピーしました!
目次