Laravel 開発: Laravel Echo を使用して WebSocket 通信を実装するには?

Laravel は、開発者が高品質の Web アプリケーションを簡単に構築できるようにする多くの便利なツールと拡張ライブラリを備えた人気の PHP フレームワークです。その中でも、Laravel Echo は、開発者が Web アプリケーションでリアルタイム通信を実現できる強力な WebSocket 通信ツールです。

この記事では、Laravel Echoを使用してWebSocketサーバーを構築し、リアルタイム通信を実現する方法を紹介します。最初に WebSocket と Laravel Echo とは何かについて簡単に説明し、次に Laravel Echo のインストールと構成方法を説明し、最後に Laravel Echo を使用して JavaScript クライアントと通信する方法を示します。

WebSocket とは何ですか?

WebSocket は、Web アプリケーションと Web サーバー間のリアルタイム通信接続を可能にするプロトコルです。この接続は長時間開いたままにすることができ、双方向であるため、読み取りと書き込みを同時に行うことができます。

HTTP リクエストとは異なり、WebSocket 接続を継続的に開くことで、サーバーはポーリングや長時間ポーリングを必要とせずに、リアルタイムでデータをクライアントにプッシュできます。これにより、Web アプリケーションは迅速、効率的、リアルタイムで通信できるようになります。

Laravel Echoとは何ですか?

Laravel Echo は、Laravel フレームワークの公式拡張ライブラリであり、開発者が Web アプリケーションに WebSocket 通信を実装するのに役立ちます。これは、JavaScript を使用してブロードキャスト チャネルに簡単にサブスクライブし、クライアントとサーバー間でメッセージを渡すためのシンプルな API を提供します。

Laravel Echo と Laravel Pusher を使用すると、WebSocket サーバーを簡単にセットアップし、ブロードキャスト チャネルを使用して WebSocket 通信を整理できます。クライアント側では、JavaScript と Laravel Echo を使用してリアルタイムでメッセージをリッスンし、Web アプリケーションでのリアルタイム通信を可能にすることができます。

Laravel Echo のインストールと構成

Laravel Echo の使用を開始する前に、必要なソフトウェア (Laravel とプッシャー PHP SDK) をインストールして構成する必要があります。 Laravel Echo とプッシャー PHP SDK は、Composer パッケージ マネージャーを通じてインストールできます。

まず、Laravel をインストールする必要があります:

composer create-project laravel/laravel your-project-name

次に、プッシャー PHP SDK をインストールする必要があります。プッシャー PHP SDK のインストールは、次のコマンドを実行することで完了できます:

composer require pusher/pusher-php-server

Laravel Echo とプッシャー PHP SDK を統合するには、config/app.php ファイルにサービスプロバイダーとエイリアスを追加する必要があります。 :

// config/app.php

'providers' => [
    // ...
    LaravelBroadcastingBroadcastServiceProvider::class,
],

'aliases' => [
    // ...
    'Broadcast' => LaravelBroadcastingBroadcastFacade::class,
],

次に、Laravel Echo とプッシャー PHP SDK が適切に動作することを確認するための設定作業を行ってみましょう。 Laravel Echo とプッシャー PHP SDK に必要なすべての設定を .env ファイルに追加する必要があります:

BROADCAST_DRIVER=pusher
PUSHER_APP_ID=your-pusher-app-id
PUSHER_APP_KEY=your-pusher-app-key
PUSHER_APP_SECRET=your-pusher-app-secret
PUSHER_APP_CLUSTER=your-pusher-app-cluster

WebSocket サーバーの作成

次に、Laravel Echo とプッシャー PHP SDK を使用してセットアップします。 WebSocket サーバー。 Routes/channels.php ファイルでブロードキャスト チャネルを定義する必要があります。ブロードキャスト チャネルによって、どのユーザーがブロードキャスト メッセージを受信できるかが決まります。

// routes/channels.php

