Ground Sunlight

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

ユーザ用ツール

サイト用ツール

トレース:
ratchet:0.4:push

差分

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

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

両方とも前のリビジョン 前のリビジョン
次のリビジョン 		前のリビジョン
次のリビジョン 両方とも次のリビジョン
ratchet:0.4:push [2020/12/01 11:16]
y2sunlight [WebSockサーバー] 		ratchet:0.4:push [2020/12/01 17:28]
y2sunlight [クライアントサイド]
行 307: 行 307:
   * ''blog'' --- ブログ側のソースコード一式   * ''blog'' --- ブログ側のソースコード一式
  
-準備が出来たら、プロジェクトフォルダの準備ができたら、''composer install'' を実行します。+準備が出来たら、コマンドプロンプトでプロジェクトフォルダに移動して、''composer install'' を実行します。
  
 \\ \\
  
 ==== WebSockサーバー ==== ==== WebSockサーバー ====
 +
 +以下のWebSockサーバーを ''{Project-Folder}/bin'' の下に配置します。
  
 {{fa>folder-open-o}} ** {Project-Folder}/bin/push-server.php ** {{fa>folder-open-o}} ** {Project-Folder}/bin/push-server.php **
行 359: 行 361:
 </code> </code>
  
 +  * 前半のWebSocketサーバーのセットアップの部分は[[#全てを結合する|オリジナル]]のコードと同じです。
 +  * 後半部分は、プッシュ用のメッセージ受信のために着信TCPソケットをセットアップし、それをWebSocketサーバーと同じイベントループで処理しています。
 +  * プッシュ用のメッセージを受信した時、Pusher の onBlogEntry() を明示的に呼び出しています。 
 +
 +Pusherクラスについては、デバッグライトを追加した以外は、[[#ZeroMQ メッセージの処理|オリジナル]]のコードと同じです。これは、''{Project-Folder}/src'' に配置します。
  
 {{fa>folder-open-o}} ** {Project-Folder}/src/Pusher.php ** {{fa>folder-open-o}} ** {Project-Folder}/src/Pusher.php **
行 424: 行 431:
 \\ \\
  
-==== ブログポスト ====+==== ブログ投稿ページ ==== 
 + 
 +新しいブログ投稿を処理する為のコードは、新規に作成し直しました。このコードは ''{Project-Folder}/blog'' に配置します。
  
 {{fa>folder-open-o}} ** {Project-Folder}/blog/entry.php ** {{fa>folder-open-o}} ** {Project-Folder}/blog/entry.php **
行 481: 行 490:
 </html> </html>
 </code> </code>
 +
 +  * ブログが投稿された時(POSTメソッドでは)、WebSocketサーバーへPHPのソケット関数(stream_socket_client)を使い、メッセージを送信しています。\\ \\ 
 +  * GETメソッドでこのスクリプトが呼び出された場合は、投稿用のHTMLをレンダリングします：
 +    * ブラウザ表示用のフレームワークとしてbootstrapを使用しています。
 +    * 投稿ページは ''entry.template.php'' に保存されているものを include() して使用します。
  
 \\ \\
行 486: 行 500:
 ==== クライアントサイド ==== ==== クライアントサイド ====
  
-{{fa>folder-open-o}} ** {Project-Folder}/bin/xxx.php ** +クライアントサイドのメインのソースコードは上に掲載した [[#ブログ投稿ページ|entry.php]] 内のHTMLです。メインで使っている他のソースコードは以下の通りです。 
-<code php xxx.php>+ 
 +  * template/entry.template.php --- ブログ投稿画面のHTML 
 +  * js/main.js --- WebSocketとの接続、購読を行うJavaScript 
 +  * js/autobahn.js --- WAMP(V1)のJavaScriptライブラリー 
 + 
 +以下は、ブログ投稿画面のHTMLです。このコードは ''{Project-Folder}/blog/template'' に配置します。 
 + 
 +{{fa>folder-open-o}} ** {Project-Folder}/blog/template/entry.template.php ** 
 +<code html entry.template.php> 
 +<h1>Blog Entry</h1> 
 +<form method="POST" name="fm"> 
 + 
 +    <div class="form-group row"> 
 +        <label for="category" class="col-md-2 col-form-label">Category</label> 
 +        <div class="col-md-10"> 
 +            <select name="category" id="category" class="form-control" required> 
 +                <option value="kittensCategory">kittensCategory</option> 
 +                <option value="category2">Category2</option> 
 +                <option value="category3">Category3</option> 
 +            </select> 
 +        </div> 
 +    </div> 
 + 
 +    <div class="form-group row"> 
 +        <label for="title" class="col-md-2 col-form-label">Title</label> 
 +        <div class="col-md-10"> 
 +            <input type="text" name="title" id="title" class="form-control" required> 
 +        </div> 
 +    </div> 
 + 
 +    <div class="form-group row"> 
 +        <label for="article" class="col-md-2 col-form-label">Article</label> 
 +        <div class="col-md-10"> 
 +            <textarea name="article" id="article" class="form-control" required></textarea> 
 +        </div> 
 +    </div> 
 + 
 +    <div class="mt-4"> 
 +        <input type="submit" id="btn_submit" class="btn btn-primary"> 
 +    </div> 
 + 
 +</form>
 </code> </code>
 +
 +以下は、WebSocketとの接続、購読を行うJavaScriptです。このコードは ''{Project-Folder}/blog/js'' に配置します。
 +
 +{{fa>folder-open-o}} ** {Project-Folder}/blog/js/main.js **
 +<code javascript main.js>
 +/*
 + * Subscribe Session
 + */
 +var conn = new ab.Session('ws://localhost:8080',
 +    function() {
 +        conn.subscribe('kittensCategory', function(topic, data) {
 +            console.log('New article published to category "' + topic + '" : ' + data.title);
 +            $('#new-articles').prepend('<dt>'+data.title+'</dt><dd>'+data.article+'</dd>');
 +        });
 +    },
 +    function() {
 +        console.warn('WebSocket connection closed');
 +    },
 +    {'skipSubprotocolCheck': true}
 +);
 +</code>
 +
 +  * ページロード時に、WebSocketサーバー( <nowiki>ws://localhost:8080</nowiki> )に接続し「kittensCategory」の購読を開始します。
 +  * 他のユーザが「kittensCategory」のブログを投稿した時、''#new-articles'' のIDを持つHTML要素に対して、定義リスト(DL)を追加します。
 +
 +=== WAMP(V1)について ===
 +
 +WAMP(V1)のJavaScriptライブラリーは、以下に設置します：
 +
 +<code>
 +{Project-Folder}/blog/js/autobahn.js
 +</code>
 +
 +このライブラリーは、以下より取得して設置しました。
 +
 +<code>
 +https://gist.githubusercontent.com/cboden/fcae978cfc016d506639c5241f94e772/raw/e974ce895df527c83b8e010124a034cfcf6c9f4b/autobahn.js
 +</code>
 +
 +この autobahn.js は、WAMP のバージョン1対応のライブラリです。Ratchet は WAMP のバージョン2をサポートしていないので、敢えて [[https://github.com/crossbario/autobahn-js|AutobahnJS]] の古いライブラリーを使用しています。
 +
 +''補足''
 +
 +WAMPとは WebSocket Application Messaging Protocol の略で、次の機能を提供するWebSocketのサブプロトコルです。
 +  * ルーティングされたリモートプロシージャコール
 +  * パブリッシュ & サブスクライブ
 +
 +詳しくは以下を参照：
 +  * https://wamp-proto.org/
  
 \\ \\
 +
 +==== プログラムの実行 ====
 +
 +コマンドプロンプトでプロジェクトフォルダに移動してWebSocketサーバーを起動します。
 +
 +<code>
 +php bin/push-server.php
 +</code>
 +
 +ブラウザで ''entry.php'' を２つのブラウザーからアクセスします。一方のブラウザで、プログを投稿します。
 +
 +[{{:ratchet:0.4:rachet-push02.png?nolink&400|}}]
 +
 +
 +
 +
  
ratchet/0.4/push.txt · 最終更新: 2020/12/01 17:32 by y2sunlight

ページ用ツール

特に明示されていない限り、本Wikiの内容は次のライセンスに従います： CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki