狠狠撸

奥别产厂辞肠办别迟を学ぼう！
2015 / 3 / 18
府大高専プログラミング研究会勉強会

注意
? 発表途中の質問 OK!
? 考えてもらう時間もあるので
どんどん意見を言ってください！
2

従来のサーバ?クライアント間の通信
3
リクエスト
レスポンス
ブラウザからのリクエストに対してデータを返す

問題点
4
更新情報
サーバからの一方向通信ができない

考えてみよう
? 現在のアクセス数のデータがサーバに存在
? ページ遷移なしでリアルタイムのアクセス数を
表示したい
? どうすればいい？
5

ヒント
? 常に通信することはできない
? 人間が感じるリアルタイムって…？
6

8
リクエストでサーバの負荷がやばい！

解決策その2
9
通信方法の時点で詰んでね？
通信方法を作ればいいんじゃない？
WebSocket 誕生

WebSocket の特徴
? HTTPとは異なるプロトコル
? WebSocketサーバを立てる必要がある
? サーバ側から情報をpushできる
? もちろんクライアント側からもpushできる
10

クライアント側の流れ
1. WebSocketオブジェクトを生成する
2. イベントハンドラを登録する
3. サーバに接続して，コネクションを確立する
4. メッセージを送ったり受け取ったりする
5. コネクションを切断する
11

サーバ側の流れ
1. イベントハンドラを登録する
2. WebSocketサーバを立てる
3. クライアントが接続してくるのを待つ
4. メッセージを送ったり受け取ったりする
5. コネクションを切断する
12

イベントハンドラ一覧
13
名称機能
onopen 接続時に呼び出されるイベント
onclose 切断時に呼び出されるイベント
onmessage メッセージ受信時イベント
onerror エラー発生時イベント

DEMO 1
14
見せられないよ！

DEMO 2
15
見せられないよ！

奥别产厂辞肠办别迟を学ぼう！