Think-Swoole チュートリアル - WebSocket の概要、イベント、データ送信

WebSocket とは

WebSocket プロトコルは、クライアントとサーバー間のデータ交換を可能にする、TCP ベースの新しいネットワーク プロトコルです。これにより、サーバーがデータをクライアントにアクティブにプッシュできるようになります。 WebSocket API では、ブラウザとサーバーはハンドシェイクを完了するだけでよく、双方向データ送信のために両者の間に永続的な接続を直接作成できます。

WebSocket が必要な理由

HTTP 通信はクライアントによってのみ開始できるためです。

WebSocket の特徴は何ですか

• TCP プロトコルに基づいて構築されています

• パフォーマンスが低いオーバーヘッドが発生するため、通信は効率的です

• #クライアントは任意のサーバーと通信できます

#プロトコル識別: ws、wss
永続的ネットワーク通信プロトコル

WebSocket の使用シナリオ

ソーシャル チャット、弾幕、マルチプレイヤー ゲーム、共同編集、株式 Real - タイムファンド相場、スポーツのライブアップデート、ビデオ会議チャット、位置ベースのアプリケーション、オンライン教育、および高いリアルタイムパフォーマンスを必要とするその他のアプリケーションシナリオ。

WebSocket が登場する前、チャット プログラムを作成する従来の方法は、JavaScript タイマーを使用して HTTP リクエストをサーバーに毎秒送信し、新しいメッセージがあるかどうかを確認することでした。

WebSocket では、クライアントがブラウザを介して HTTP モードで WebSocket 接続要求をサーバーに送信し、サーバーが応答を送信します。このプロセスは通常「ハンドシェイク」と呼ばれます。ブラウザとサーバーはハンドシェイク アクションを実行するだけで済み、ブラウザとサーバーの間に高速チャネルが形成され、プロトコルが WebSocket にアップグレードされます。新しいメッセージがある場合、サーバーはメッセージをクライアントにアクティブにプッシュします。

SocketIO とは何ですか?

WebSocket は HTML5 によって提案された最新の仕様です。主流のブラウザはすでにサポートしていますが、まだ互換性がない可能性があります。すべて ブラウザは、プログラマに一貫したプログラミング エクスペリエンスを提供します。SocketIO は、WebSocket、AJAX、およびその他の通信メソッドを統一された通信インターフェイスにカプセル化します。つまり、SocketIO を使用する場合、最下層の互換性の問題を心配する必要はありません。コミュニケーションに最適な方法が自動的に選択されます。したがって、WebSocket は SocketIO のサブセットであり、Think-Swoole はサーバーに送信されたデータを SocketIO に従って解析します。

ThinkPHP 6 で WebSocket サービスを有効にする

1. 構成ファイル config/swoole.php の「websocket.enable」を true に設定します。

2. リスニング イベントを作成し、WsConnect、WsClose、および WsTest を作成します (これは任意に名前を付けることができ、クライアントに対応する必要があります)。プロジェクトのルート ディレクトリに次のコマンドを入力します。 app/ 先ほど作成したリスニングクラスファイルがリスナーディレクトリに生成され、対応するイベントクラスにビジネスロジックを記述することができます。まずここで $event 変数を出力しましょう。 Connect イベントの $event は app\Request リクエスト オブジェクトであり、Test カスタム メッセージ受信イベントの $event はクライアントによって送信されたメッセージです。

3. app/event.php の配列リッスン キーでイベント リスニング クラスを定義します:

php think make:listener WsConnect
php think make:listener WsClose
php think make:listener WsTest

swoole.websocket.Connect: クライアントはサーバーとの接続を確立し、ハンドシェイクを完了します。イベント、つまり Swoole の onOpen イベントです。ここに、自分のプログラムのユーザーとクライアント間の接続 ID (fd) などを記録します。必須ではありませんが、定義を推奨します。

swoole.websocket.Close: クライアント接続終了イベント (オプション)。

swoole.websocket.Test: カスタマイズされたテスト イベント; クライアントによって送信されたテスト イベント メッセージを受信するために使用されます。プロジェクトでは、チャット、ポジショニング、カスタマー サービス機能イベントなど、Test1、Test2、Test3 などに対応する複数のテスト イベントを定義できます。

WebSocket イベントは、config/swoole.php 設定ファイルの「websocket.listen」でも設定できます:

app/event.php
'listen'    => [
        'AppInit'  => [],
        'HttpRun'  => [],
        'HttpEnd'  => [],
        'LogLevel' => [],
        'LogWrite' => [],
        //监听连接，swoole 事件必须以 swoole 开头
        'swoole.websocket.Connect' => [
            app\listener\WsConnect::class
        ],
        //监听关闭
        'swoole.websocket.Close' => [
            \app\listener\WsClose::class
        ],
        //监听 Test 场景
        'swoole.websocket.Test' => [
            \app\listener\WsTest::class
        ],
    ],

4. プロジェクトのルート ディレクトリでサービスを開始します: php think swoole最下層は、現在のリクエストが HTTP であるか WebSocket であるかを自動的に判断します。

クライアントとサーバー間の接続の確立

次に、HTML ページを作成し、HTML5 WebSocket を介してサーバーへの接続を確立します。次の内容を含む新しい test.html を任意の場所に作成します:

'listen' => [
    // 首字母大小写都可以；值应该是字符串非数组
    'connect' => 'app\listener\WsConnect',
    'close'   => 'app\listener\WsClose',
    'test'    => 'app\listener\WsTest'
],

HTML5 WebSocket 概要については、ここにアクセスして学習できます。

フロントエンド コードでは、 var ws = new WebSocket("ws://127.0.0.1:9501/"); 私のサーバーはローカルであり、ポート番号は swoole.php 構成ファイルで構成されています。は 9501 なので、127.0.0.1:9501 にアクセスしてください。ws は WebSocket プロトコルで、HTTP や HTTPS と同様に、WS プロトコルと WSS プロトコルがあります。 ws.onmessage はメッセージを受け入れることができます。

次に、ブラウザからこの HTML ページにアクセスし、ブラウザ デバッグ コンソールを開きます。接続成功という文字と、サーバーによって出力されたパラメータが表示されます。

次に、作成したばかりの HTML ページの入力ボックスにメッセージを送信すると、情報がコンソールに表示されます。

Swoole リスニング サービス ターミナルも、送信したメッセージを受信しました:

これは、app/listener /WsTest にあるためです。 $event 変数を出力します。

最後に、フロントエンドページのコード ws.send(JSON.stringify(['test',{to:to,message:message}])); について説明します。 .stringify() は JavaScript オブジェクトを JSON 文字列に変換します。to 属性と message 属性はカスタマイズされています。Test はバックエンドによって定義された Test イベントです。この名前はバックエンドに対応する必要があります。 think-swoole は送信されたデータを SocketIO に従って解析するため、送信するデータは "['イベント名', 送信される実際のデータ]" の文字列形式である必要があります。最初のパラメーター テストは、対応するサーバーです。 テスト イベント最後のパラメータは、より多くのシナリオでリアルタイム通信ロジック ビジネスを区別するために使用されます。2 番目のパラメータは、実際に送信するデータであり、文字列、データ、またはオブジェクトにすることができます。これは、サーバー側の $event パラメータによって取得されます。

以上がThink-Swoole チュートリアル - WebSocket の概要、イベント、データ送信の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。