Laravel 開発: Laravel Echo Server を使用して WebSocket 通信を?qū)g裝するにはどうすればよいですか?

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

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

この記事では、Laravel Echo Server を使用して WebSocket 通信を?qū)g裝する方法について説明します。

ステップ 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 - 設(shè)定ファイル

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

$ laravel-echo-server init

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

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

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

{
    "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: 特定のデータベース構(gòu)成。ここでは Redis を使用します。
• devMode: true に設(shè)定すると、デバッグ ログが表示されます。
• host: Echo Server がリッスンするアドレスを定義します。設(shè)定されていない場合、Echo サーバーは利用可能なすべてのネットワーク インターフェイスをリッスンします。
• port: Echo Server がリッスンするポートを定義します。
• protocol: Echo Server によって使用されるプロトコルを定義します。
• socketio: より高度な設(shè)定パラメータについては、ドキュメントを參照してください。
• sslCertPath: SSL ルート証明書へのパス。
• sslKeyPath: SSL キーへのパス。
• sslCertChainPath: オプションの SSL ルート証明書チェーンをアップロードするために使用されます。
• sslPassphrase: SSL キーが書き込まれる場合、この値が必要になる場合があります。
• subscribers: Echo Server にサブスクライブできるクライアントのタイプを定義します。
• apiOriginAllow: クロスドメインリクエストを許可するホスト。

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

$ laravel-echo-server start

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

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

<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 サーバーとフロントエンド コードが正常に構(gòu)成されました。これらのツールは、次のようなさまざまなアプリケーション シナリオに使用できます。

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

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

Laravel の broadcast 関數(shù)を使用して、これらのロジックを?qū)g裝できます。ブロードキャストの使用方法については、Laravel のドキュメントを參照してください。

結(jié)論

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

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

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

以上がLaravel 開発: Laravel Echo Server を使用して WebSocket 通信を?qū)g裝するにはどうすればよいですか?の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。