Ground Sunlight

Windowsで作る - PHPプログラミングの開発環境

ユーザ用ツール

サイト用ツール


ratchet:0.4:tutorial

差分

このページの2つのバージョン間の差分を表示します。

この比較画面にリンクする

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
ratchet:0.4:tutorial [2020/11/16 17:33]
y2sunlight [チャットロジックの実装]
ratchet:0.4:tutorial [2020/11/30 22:19] (現在)
y2sunlight [Ratchet チュートリアル]
行 1: 行 1:
-> 編集中 
- 
 ====== Ratchet チュートリアル ====== ====== Ratchet チュートリアル ======
 Version 0.4.3 Version 0.4.3
行 11: 行 9:
 関連記事 関連記事
   * Ratchet チュートリアル   * Ratchet チュートリアル
-  * [[Ratchet:0.4:deployment|Ratchet デプロイ方法]]+  * [[Ratchet:0.4:push|Ratchet Push統合]]
  
 リンク リンク
行 164: 行 162:
 > [[https://www.php.net/manual/ja/class.splobjectstorage.php|SplObjectStorage]] は、PHP 5.2 以降に搭載された便利なコンテナクラスです。 > [[https://www.php.net/manual/ja/class.splobjectstorage.php|SplObjectStorage]] は、PHP 5.2 以降に搭載された便利なコンテナクラスです。
  
-[{Project-Folder}/src/Chat.php]] +{{fa>folder-open-o}} ** {Project-Folder}/src/Chat.php ** 
-<code php>+<code php Chat.php>
 <?php <?php
 namespace MyApp; namespace MyApp;
行 213: 行 211:
 </code> </code>
  
-  * __construct --- ''SplObjectStorage''オブジェクトを作成します+  * <nowiki>__construct</nowiki> --- ''SplObjectStorage''オブジェクトを作成します
   * onOpen    --- 着信した接続を ''SplObjectStorage''オブジェクトに格納します   * onOpen    --- 着信した接続を ''SplObjectStorage''オブジェクトに格納します
   * onMessage --- 送信者以外の全ての端末に、着信メッセージを送信します   * onMessage --- 送信者以外の全ての端末に、着信メッセージを送信します
   * onClose   --- ''SplObjectStorage''オブジェクトからクローズされた接続を除外します   * onClose   --- ''SplObjectStorage''オブジェクトからクローズされた接続を除外します
   * onError   --- エラーの発生した接続を閉じます   * onError   --- エラーの発生した接続を閉じます
 +
 +非常にシンプルなロジックですが、Ratchet の ''MessageComponentInterface'' を理解するには良い例題です。
  
 \\ \\
  
 ===== チャットアプリの実行 ===== ===== チャットアプリの実行 =====
 +
 アプリケーションが完成したので、実行してみましょう。 アプリケーションが完成したので、実行してみましょう。
  
-まず、コマンドプロンプトからチャットサーバ(chat-server.php) を起動します。+まず、コマンドプロンプトチャットサーバ (''chat-server.php'') を起動します。
  
 <code> <code>
行 231: 行 232:
  
 別のコマンドプロンプトから以下のようにTelnetを起動します。 別のコマンドプロンプトから以下のようにTelnetを起動します。
 +
 +> Telnet が有効になっていない場合は、[[http://www.y2sunlight.com/ground/doku.php?id=tools:telnet|こちら]]をご覧下さい。
  
 <code> <code>
行 236: 行 239:
 </code> </code>
  
-この時チャットサーバから以下が出力されます。+この時チャットサーバから以下のメッセージが出力されます。 
 <code> <code>
 New connection! (37) New connection! (37)
 </code> </code>
  
-さらに、別のコマンドプロンプトから以下のようにTelnetを起動します。+さらに、別のコマンドプロンプトからTelnetを起動します。
  
 <code> <code>
行 247: 行 251:
 </code> </code>
  
-この時チャットサーバから以下が出力されます。+上と同じように、チャットサーバから2番目のメッセージが出力されます。 
 <code> <code>
 New connection! (37) New connection! (37)
行 253: 行 258:
 </code> </code>
  
 +Telnetを起動した一方のコマンドプロンプトから、メッセージ('' Hello World!'' )を入力すると、他方のウィンドウにメッセージが表示されます。尚、Telnetを終了するには、''ctrl + ]'' でコマンドモードに移行し、''quit'' コマンドを入力します。
  
-Telnetを起動したコマンドプロンプトから、メッセージ( "Hello World!")を入力すると、 +ここまではTCPレベルのアプローチです。主な機能は MessageComponentInterface に集約されており、イベントハンドリングが主体で、WebSocketAPI はまだ機能していません。
-他のウィンドウに表示されます。 +
-ctrl+] でコマンドモードに移行し、quitで終了できます。 +
- +
-ここまではTCPレベルのアプローチです。主な機能はMessageComponentInterfaceに集約されており、 +
-イベントハンドリングが主体で、WebSocketAPIはまだ機能していません。+
  
 \\ \\
  
 ===== WebSocketへの対応 ===== ===== WebSocketへの対応 =====
-基本的なチャットアプリケーションが機能するようになったので、 
-それをWebブラウザでそれが機能するようにチャットサーバを変更します。 
  
-[{Project-Folder}/bin/chat-server-ws.php]+基本的なチャットアプリケーションが機能するようになったので、今度はWebブラウザでそれが機能するようにチャットサーバを変更します。 
 + 
 +{{fa>folder-open-o}} ** {Project-Folder}/bin/chat-server-ws.php **
 <code php chat-server-ws.php> <code php chat-server-ws.php>
 <?php <?php
行 287: 行 288:
 </code> </code>
  
-WsServerを使用すると[[https://developer.mozilla.org/ja/docs/Web/API/WebSocket|W3C WebSocketAPI]]を使用するWebブラウザーと通信できるようになります。 +[[http://socketo.me/docs/websocket|WsServer]] を使用すると [[https://developer.mozilla.org/ja/docs/Web/API/WebSocket|W3C WebSocketAPI]] を使用するWebブラウザーと通信できるようになります。[[http://socketo.me/docs/http|HttpServer]] は、着信HTTPリクエストの解析を担当します。このクラスの目的は、完全なHTTPヘッダー要求を受信して渡すまでデータをバッファリングすることで、 
-HttpServerは、着信HTTPリクエストの解析を担当します。このクラスの目的は、完全なHTTPヘッダー要求を受信して渡すまでデータをバッファリングすることで、 +WebSocket リクエストをアップグレードするためのものです。
-WebSocketリクエストをアップグレードするためのものです。+
  
 +このチャットをテストするために、次のファイルを作ります。(HTMLファイルでも問題ありません)
  
-このサーバをテストするために、次のファイルを作ります。(HTMLファイルでも問題ありません) +{{fa>folder-open-o}} ** {Project-Folder}/src/test-ws.php **
- +
-[{Project-Folder}/src/test-ws.php]+
 <code html client-ws.html> <code html client-ws.html>
 <script type="text/javascript"> <script type="text/javascript">
行 309: 行 308:
  
  
-コマンドプロンプトでチャットサーバ(chat-server-ws.php)を実行します。+コマンドプロンプトでチャットサーバ(''chat-server-ws.php'')を実行します。
  
 <code> <code>
行 315: 行 314:
 </code> </code>
  
-2つのブラウザウィンドウを開いてtest-ws.php にアクセスします。 +次に、2つのブラウザウィンドウを開いて ''test-ws.php'' にアクセスし、ブラウザの開発ツールを開いて下さい。そして、デバックコンソール次のメッセージが出力されていることを確認して下さい。
-そして、ブラウザの開発ツールを開デバックコンソールへの次のメッセージを確認して下さい。+
  
 <code> <code>
行 322: 行 320:
 </code> </code>
  
-このメッセージが出ていたら、一方のデバックコンソールから次のコードを実行します:+このメッセージが出ていたら、一方のブラウザのデバックコンソールから次のコードを実行します:
  
 <code> <code>
-conn.send(こんにちは');+conn.send('Hello World!');
 </code> </code>
  
 この時、他方のデバックコンソールに "Hello World!" が表示されます。 この時、他方のデバックコンソールに "Hello World!" が表示されます。
 +
 +これで Ratchet のチュートリアル「Hello World!」を終わります。
 +
 \\ \\
  
ratchet/0.4/tutorial.1605515580.txt.gz · 最終更新: 2020/11/16 17:33 by y2sunlight