部内の勉強会用にWebSocketについてまとめました。 間違っていたら教えてください。

1. WebSocketを学ぼう！
2015 / 3 / 18
府大高専 プログラミング研究会 勉強会

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

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

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

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

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

7. 解決策の一例
7
･････

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

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

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

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

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

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

14. DEMO 1
14
見せられないよ！

15. DEMO 2
15
見せられないよ！

16. 16
おわり