このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン 最新のリビジョン 両方とも次のリビジョン | ||
ratchet:0.4:push [2020/12/01 11:15] y2sunlight [ブログポスト] |
ratchet:0.4:push [2020/12/01 17:30] y2sunlight [プログラムの実行] |
||
---|---|---|---|
行 307: | 行 307: | ||
* '' | * '' | ||
- | 準備が出来たら、プロジェクトフォルダの準備ができたら、'' | + | 準備が出来たら、コマンドプロンプトでプロジェクトフォルダに移動して、'' |
\\ | \\ | ||
==== WebSockサーバー ==== | ==== WebSockサーバー ==== | ||
+ | |||
+ | 以下のWebSockサーバーを '' | ||
{{fa> | {{fa> | ||
行 359: | 行 361: | ||
</ | </ | ||
+ | * 前半のWebSocketサーバーのセットアップの部分は[[# | ||
+ | * 後半部分は、プッシュ用のメッセージ受信のために着信TCPソケットをセットアップし、それをWebSocketサーバーと同じイベントループで処理しています。 | ||
+ | * プッシュ用のメッセージを受信した時、Pusher の onBlogEntry() を明示的に呼び出しています。 | ||
+ | |||
+ | Pusherクラスについては、デバッグライトを追加した以外は、[[# | ||
{{fa> | {{fa> | ||
<code php Pusher.php> | <code php Pusher.php> | ||
+ | <?php | ||
+ | namespace MyApp; | ||
+ | use Ratchet\ConnectionInterface; | ||
+ | use Ratchet\Wamp\WampServerInterface; | ||
+ | |||
+ | class Pusher implements WampServerInterface { | ||
+ | /** | ||
+ | * クライアントが購読している全てのトピックの探索配列 | ||
+ | */ | ||
+ | protected $subscribedTopics = array(); | ||
+ | |||
+ | public function onSubscribe(ConnectionInterface $conn, $topic) { | ||
+ | echo " | ||
+ | $this-> | ||
+ | } | ||
+ | |||
+ | /** | ||
+ | * @param string ZeroMQから受信したJSON化された文字列 | ||
+ | */ | ||
+ | public function onBlogEntry($entry) { | ||
+ | echo " | ||
+ | $entryData = json_decode($entry, | ||
+ | |||
+ | // トピック探索オブジェクトがセットされていない場合、公開する相手はありません | ||
+ | if (!array_key_exists($entryData[' | ||
+ | return; | ||
+ | } | ||
+ | |||
+ | $topic = $this-> | ||
+ | |||
+ | // そのカテゴリを購読している全てのクライアントにデータを再送信します | ||
+ | $topic-> | ||
+ | echo json_encode($entryData)." | ||
+ | } | ||
+ | |||
+ | public function onUnSubscribe(ConnectionInterface $conn, $topic) { | ||
+ | echo " | ||
+ | } | ||
+ | public function onOpen(ConnectionInterface $conn) { | ||
+ | echo " | ||
+ | } | ||
+ | public function onClose(ConnectionInterface $conn) { | ||
+ | echo " | ||
+ | } | ||
+ | public function onCall(ConnectionInterface $conn, $id, $topic, array $params) { | ||
+ | echo " | ||
+ | // このアプリケーションでは、クライアントがデータを送信する場合、それはユーザーがコンソールでハッキングしたためです | ||
+ | $conn-> | ||
+ | } | ||
+ | public function onPublish(ConnectionInterface $conn, $topic, $event, array $exclude, array $eligible) { | ||
+ | echo " | ||
+ | // このアプリケーションでは、クライアントがデータを送信する場合、それはユーザーがコンソールでハッキングしたためです | ||
+ | $conn-> | ||
+ | } | ||
+ | public function onError(ConnectionInterface $conn, \Exception $e) { | ||
+ | echo " | ||
+ | } | ||
+ | } | ||
</ | </ | ||
\\ | \\ | ||
- | ==== ブログポスト | + | ==== ブログ投稿ページ |
+ | |||
+ | 新しいブログ投稿を処理する為のコードは、新規に作成し直しました。このコードは '' | ||
{{fa> | {{fa> | ||
行 423: | 行 490: | ||
</ | </ | ||
</ | </ | ||
+ | |||
+ | * ブログが投稿された時(POSTメソッドでは)、WebSocketサーバーへPHPのソケット関数(stream_socket_client)を使い、メッセージを送信しています。\\ \\ | ||
+ | * GETメソッドでこのスクリプトが呼び出された場合は、投稿用のHTMLをレンダリングします: | ||
+ | * ブラウザ表示用のフレームワークとしてbootstrapを使用しています。 | ||
+ | * 投稿ページは '' | ||
\\ | \\ | ||
行 428: | 行 500: | ||
==== クライアントサイド ==== | ==== クライアントサイド ==== | ||
- | {{fa> | + | クライアントサイドのメインのソースコードは上に掲載した [[# |
- | < | + | |
+ | * template/ | ||
+ | * js/main.js --- WebSocketとの接続、購読を行うJavaScript | ||
+ | * js/ | ||
+ | |||
+ | 以下は、ブログ投稿画面のHTMLです。このコードは '' | ||
+ | |||
+ | {{fa> | ||
+ | < | ||
+ | < | ||
+ | <form method=" | ||
+ | |||
+ | <div class=" | ||
+ | <label for=" | ||
+ | <div class=" | ||
+ | <select name=" | ||
+ | <option value=" | ||
+ | <option value=" | ||
+ | <option value=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <div class=" | ||
+ | <label for=" | ||
+ | <div class=" | ||
+ | <input type=" | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <div class=" | ||
+ | <label for=" | ||
+ | <div class=" | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <div class=" | ||
+ | <input type=" | ||
+ | </ | ||
+ | |||
+ | </form> | ||
</ | </ | ||
+ | |||
+ | 以下は、WebSocketとの接続、購読を行うJavaScriptです。このコードは '' | ||
+ | |||
+ | {{fa> | ||
+ | <code javascript main.js> | ||
+ | /* | ||
+ | * Subscribe Session | ||
+ | */ | ||
+ | var conn = new ab.Session(' | ||
+ | function() { | ||
+ | conn.subscribe(' | ||
+ | console.log(' | ||
+ | $('# | ||
+ | }); | ||
+ | }, | ||
+ | function() { | ||
+ | console.warn(' | ||
+ | }, | ||
+ | {' | ||
+ | ); | ||
+ | </ | ||
+ | |||
+ | * ページロード時に、WebSocketサーバー( < | ||
+ | * 他のユーザが「kittensCategory」のブログを投稿した時、''# | ||
+ | |||
+ | === WAMP(V1)について === | ||
+ | |||
+ | WAMP(V1)のJavaScriptライブラリーは、以下に設置します: | ||
+ | |||
+ | < | ||
+ | {Project-Folder}/ | ||
+ | </ | ||
+ | |||
+ | このライブラリーは、以下より取得して設置しました。 | ||
+ | |||
+ | < | ||
+ | https:// | ||
+ | </ | ||
+ | |||
+ | この autobahn.js は、WAMP のバージョン1対応のライブラリです。Ratchet は WAMP のバージョン2をサポートしていないので、敢えて [[https:// | ||
+ | |||
+ | '' | ||
+ | |||
+ | WAMPとは WebSocket Application Messaging Protocol の略で、次の機能を提供するWebSocketのサブプロトコルです。 | ||
+ | * ルーティングされたリモートプロシージャコール | ||
+ | * パブリッシュ & サブスクライブ | ||
+ | |||
+ | 詳しくは以下を参照: | ||
+ | * https:// | ||
\\ | \\ | ||
+ | |||
+ | ==== プログラムの実行 ==== | ||
+ | |||
+ | コマンドプロンプトでプロジェクトフォルダに移動してWebSocketサーバーを起動します。 | ||
+ | |||
+ | < | ||
+ | php bin/ | ||
+ | </ | ||
+ | |||
+ | ブラウザで '' | ||
+ | |||
+ | [{{: | ||
+ | |||
+ | [{{: | ||
+ | |||
+ | \\ | ||
+ | |||
+ | |||
+ | |||