プログラミング

LaravelとPusherで通知機能

最終更新： 06/03/2025
1 分の読み

Web通知をLaravelとPusherチャンネルを使って作成する方法について、以下に完全かつ包括的な記事を提供します。

はじめに

Web通知は、ユーザーにリアルタイムで重要な情報を送信するための強力なツールです。例えば、メッセージングアプリケーション、ニュースサイト、またはEコマースサイトなどで、ユーザーに即座に通知を送る場合に利用されます。Laravelはその豊富な機能セットと簡単な設定方法で、Pusherと統合することで、簡単にリアルタイムの通知システムを構築することができます。

関連記事

必要なもの

  1. Laravel – バージョン7以上
  2. Pusherアカウント – Pusherはリアルタイム通知のためのサービスを提供しています。
  3. Node.js と npm – JavaScriptのパッケージ管理ツール

ステップ 1: Pusherアカウントの設定

まず、Pusherのアカウントを作成します。以下の手順に従ってください。

  1. Pusherの公式サイトにアクセスし、アカウントを作成します。
  2. ダッシュボードにログイン後、「Create App」を選択し、新しいアプリケーションを作成します。
  3. アプリケーションが作成されると、APP_ID、APP_KEY、APP_SECRET、APP_CLUSTERが表示されます。この情報は後でLaravelの設定で使用します。

ステップ 2: Laravelプロジェクトの準備

Laravelプロジェクトを準備します。

bash
composer create-project --prefer-dist laravel/laravel web-notifications

プロジェクトが作成されたら、ディレクトリに移動します。

bash
cd web-notifications

ステップ 3: Pusherパッケージのインストール

LaravelにはPusherと連携するための公式パッケージが用意されています。これをインストールします。

bash
composer require pusher/pusher-php-server

ステップ 4: .env ファイルの設定

Pusherの設定情報を .env ファイルに追加します。これにより、LaravelがPusherと接続できるようになります。

env
BROADCAST_DRIVER=pusher

PUSHER_APP_ID=あなたのAPP_ID
PUSHER_APP_KEY=あなたのAPP_KEY
PUSHER_APP_SECRET=あなたのAPP_SECRET
PUSHER_APP_CLUSTER=あなたのAPP_CLUSTER

これらの情報はPusherダッシュボードから取得できます。

ステップ 5: config/broadcasting.php の設定

config/broadcasting.php ファイルを開き、以下のようにPusherの設定を更新します。

php
'pusher' => [
    'driver' => 'pusher',
    'key' => env('PUSHER_APP_KEY'),
    'secret' => env('PUSHER_APP_SECRET'),
    'app_id' => env('PUSHER_APP_ID'),
    'options' => [
        'cluster' => env('PUSHER_APP_CLUSTER'),
        'encrypted' => true,
    ],
],

ステップ 6: 通知イベントの作成

通知イベントを作成します。Laravelでは、php artisan make:event コマンドを使用してイベントを作成できます。

bash
php artisan make:event NotificationSent

これで、app/Events/NotificationSent.php ファイルが作成されます。このファイルを編集して、Pusherを通じて通知を送信できるように設定します。

php
namespace App\Events;

use Illuminate\Queue\SerializesModels;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\BroadcastEvent;

class NotificationSent
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;

    public function __construct($message)
    {
        $this->message = $message;
    }

    public function broadcastOn()
    {
        return new Channel('notification-channel');
    }

    public function broadcastAs()
    {
        return 'notification.sent';
    }
}

ステップ 7: ブロードキャストチャネルの設定

次に、routes/channels.php ファイルを開き、通知チャネルを設定します。

php
Broadcast::channel('notification-channel', function ($user) {
    return true; // 認証の処理を追加することもできます
});

ステップ 8: クライアントサイドの設定

JavaScriptでPusherを使用するために、resources/js/bootstrap.js ファイルを設定します。

javascript
import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

window.Pusher = Pusher;
window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'あなたのAPP_KEY',
    cluster: 'あなたのAPP_CLUSTER',
    forceTLS: true
});

これで、クライアントサイドでもリアルタイム通知を受け取る準備が整いました。

次に、resources/js/app.js ファイルに、通知を受け取るコードを追加します。

javascript
Echo.channel('notification-channel')
    .listen('NotificationSent', (event) => {
        alert(event.message);
    });

ステップ 9: 通知のトリガー

通知を送信するためには、イベントをトリガーする必要があります。例えば、コントローラー内で以下のように通知を送信します。

php
use App\Events\NotificationSent;

public function sendNotification()
{
    event(new NotificationSent('新しい通知があります！'));
}

ステップ 10: フロントエンドでの通知表示

上記の設定を行った後、ブラウザでリアルタイム通知が表示されるはずです。ユーザーが通知を受け取ると、アラートが表示されます。

ステップ 11: サーバーのセットアップ

最後に、サーバーのセットアップを行います。特に、Node.jsとLaravel Echo Serverを使って、WebSocket接続を確立する場合には、以下のように設定します。

  1. Laravel Echo Serverのインストール

    bash
    npm install -g laravel-echo-server

  2. Laravel Echo Serverの設定

    bash
    laravel-echo-server init

    設定が完了したら、サーバーを起動します。

    bash
    laravel-echo-server start

これで、リアルタイムで通知を送受信できるようになります。

結論

LaravelとPusherを使用することで、リアルタイム通知システムを簡単に実装できます。PusherはWebSocket技術を利用して、サーバーとクライアント間で高速なデータ送受信を行うため、通知の遅延が非常に少なく、ユーザーエクスペリエンスが向上します。上記の手順に従って、素早く効果的な通知システムを構築できることがわかります。

最終更新： 06/03/2025
1 分の読み
Back to top button