差分

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

--- ratchet:0.4:push [2020/12/01 11:54]
y2sunlight [クライアントサイド]
+++ ratchet:0.4:push [2020/12/01 17:32] (現在)
y2sunlight [ブログ投稿ページ]
@@ 行 307: / 行 307: @@
   * ''blog'' --- ブログ側のソースコード一式
-準備が出来たら、プロジェクトフォルダの準備ができたら、''composer install'' を実行します。
+準備が出来たら、コマンドプロンプトでプロジェクトフォルダに移動して、''composer install'' を実行します。
 \\
 ==== WebSockサーバー ====
+以下のWebSockサーバーを ''{Project-Folder}/bin'' の下に配置します。
 {{fa>folder-open-o}} ** {Project-Folder}/bin/push-server.php **
@@ 行 359: / 行 361: @@
 </code>
+  * 前半のWebSocketサーバーのセットアップの部分は[[#全てを結合する|オリジナル]]のコードと同じです。
+  * 後半部分は、プッシュ用のメッセージ受信のために着信TCPソケットをセットアップし、それをWebSocketサーバーと同じイベントループで処理しています。
+  * プッシュ用のメッセージを受信した時、Pusher の onBlogEntry() を明示的に呼び出しています。
+Pusherクラスについては、デバッグライトを追加した以外は、[[#ZeroMQ メッセージの処理|オリジナル]]のコードと同じです。これは、''{Project-Folder}/src'' に配置します。
 {{fa>folder-open-o}} ** {Project-Folder}/src/Pusher.php **
@@ 行 424: / 行 431: @@
 \\
-==== ブログポスト ====
+==== ブログ投稿ページ ====
+新しいブログ投稿を処理する為のコードは、新規に作成し直しました。このコードは ''{Project-Folder}/blog'' に配置します。
 {{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://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 -->
     <script src="js/autobahn.js"></script>
@@ 行 481: / 行 488: @@
 </html>
 </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 ---
-クライアントサイドのメインのソースは上の [[#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 **
-<code php entry.template.php>
+<code html entry.template.php>
 <h1>Blog Entry</h1>
 <form method="POST" name="fm">
@@ 行 533: / 行 543: @@
 </code>
->TODO: 説明
+以下は、WebSocketとの接続、購読を行うJavaScriptです。このコードは ''{Project-Folder}/blog/js'' に配置します。
-以下は、・・・
-{{fa>folder-open-o}} ** {Project-Folder}/blog/css/main.css **
-<code php main.css>
-@charset "UTF-8";
-.form-control::-webkit-input-placeholder{color: #c6c6c6;} /* Google Chrome, Safari, Opera 15+, Android, iOS */
-.form-control:-ms-input-placeholder,      /* IE 10+ */
-.form-control::-ms-input-placeholder{color: #c6c6c6;}
-.form-control::placeholder{color: #c6c6c6;} /* default #6c757d; */
-.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
-  margin: 0.25em 0 1em 0;
-}
-.h1, h1 { font-size: 1.75rem }
-.h2, h2 { font-size: 1.5rem  }
-.h3, h3 { font-size: 1.25rem }
-.h4, h4 { font-size: 1.0rem  }
-.h5, h5 { font-size: 0.75rem }
-.h6, h6 { font-size: 0.5rem  }
-.container {
-    padding: 0px 3px; !important;
-    overflow-x: hidden !important; /*  x方向の余白を削除 */
-}
-</code>
->TODO: 説明
-以下は、・・・
 {{fa>folder-open-o}} ** {Project-Folder}/blog/js/main.js **
-<code php main.js>
+<code javascript main.js>
 /*
  * Subscribe Session
@@ 行 584: / 行 564: @@
 </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'' を２つのブラウザーからアクセスします。一方のブラウザでプログを投稿すると、その内容は他方のブラウザに表示されます。
+[{{:ratchet:0.4:rachet-push02.png?nolink&400}}]
+[{{:ratchet:0.4:rachet-push03.png?nolink&400}}]
+\\

Ground Sunlight

ユーザ用ツール

サイト用ツール

差分

ページ用ツール