なぜにwebsocket
ふと、サーバー側からクライアントへどーにかデータ送信ってできないか？？
と思うことがり、そんなような内容をググってみたところ。
ポーリングということばに出会いました。
そこが今回の始まりです。
知りませんでしたぽーりんぐという言葉。
そんでちゃちゃっと自分で調べた感じ、
javascriptにおけるポーリングとはF5又はXHR連打。
ロングポーリングとはXHRでデータ送信、
サーバ側でぐるぐる待つ。
変更があればクライアントに戻す。
かなり斜め読みのざっくり把握です。
コメットなる言葉も出てきましたがロングポーリングと
似たようなもの、ということみたい。
CometとAjaxを利用したチャットサーバの実装
こちらのサイトがわかりやすかったです。
まぁ結局のところ当たり前かも知れませんが、
クライアントからサーバへ問い合わせないと始まらんよ、と。
しかし、まぁ見てのとおりサーバーの負担が気になるところです。
よくチャット禁止とか書かれているレンタルサーバーはこういうことっだのでしょうか？
そしてwebsocketなる技術はそんなサーバーの負担を和らげてくれる技術らしい。
まぁ難しいんでしょうね～と、思いながらもちょっとググってみる。
websocketはnode.jsというもので実装されている方が多いようでした。
聞いたことはあるがイマイチなぞなnode.js。
唯一かろうじて雰囲気はわかるPHPでどーにかできないもんか。
ありました、完璧に教えてくださるサイト様が。
PHPでWebSocket
同時にお絵かき。魅力的です。
早速試してみることに。
簡単！
といってもPHPでWebSocketこちらのブログのおかげですが、、、
今回とりあえず動かす！！という目標なのでXAMPP環境でチャレンジです。
サーバサイドはphp-websocketこちらのライブラリを
ダウンロードしてまんま使わせいただきました。
ドメイン部分だけ書き換えをしたらあっさりとdemo起動。
PC、iPhoneで問題なくつながりました！
そしてこのながながとひっぱていながら全くアクセスのない
お絵かきアプリ
をカスタムです。大抵この手の未知なことをはじめるとどつぼにはまるのですが、
以外にもスムーズに。
クライアント側
は、とりあえずpaintとというオブジェクトを作成して、そのオブジェクトに
カラー情報やらタッチの位置やら様々な描く情報を入れているのですが、
今回はタッチ系のイベントごとにこのpaintオブジェクトのプロパティの一部をJSONして
データを送信するという感じにしました。
そんでこのオブジェクトを通常のタッチによるcanvasへの書込み用と
websocketから来るプロパティをコピーして同じくcanvasに書き込むようの
2つのオブジェクトを作成して使用してみました。
マルチタッチとかになるとさすがに重いのかなぁとか思ったんですが意外にも
軽快に動いてこれまた感動。
そんで参加時に任意の文字で参加グループを選べるように設定。
ただ新たに端末が加わった際は同じグループ内の任意の端末からcanvasデータをbase64して送信、
その他の端末はそれを読み込み、ということをしたんですが、
写真だと重くて結構な遅延が生じてしまいました。
試してませんがbase64でやりとりよりWebSocket の導入: ウェブにソケットを実装する
みたいにバイナリデータの方が早そう気が、、、わかりませんが。
そんで今回iPhone5c2台とHTCAndroidで通信してみました↓
予想以上な軽快な動きです。感動です。
ここでひとつ思ったなのですが、Androidは今までcanvasの性能が（iPhoneに比べて）イマイチなんかなぁ
と思ってたんですが、意外と位置情報から書き込むと結構スムーズな気がしました。
なんでこのはがゆさはタッチの反応の問題？
いつかサーバサイドの理解が深まったらこんな技術も入れてみたいもんです。
少しでもきになった方、よかったらこの
ウェブアプリをホーム画面への追加よろしくお願いします。
サーバーが不安定気味でチョイチョイアクセス出来ないことがありますが、
それとwebsocketは試せませんが、、、
ちなみにあんまり関係ないのですが、new Image()した要素を入れたプロパティを
一生懸命JSON.stringifyしようとして
TypeError: Converting circular structure to JSON
と怒られまくってしまいました。循環参照？？？って思ったんですが、
確かにDOMをそのままJSONっておかしいよなと原因わかって納得。
まとめ
すごい技術があるもんだ。
このコメントは投稿者によって削除されました。
返信削除