ラベル

2013年1月3日木曜日

php-web-socket+ie8+nadesikoを使う。 続き。

前回、ie8でphp-web-socketと通信まで出来て、最後に「なでしこ」からブラウザ部品で
接続しましたが、上手く行かず調べた結果を記録しておきます。
※ここでは、日本語プログラミング言語なでしこ を「なでしこ」とします。

「なでしこ」のブラウザ部品からchat.htmlでphp-websocketへ接続して
接続完了、送信、エコー受信も出来ました。

しかし、接続、エコー受信、切断等のイベントを「なでしこ」で検知する方法は
判りませんでした。

また、ie8ではchat.htmlの再読込でスクリプトのエラーは起きないのに「なでしこ」の
ブラウザ部品では再読込すると必ずスクリプトのエラーが発生します。


1、この動作の違いを調べた結果

1)ブラウザ部品では同一のhtmlを再読込しても実際にはhttpサーバーに要求を送信していない。
  別のhtmlを読み込むとhttpサーバーに要求を送信しています。
  ブラウザ部品内にキャッシュしているみたい。

2)スクリプトエラーにならない再読み込みは出来ない様です。
  方法が有るのか不明ですがスクリプトエラーの回避としてchat.html内に
  再接続ボタンとjavascriptを追加しました。
  この再接続によってphp-websocketと再接続し送受信するのを確認しました。


2、調査に使ったプログラム

1)「なでしこ」簡易サーバー

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
!「nakonet.nako」を取り込む。#1
ログメモとはメモ
そのレイアウトは『全体』
Iは1

サーバーとはTCPサーバー。そのポートは80。サーバーを開始。#2
サーバーの受信した時は~ #3
ログメモ=ログメモ & 改行 & 今 & 「-{I}」 & 改行 & サーバーの受信データ。
I=I+1
サーバーの受信データを「 」で区切る。#4
ファイル名はそれ[1]の「/」を「」に置換したもの。#5
もし、ファイル名が空ならば、ファイル名は「index.html」#6
もし、ファイル名が存在するならば、ファイル名を開く。違えば、それは「なし」#7
内容は「HTTP/1.0 200 OK{改行}Content-Type: text/html{改行}{改行}{それ}」#8
(サーバーの相手IP)へ(内容)をサーバーで送信。#9
サーバーの送信完了した時は~サーバーの相手IPをサーバーが切断。#10
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

#~~~ で囲んだ中の16行が「なでしこ」のプログラムです。
【コラム】日本語で10行プログラミング (29) HTTPサーバーを作るを参考にログメモを追加しました。

2)再接続を追加したchat.html
  追加・変更部分のみ記載します。

function onReconnectClick() {
init();
}

<button onclick="onReconnectClick(); return false;" id="reconnect">reConnect</button>


3)php-websocketへ接続する「なでしこ」のプログラム

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//web-socketと接続
※※※積み木デザイナ:ここから※
※ 以下はデザインデータです。
※ コメントを削除しないようにしてください。
※ ---
※母艦とはフォーム##生成
母艦は「メインフォーム」
そのクライアントW=630#数値
そのクライアントH=520#数値
そのタイトル=「なでしこ」#文字列
※ ---
入力メモとはメモ##生成
そのX=8#数値
そのY=104#数値
そのW=352#数値
そのH=24#数値
そのテキスト=「」#文字列
そのスクロールバー=「」#文字列
※ ---
ログメモとはメモ##生成
そのX=8#数値
そのY=8#数値
そのW=464#数値
そのH=88#数値
そのテキスト=「」#文字列
そのスクロールバー=「」#文字列
※ ---
送信ボタンとはボタン##生成
そのX=368#数値
そのY=104#数値
そのW=40#数値
そのH=24#数値
そのテキスト=「送信」#文字列
そのクリックした時は~送信ボタン__クリックした時#イベント
※ ---
切断ボタンとはボタン##生成
そのX=424#数値
そのY=104#数値
そのW=40#数値
そのH=24#数値
そのテキスト=「切断」#文字列
そのクリックした時は~切断ボタン__クリックした時#イベント
※ ---
再読込ボタンとはボタン##生成
そのX=480#数値
そのY=104#数値
そのW=64#数値
そのH=24#数値
そのテキスト=「再接続」#文字列
そのクリックした時は~再接続ボタン__クリックした時#イベント
※※※積み木デザイナ:ここまで※

WEB閲覧とはブラウザ
そのWは600
そのHは320
そのYは190
#そのURLは『http://localhost/chat.html』・・・・1)の簡易サーバーに接続する時使った記述
そのURLは『http://localhost/phpws/chat.html』
WEB閲覧のブラウザ読み込み待機。

●送信ボタン__クリックした時
WEB閲覧の「input」に入力メモをブラウザINPUT値設定
入力メモは「」。
WEB閲覧の「send」をブラウザ要素クリック

●切断ボタン__クリックした時
WEB閲覧の「close」をブラウザ要素クリック

●再接続ボタン__クリックした時
WEB閲覧の「reconnect」をブラウザ要素クリック

母艦の閉じた時は
WEB閲覧の「close」をブラウザ要素クリック
母艦の終了可能はオン
終了
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

#~~~ で囲んだ中が「なでしこ」のプログラムです。

このプログラム例ではブラウザ部品でchat.htmlの画面が下側に表示され
上側は「なでしこ」の入力部品とボタンです。
動作は
(1)画面の様に文字列を入れて「送信」ボタン押下でブラウザ部品経由で送信します。
  ※下側のブラウザ部品で直接操作した時と同じ動作です。
(2)「切断」ボタン、「再接続」ボタンも押下でブラウザ部品経由で送信します。
(3)一番大きい(一番上)のテキストBOXは今回使っていません。
  ブラウザ部品のイベントが拾えればここにログを表示するつもりでした。(残念!)



以上です。

0 件のコメント:

コメントを投稿