Ground Sunlight

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

ユーザ用ツール

サイト用ツール


ratchet:0.4:push

差分

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

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

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
ratchet:0.4:push [2020/12/01 13:06]
y2sunlight [クライアントサイド]
ratchet:0.4:push [2020/12/01 17:32] (現在)
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 **
行 458: 行 467:
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
-    <!-- stylesheet --> 
-    <link href="css/main.css?v=<?php echo getenv('app-version')?>" rel="stylesheet"> 
     <!-- javascript -->     <!-- javascript -->
     <script src="js/autobahn.js"></script>     <script src="js/autobahn.js"></script>
行 481: 行 488:
 </html> </html>
 </code> </code>
 +
 +  * ブログが投稿された時(POSTメソッドでは)、WebSocketサーバーへPHPのソケット関数(stream_socket_client)を使い、メッセージを送信しています。\\ \\ 
 +  * GETメソッドでこのスクリプトが呼び出された場合は、投稿用のHTMLをレンダリングします:
 +    * ブラウザ表示用のフレームワークとしてbootstrapを使用しています。
 +    * 投稿ページは ''entry.template.php'' に保存されているものを include() して使用します。
  
 \\ \\
行 486: 行 498:
 ==== クライアントサイド ==== ==== クライアントサイド ====
  
-クライアントサイドのは ''{Project-Folder}/blog'' 下の以下のフォルダ保存ます。 +クライアントサイドのメインのソスコード掲載た [[#ブログ投稿ページ|entry.php]] 内のHTMLです。メインで使っている他ソースコードは以下通りです。
- +
-  * template --- ブログ画面スタブになるHTMLを保存 +
-  * js --- WebSocketと接続、購読設定を行うJavaScriptを保存+
  
-クライアントサイドのメインのソースは上の [[#entry.php]] 内のHTMLです。こ他にンが使っている以下のソースコドから構成されています。+  * template/entry.template.php --- ブログ投稿画面のHTML 
 +  * js/main.js --- WebSocketと接続購読を行うJavaScript 
 +  * js/autobahn.js --- WAMP(V1)のJavaScriptラブラリ
  
->TODO: 説明 +以下は、ブログ投稿画面のHTMLです。このコードは ''{Project-Folder}/blog/template'' に配置します。
-以下は、・・・+
  
 {{fa>folder-open-o}} ** {Project-Folder}/blog/template/entry.template.php ** {{fa>folder-open-o}} ** {Project-Folder}/blog/template/entry.template.php **
-<code php entry.template.php>+<code html entry.template.php>
 <h1>Blog Entry</h1> <h1>Blog Entry</h1>
 <form method="POST" name="fm"> <form method="POST" name="fm">
行 533: 行 543:
 </code> </code>
  
->TODO: 説明 +以下は、WebSocketとの接続、購読を行うJavaScriptです。このコードは ''{Project-Folder}/blog/js'' に配置します。
-以下は、・・・ +
- +
-{{fa>folder-open-o}} ** {Project-Folder}/blog/template/entry.template.php ** +
- +
->TODO: 説明 +
-以下は、・・・+
  
 {{fa>folder-open-o}} ** {Project-Folder}/blog/js/main.js ** {{fa>folder-open-o}} ** {Project-Folder}/blog/js/main.js **
-<code php main.js>+<code javascript main.js>
 /* /*
  * Subscribe Session  * Subscribe Session
行 560: 行 564:
 </code> </code>
  
->TODO説明+  * ページロード時に、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'' を2つのブラウザーからアクセスします。一方のブラウザでプログを投稿すると、その内容は他方のブラウザに表示されます。
 +
 +[{{:ratchet:0.4:rachet-push02.png?nolink&400}}]
 +
 +[{{:ratchet:0.4:rachet-push03.png?nolink&400}}]
 +
 +\\
 +
 +
 +
  
ratchet/0.4/push.1606795602.txt.gz · 最終更新: 2020/12/01 13:06 by y2sunlight