このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
ratchet:0.4:push [2020/12/01 11:54] y2sunlight [クライアントサイド] |
ratchet:0.4:push [2020/12/01 17:32] (現在) y2sunlight [ブログ投稿ページ] |
||
---|---|---|---|
行 307: | 行 307: | ||
* '' | * '' | ||
- | 準備が出来たら、プロジェクトフォルダの準備ができたら、'' | + | 準備が出来たら、コマンドプロンプトでプロジェクトフォルダに移動して、'' |
\\ | \\ | ||
==== WebSockサーバー ==== | ==== WebSockサーバー ==== | ||
+ | |||
+ | 以下のWebSockサーバーを '' | ||
{{fa> | {{fa> | ||
行 359: | 行 361: | ||
</ | </ | ||
+ | * 前半のWebSocketサーバーのセットアップの部分は[[# | ||
+ | * 後半部分は、プッシュ用のメッセージ受信のために着信TCPソケットをセットアップし、それをWebSocketサーバーと同じイベントループで処理しています。 | ||
+ | * プッシュ用のメッセージを受信した時、Pusher の onBlogEntry() を明示的に呼び出しています。 | ||
+ | |||
+ | Pusherクラスについては、デバッグライトを追加した以外は、[[# | ||
{{fa> | {{fa> | ||
行 424: | 行 431: | ||
\\ | \\ | ||
- | ==== ブログポスト | + | ==== ブログ投稿ページ |
+ | |||
+ | 新しいブログ投稿を処理する為のコードは、新規に作成し直しました。このコードは '' | ||
{{fa> | {{fa> | ||
行 458: | 行 467: | ||
<script src=" | <script src=" | ||
<script src=" | <script src=" | ||
- | <!-- stylesheet --> | ||
- | <link href=" | ||
<!-- javascript --> | <!-- javascript --> | ||
<script src=" | <script src=" | ||
行 481: | 行 488: | ||
</ | </ | ||
</ | </ | ||
+ | |||
+ | * ブログが投稿された時(POSTメソッドでは)、WebSocketサーバーへPHPのソケット関数(stream_socket_client)を使い、メッセージを送信しています。\\ \\ | ||
+ | * GETメソッドでこのスクリプトが呼び出された場合は、投稿用のHTMLをレンダリングします: | ||
+ | * ブラウザ表示用のフレームワークとしてbootstrapを使用しています。 | ||
+ | * 投稿ページは '' | ||
\\ | \\ | ||
行 486: | 行 498: | ||
==== クライアントサイド ==== | ==== クライアントサイド ==== | ||
- | クライアントサイドのパーツは '' | + | クライアントサイドのメインのソースコードは上に掲載した [[#ブログ投稿ページ|entry.php]] 内のHTMLです。メインで使っている他のソースコードは以下の通りです。 |
- | + | ||
- | * template --- ブログ画面のスタブになるHTMLを保存 | + | |
- | * js --- | + | |
- | クライアントサイドのメインのソースは上の [[#entry.php]] 内のHTMLです。この他に、メインが使っている以下のソースコードから構成されています。 | + | * template/entry.template.php --- ブログ投稿画面のHTML |
+ | * js/main.js --- WebSocketとの接続、購読を行うJavaScript | ||
+ | * js/ | ||
- | >TODO: 説明 | + | 以下は、ブログ投稿画面のHTMLです。このコードは '' |
- | 以下は、・・・ | + | |
{{fa> | {{fa> | ||
- | < | + | < |
< | < | ||
<form method=" | <form method=" | ||
行 533: | 行 543: | ||
</ | </ | ||
- | >TODO: 説明 | + | 以下は、WebSocketとの接続、購読を行うJavaScriptです。このコードは '' |
- | 以下は、・・・ | + | |
- | + | ||
- | {{fa> | + | |
- | <code php main.css> | + | |
- | @charset " | + | |
- | + | ||
- | .form-control:: | + | |
- | .form-control: | + | |
- | .form-control:: | + | |
- | .form-control:: | + | |
- | + | ||
- | .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方向の余白を削除 */ | + | |
- | } | + | |
- | </ | + | |
- | + | ||
- | >TODO: 説明 | + | |
- | 以下は、・・・ | + | |
{{fa> | {{fa> | ||
- | < | + | < |
/* | /* | ||
* Subscribe Session | * Subscribe Session | ||
行 584: | 行 564: | ||
</ | </ | ||
- | >TODO: 説明 | + | * ページロード時に、WebSocketサーバー( <nowiki>ws:// |
+ | * 他のユーザが「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/ | ||
+ | </ | ||
+ | |||
+ | ブラウザで '' | ||
+ | |||
+ | [{{: | ||
+ | |||
+ | [{{: | ||
+ | |||
+ | \\ | ||
+ | |||
+ | |||
+ | |||