Laravel 開発: Laravel Echo と Pusher を使用して WebSocket 通信を実装するにはどうすればよいですか?

Laravel は、拡張性と効率性に優れた人気の PHP フレームワークであり、開発者が高品質の Web アプリケーションを迅速に構築できるように、多くの強力なツールとライブラリを提供します。その中でも、Laravel Echo と Pusher は、WebSocket 通信を簡単に実装できる 2 つの非常に重要なツールであり、この記事では、Laravel アプリケーションでこれら 2 つのツールを使用する方法について詳しく説明します。

1. WebSocket とは何ですか?

WebSocket は、より高いリアルタイム性とより高速なデータ送信を実現できる双方向通信プロトコルです。従来の HTTP リクエストと比較して、WebSocket は、リクエストや応答がない場合でも接続の状態を維持し、クライアントとサーバーの間でデータを転送できます。 WebSocket は、より優れたユーザー エクスペリエンスとより高いアプリケーション パフォーマンスを提供し、チャット アプリケーションやゲームなどのさまざまなリアルタイム アプリケーション シナリオで使用できます。

2. Laravel Echo と Pusher の概要

Laravel Echo は、クライアント上でリアルタイム通信チャネルに接続できるようにする、シンプルで一貫した API を提供するイベント ブロードキャスト フレームワークです。側面もEcho は Pusher に依存しており、Pusher が利用できない場合は Redis を代替として使用できます。 Pusher は、アプリケーションにリアルタイム機能を簡単に追加できるリアルタイム WebSocket サービスです。Pusher は、すべての WebSocket 管理タスクをサードパーティ サービスにオフロードしてパフォーマンスを向上できるホスト型ソリューションです。ビジネス ロジックに焦点を当てます。アプリケーションの。

3. Laravel Echo と Pusher の構成

Laravel プロジェクトでは、まず Echo と Pusher をインストールする必要があります。composer コマンドを使用してインストールできます:

composer require pusher/pusher-php-server pusher/pusher-http-laravel beyondcode/laravel-websockets
npm install --save laravel-echo pusher-js

インストール完了後、.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

次に、config/broadcasting.php ファイルで、ブロードキャスターをプッシャーとして構成します:

'default' => env('BROADCAST_DRIVER', 'pusher'),

'connections' => [
    '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,
        ],
    ],
],

4. Pusher Laravel WebSockets を使用すると WebSocket サーバーが実行されます

Pusher には、独自のサーバー上で WebSocket サーバーを実行できるオープン ソース ライブラリ Laravel WebSockets があり、それによってコストを節約し、パフォーマンスと柔軟性を向上させることができます。具体的な操作は次のとおりです。

1. Laravel WebSocket の実行に必要なデータベース テーブルとデータをインストールします

   php artisan websocket:install

   ログイン後にコピー

2. Laravel WebSocket に必要な構成を入力します

   php artisan websocket:publish

   ログイン後にコピー
3. リスナーを作成します (EventServiceProvider 内)

protected $listen = [
    'AppEventsExampleEvent' => [
        'AppListenersExampleListener',
    ],
];

4. イベントを処理します

   <?php
   
   namespace AppEvents;
   
   use IlluminateBroadcastingInteractsWithSockets;
   use IlluminateFoundationEventsDispatchable;
   use IlluminateQueueSerializesModels;
   
   class ExampleEvent
   {
    use Dispatchable, InteractsWithSockets, SerializesModels;
   
    public $data;
   
    public function __construct($data)
    {
        $this->data = $data;
    }
   
    public function broadcastOn()
    {
        return ['test_channel'];
    }
   
    public function broadcastAs()
    {
        return 'example-event';
    }
   }

   ログイン後にコピー

次に、次のコードはイベントをプッシュします:

use AppEventsExampleEvent;
use IlluminateSupportFacadesEvent;

Event::dispatch(new ExampleEvent(‘Example payload’, ‘Another example payload’));

5. フロントエンドで Laravel Echo と Pusher を使用する方法

フロントエンドで Laravel Echo と Pusher を使用するのは非常に簡単です簡単ですが、以下は基本的な例です。

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

let pusher = new Pusher(process.env.MIX_PUSHER_APP_KEY, {
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    encrypted: true,
})
let echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    encrypted: true,
    auth: {
        headers: {
            ‘Authorization’: ‘Bearer {access_token}’,
        },
    },
})

上記の方法により、Laravel Echo と Pusher を使用して、Laravel アプリケーションに WebSocket 通信を実装できます。

概要

Laravel Echo と Pusher は、非常に便利で高速な WebSocket ソリューションを提供し、高パフォーマンスのリアルタイム Web アプリケーションを迅速に構築できるようにします。この記事では、Laravel EchoとPusherの設定方法と、PusherのLaravel WebSocketを使用してローカルにWebSocketサーバーを構築すると同時に、Laravel EchoとPusherを使用してフロントエンドのWebSocketサーバーに接続してリアルタイム性を実現する方法を詳しく紹介します。コミュニケーション能力。

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