サーバーライブラリ

Laravel でリアルタイム WebSocket

サーバーは Laravel Broadcasting、ブラウザは Laravel Echo。コードの変更は不要です。

サインインすると、コード例にご自身のクラスターホストが入ります。 サインイン

AI コーディングエージェントをお使いですか？ エージェント用プロンプトをコピー ↓

  1. インストール

    composer require pusher/pusher-php-server
npm install --save-dev laravel-echo pusher-js

  2. アプリの認証情報を設定

    BROADCAST_CONNECTION=pusher
PUSHER_APP_ID=YOUR_APP_ID
PUSHER_APP_KEY=YOUR_APP_KEY
PUSHER_APP_SECRET=YOUR_APP_SECRET
PUSHER_HOST=ws.hibira.io
PUSHER_PORT=443
PUSHER_SCHEME=https
PUSHER_APP_CLUSTER=ap

VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"

  3. クライアントを設定

    // resources/js/echo.js
import Echo from 'laravel-echo';
import Pusher from 'pusher-js';
window.Pusher = Pusher;

window.Echo = new Echo({
  broadcaster: 'pusher',
  key: import.meta.env.VITE_PUSHER_APP_KEY,
  cluster: 'ap',
  wsHost: import.meta.env.VITE_PUSHER_HOST,
  wsPort: import.meta.env.VITE_PUSHER_PORT,
  wssPort: import.meta.env.VITE_PUSHER_PORT,
  forceTLS: import.meta.env.VITE_PUSHER_SCHEME === 'https',
  enabledTransports: ['ws', 'wss'],
});

window.Echo.private('orders.' + orderId)
  .listen('OrderShipped', (e) => console.log(e.order));

  4. イベントを発行

    // Any event that implements ShouldBroadcast
OrderShipped::dispatch($order);

エージェント用プロンプト

Claude Code、Cursor、GitHub Copilot などの AI コーディングエージェントに貼り付けると、上記の設定で Hibira をご自身の Laravel プロジェクトに組み込みます。

YOUR_APP_KEY などのプレースホルダーはダッシュボードの値に置き換えてください。エージェントに環境変数として残させ、後から入力することもできます。

または Hibira MCP サーバーを接続すると、エージェントがアプリの作成と認証情報の設定まで自分で行います。 AI コーディングエージェントを接続 →

ダッシュボードのアプリキーとシークレットを使ってください。チャンネル、イベント、認可エンドポイントは Pusher とまったく同じように動作します。 ライブラリリファレンス ↗