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

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

最新の Web アプリケーションでは、リアルタイムのメッセージ通信が非常に重要です。 WebSocket は双方向通信のためのプロトコルです。 HTTP に加えて、WebSocket を使用すると、サーバーは必要に応じてクライアントにメッセージを送信できます。

Laravel Echo Server は、リアルタイム メッセージ通信のために Node.js 上に構築された WebSocket サーバーです。 Laravel Echo パッケージを使用すると、WebSocket 経由でクライアントと簡単に通信できるため、リアルタイム通信の確立が容易になります。

この記事では、Laravel Echo Server を使用して WebSocket 通信を実装する方法について説明します。

ステップ 1 - Laravel と Laravel Echo のインストール

Laravel Echo Server を使用する前に、Laravel とその依存関係をインストールする必要があります。

Laravel についての詳細は、次の場所で見つけることができます: https://laravel.com/docs/8.x/installation

同様に、この記事では、Laravel も以下の必要があります。エコーバッグを取り付けました。 Composer を使用してインストールできます:

$ composer require laravel/echo

ステップ 2 - Laravel Echo Server をインストールする

次に、Laravel Echo Server をインストールする必要があります。

$ npm install -g laravel-echo-server

ステップ 3 - 設定ファイル

Laravel Echo Server がインストールされたら、設定ファイルを作成する必要があります。デフォルトの構成ファイルは、次のコマンドを使用して生成できます。

$ laravel-echo-server init

これにより、現在のディレクトリに laravel-echo-server.json ファイルが生成されます。

次に、このファイルの構成の一部を変更して、アプリケーションのニーズを確実に満たすようにする必要があります。

laravel-echo-server.json ファイルで、次のプロパティを構成する必要があります:

{
    "authHost": "http://your-app.com",
    "authEndpoint": "/broadcasting/auth",
    "clients": [],
    "database": "redis",
    "databaseConfig": {
        "redis": {
            "host": "127.0.0.1",
            "port": "6379"
        }
    },
    "devMode": true,
    "host": null,
    "port": "6001",
    "protocol": "http",
    "socketio": {},
    "sslCertPath": "",
    "sslKeyPath": "",
    "sslCertChainPath": "",
    "sslPassphrase": "",
    "subscribers": {
        "http": true,
        "redis": true
    },
    "apiOriginAllow": {
        "allowCors": false,
        "allowOrigin": "",
        "allowMethods": "",
        "allowHeaders": ""
    }
}

• authHost: 定義します。 Echo Server リッスンするアドレス (通常はアプリケーションのアドレスと同じ)。
• authEndpoint: Echo サーバーがクライアントが認証のための認証情報を送信するのを待機するアドレスを定義します。
• database: Echo Server が接続およびチャネル情報を保存するために使用するデータベースのタイプを定義します。
• databaseConfig: 特定のデータベース構成。ここでは Redis を使用します。
• devMode: true に設定すると、デバッグ ログが表示されます。
• host: Echo Server がリッスンするアドレスを定義します。設定されていない場合、Echo サーバーは利用可能なすべてのネットワーク インターフェイスをリッスンします。
• port: Echo Server がリッスンするポートを定義します。
• protocol: Echo Server によって使用されるプロトコルを定義します。
• socketio: より高度な設定パラメータについては、ドキュメントを参照してください。
• sslCertPath: SSL ルート証明書へのパス。
• sslKeyPath: SSL キーへのパス。
• sslCertChainPath: オプションの SSL ルート証明書チェーンをアップロードするために使用されます。
• sslPassphrase: SSL キーが書き込まれる場合、この値が必要になる場合があります。
• subscribers: Echo Server にサブスクライブできるクライアントのタイプを定義します。
• apiOriginAllow: クロスドメインリクエストを許可するホスト。

上記の設定を完了し、laravel-echo-server.json ファイルを保存したら、次のコマンドを使用して Echo サーバーを起動できます:

$ laravel-echo-server start

ステップ 4 - フロントエンド コード

次に、Echo パッケージをフロントエンド コードに導入する必要があります。必ず次のコードを下部に追加してください。

<script src="https://cdn.jsdelivr.net/npm/laravel-echo@1.9.3/dist/echo.js"></script>

JavaScript ファイルに次のコードを追加します。

import Echo from 'laravel-echo'

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001',
    auth: {
        headers: {
            'Authorization': 'Bearer ' + token
        }
    }
});

window.Echo.channel('YourChannel')
    .listen('YourEvent', (e) => {
        console.log(e);
    });

これにより、Echo サーバーに接続し、アクセス許可の呼び出しを使用して認証されます。 YourChannel チャネルも作成され、YourEvent イベントをリッスンします。

ステップ 5 - アプリケーション シナリオ

これで、Laravel Echo サーバーとフロントエンド コードが正常に構成されました。これらのツールは、次のようなさまざまなアプリケーション シナリオに使用できます。

• リアルタイム チャット ルーム アプリケーション
• リアルタイム ブログ コメント
• リアルタイムユーザーステータスの更新

Echo Server は WebSocket 通信のサーバー側のみを実装することに注意してください。リアルタイム通信の機能を実装する必要がある場合は、アプリケーションに対応するロジックも実装する必要があります。

Laravel の broadcast 関数を使用して、これらのロジックを実装できます。ブロードキャストの使用方法については、Laravel のドキュメントを参照してください。

結論

この記事では、Laravel Echo Server を使用して WebSocket 通信を実装する方法について詳しく説明しました。

このプロセスはシンプルで、さまざまなリアルタイム アプリケーションの実装に使用でき、ユーザーにメッセージを送信し、リアルタイムでフィードバックを受け取ることができます。

Laravel Echo Server を使用すると、効率的なリアルタイム通信アプリケーションをより簡単に実装し、アプリケーションのユーザー エクスペリエンスと対話性を向上させることができます。

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