差分

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

--- ratchet:0.4:push [2020/12/01 13:22]
y2sunlight [WebSockサーバー]
+++ ratchet:0.4:push [2020/12/01 17:32] (現在)
y2sunlight [ブログ投稿ページ]
@@ 行 431: / 行 431: @@
 \\
-==== ブログポスト ====
+==== ブログ投稿ページ ====
 新しいブログ投稿を処理する為のコードは、新規に作成し直しました。このコードは ''{Project-Folder}/blog'' に配置します。
@@ 行 467: / 行 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>
@@ 行 490: / 行 488: @@
 </html>
 </code>
+  * ブログが投稿された時(POSTメソッドでは)、WebSocketサーバーへPHPのソケット関数(stream_socket_client)を使い、メッセージを送信しています。\\ \\
+  * GETメソッドでこのスクリプトが呼び出された場合は、投稿用のHTMLをレンダリングします：
+    * ブラウザ表示用のフレームワークとしてbootstrapを使用しています。
+    * 投稿ページは ''entry.template.php'' に保存されているものを include() して使用します。
 \\
@@ 行 495: / 行 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 **
-<code php entry.template.php>
+<code html entry.template.php>
 <h1>Blog Entry</h1>
 <form method="POST" name="fm">
@@ 行 542: / 行 543: @@
 </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 **
-<code php main.js>
+<code javascript main.js>
 /*
  * Subscribe Session
@@ 行 569: / 行 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

ユーザ用ツール

サイト用ツール

差分

ページ用ツール