このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン 次のリビジョン 両方とも次のリビジョン | ||
ratchet:0.4:push [2020/12/01 13:17] y2sunlight [WebSockサーバー] |
ratchet:0.4:push [2020/12/01 17:28] y2sunlight [クライアントサイド] |
||
---|---|---|---|
行 365: | 行 365: | ||
* プッシュ用のメッセージを受信した時、Pusher の onBlogEntry() を明示的に呼び出しています。 | * プッシュ用のメッセージを受信した時、Pusher の onBlogEntry() を明示的に呼び出しています。 | ||
- | Pusherクラスについては、デバッグライトを追加した以外は、[[# | + | Pusherクラスについては、デバッグライトを追加した以外は、[[# |
{{fa> | {{fa> | ||
行 431: | 行 431: | ||
\\ | \\ | ||
- | ==== ブログポスト | + | ==== ブログ投稿ページ |
+ | |||
+ | 新しいブログ投稿を処理する為のコードは、新規に作成し直しました。このコードは '' | ||
{{fa> | {{fa> | ||
行 488: | 行 490: | ||
</ | </ | ||
</ | </ | ||
+ | |||
+ | * ブログが投稿された時(POSTメソッドでは)、WebSocketサーバーへPHPのソケット関数(stream_socket_client)を使い、メッセージを送信しています。\\ \\ | ||
+ | * GETメソッドでこのスクリプトが呼び出された場合は、投稿用のHTMLをレンダリングします: | ||
+ | * ブラウザ表示用のフレームワークとしてbootstrapを使用しています。 | ||
+ | * 投稿ページは '' | ||
\\ | \\ | ||
行 493: | 行 500: | ||
==== クライアントサイド ==== | ==== クライアントサイド ==== | ||
- | クライアントサイドのパーツは '' | + | クライアントサイドのメインのソースコードは上に掲載した [[# |
- | * template --- ブログ画面のスタブになるHTMLを保存 | + | * template/ |
- | * js --- WebSocketとの接続、購読の設定を行うJavaScriptを保存 | + | * js/main.js --- WebSocketとの接続、購読を行うJavaScript |
+ | * js/ | ||
- | クライアントサイドのメインのソースは上の [[# | + | 以下は、ブログ投稿画面のHTMLです。このコードは '' |
- | + | ||
- | >TODO: 説明 | + | |
- | 以下は、・・・ | + | |
{{fa> | {{fa> | ||
- | < | + | < |
< | < | ||
<form method=" | <form method=" | ||
行 540: | 行 545: | ||
</ | </ | ||
- | >TODO: 説明 | + | 以下は、WebSocketとの接続、購読を行うJavaScriptです。このコードは '' |
- | 以下は、・・・ | + | |
- | + | ||
- | {{fa> | + | |
- | + | ||
- | >TODO: 説明 | + | |
- | 以下は、・・・ | + | |
{{fa> | {{fa> | ||
- | < | + | < |
/* | /* | ||
* Subscribe Session | * Subscribe Session | ||
行 567: | 行 566: | ||
</ | </ | ||
- | >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/ | ||
+ | </ | ||
+ | |||
+ | ブラウザで '' | ||
+ | |||
+ | [{{: | ||
+ | |||
+ | |||
+ | |||
+ | |||