use IlluminateSupportFacadesBroadcast;

Broadcast::channel('chat.{roomId}', function ($user, $roomId) {
    // ...
});

上の例では、「chat」という名前のブロードキャスト チャネルを定義し、それにパラメータ「roomId」を渡しました。 「chat.roomId」権限を持つユーザーのみが、このブロードキャスト チャネルからメッセージを受信できます。

次に、ブロードキャスト イベントを定義し、そのメッセージをプッシュする必要があります。 app/Events ディレクトリに新しいイベント クラスを作成します。例:

// app/Events/ChatMessageSent.php

<?php

namespace AppEvents;

use IlluminateBroadcastingPrivateChannel;
use IlluminateContractsBroadcastingShouldBroadcast;
use IlluminateFoundationEventsDispatchable;
use IlluminateQueueSerializesModels;

class ChatMessageSent implements ShouldBroadcast
{
    use Dispatchable, SerializesModels;

    public $message;

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

    public function broadcastOn()
    {
        return new PrivateChannel('chat.' . $this->message['room_id']);
    }
}

このイベント クラスにはブロードキャスト イベントのロジックが含まれており、ブロードキャストするには ShouldBroadcast インターフェイスを実装する必要があります。

これで、アプリケーション内でイベントをインスタンス化し、ブロードキャスト メッセージを送信できるようになります。たとえば、次のメッセージ送信メソッドを app/Http/Controllers/ChatController.php ファイルに追加します。

// app/Http/Controllers/ChatController.php

<?php

namespace AppHttpControllers;

use AppEventsChatMessageSent;
use IlluminateHttpRequest;

class ChatController extends Controller
{
    public function sendMessage(Request $request)
    {
        $message = [
            'user_id' => $request->user()->id,
            'room_id' => $request->get('room_id'),
            'message' => $request->get('message'),
        ];

        event(new ChatMessageSent($message));

        return response()->json(['status' => 'Message Sent!']);
    }
}

上記のコードでは、event(new ChatMessageSent($message)) がイベントをトリガーし、 sends メッセージ データを含むブロードキャスト イベント。

リアルタイム通信の確立

最後に、JavaScript クライアントで Laravel Echo を使用してブロードキャスト イベントをリッスンし、リアルタイム WebSocket 通信を取得する必要があります。 JavaScript では、ブロードキャスト イベントをリッスンする 2 つの方法を使用できます。

• Echo.channel(channelName).listen(eventName, callback): ブロードキャスト イベントをサブスクライブし、Executed when を受信するコールバック関数を登録します。イベントが発生します。
• Echo.private(channelName).listen(eventName, callback): プライベート ブロードキャスト イベントをサブスクライブし、イベントの受信時に実行するコールバック関数を登録します。

たとえば、チャット アプリケーションでは、次のコードを使用して新しいメッセージのイベントをリッスンできます:

// resources/js/app.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.${roomId}`)
    .listen('ChatMessageSent', (e) => {
        console.log(e);
    });

上記のコードでは、Laravel Echo クライアントを使用して、 「chat.roomId」チャネルをサブスクライブし、「ChatMessageSent」イベントを受信したときにイベント データを出力します。

結論

Laravel Echo とプッシャー PHP SDK を使用すると、WebSocket サーバーを簡単にセットアップし、ブロードキャスト チャネルを使用して WebSocket 通信を実装できます。クライアント側では、JavaScript と Laravel Echo を使用してメッセージをリアルタイムで監視し、リアルタイム通信を実現できます。

さらに、Laravel Echo は、複雑な Web アプリケーションを構築するために使用できる、他の多くのブロードキャスト チャネルやイベントを提供します。最新のリアルタイム通信ソリューションをお探しの場合は、Laravel Echo とプッシャー PHP SDK が良い選択です。

以上がLaravel 開発: Laravel Echo を使用して WebSocket 通信を実装するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。