http://www.infiniteloop.co.jp/blog/2014/02/publicstudy01/

1. SMARTPHONE CONTROLLER
OpenIL vol.1
中川 武憲

2. 自己紹介
•
var age = 19 歳 (誕生日 2/24)
•
北海道工業大学 学部 2 年生
•
インフィニットループ アルバイト
•
趣味は旅行、写真、プログラミング
•
Web Developer

3. あと 3 日で
age++
するイベントが。

4. p.tl/53x8
24 時間受付中

5. WORKS
•
IT 勉強会カレンダー for Android & iOS
•
Image Shortener - [img.ww24.jp]
•
Realtime Chat - [rtc.ww24.jp]
•
Connect Smartphone - [connect-sp.ww24.jp]

6. IT 勉強会カレンダー
スマートフォンアプリ

7. IMAGE SHORTENER
短縮 URL を利用したオンラインストレージ

8. REALTIME CHAT
Google Drive Realtime API を利用した Chat

9. CONNECT SMARTPHONE
パソコンとスマホのリアルタイム連携

10. CONNECT SMARTPHONE

11. CONNECT SMARTPHONE
•
Express.IO を使った、スマートフォンとパソ
コンのリアルタイムな連携アプリケーション

12. AGENDA
•
リアルタイムな連携とは
•
Express と Socket.IO
•
仕組み
•
デモ
•
サンプルコード
•
問題点、課題

13. CONNECT SMARTPHONE
•
リアルタイムな連携の例
•
Chrome World Wide Maze
•
•
https://chrome.com/maze/
jsdo.it WebSocket Controller
•
http://jsdo.it/controller

14. CHROME WORLD WIDE MAZE
Google の迷路ゲーム

15. WEBSOCKET CONTROLLER
jsdo.it

16. CONNECT SMARTPHONE
スマートフォンをパソコンへ繋げて、コントローラに。

17. CONNECT SMARTPHONE
•
仕組み
•
WebSocket Server (Socket.IO)
•
Web Application Server (Express.js)
•
Socket.IO + Express.js = Express.IO

18. 金の EXPRESS
物語調で解説

19. EXPRESS と SOCKET.IO
あるプログラマがコードを書いていたところ、 git commit する前に手が滑ってエディタごと
落としてしまいました。!
すると、突然女神が現れ「あなたが落としたのは金の express ですか？それとも銀の
Socket.IO ですか？」と尋ねてきました。

20. EXPRESS と SOCKET.IO
正直者のプログラマは、「私が落としたのは生の WebSocket で通信するスパゲッティコード
です」と答えます。

21. EXPRESS と SOCKET.IO
正直者のプログラマに感心した女神は、!
本題と無関係です。
express と Socket.IO を掛け合わせた、 express.io をプログラマに授けるのでした。

23. EXPRESS.IO
express のような直感的なルーティング
express と共有できるセッション

24. CONNECT SMARTPHONE
/connect/{connection_id} にリダイレクト
接 続 処 理
アプリケーション・ゲームページにリダイレクト

25. CONNECT SMARTPHONE
Connect Smartphone
Game Page
/connect/KCL98U
2
Smartphone
(子端末)
2
3
3
PC
(親端末)
1

26. CONNECT SMARTPHONE
Connect Smartphone
Game Page
Socket.IO
Smartphone
(子端末)
PC
(親端末)

27. CONNECT SMARTPHONE
•
Connect Smartphone での接続処理
•
乱数から connection_id 生成
•
親端末と子端末を connection_id で照合
•
親端末に接続端末(子端末)の一覧を表示

32. DEMO
connect-sp.ww24.jp

33. サンプルコード

34. 接続

35. 送信 (子端末)

36. 受信 (親端末)

37. CONNECT SMARTPHONE
•
問題点
•
同じブラウザで 2 画面開くと、全く同じセッション
情報を持っているので、どちらが親か判別できない
!
!
たまにバグる
先に接続してきた方が親で良いよね！

38. 両方子端末と判定されることがある。

39. CONNECT SMARTPHONE
•
なぜそうなるか…
•
HTTP リクエストはステートレス。状態を持たな
い。状態を持たせるためにセッションを用いる。
•
WebSocket 通信はステートフル。コネクション毎
に個々に状態を保持できる。ブラウザが同じであっ
ても、親端末か子端末か判定可能。

40. CONNECT SMARTPHONE
•
リダイレクトさせる実装にした理由
•
スタンドアロンな実装を目指した
•
サーバの実装不要でリアルタイム連携を実現
•
URL ルーティングや子端末の認証など、面
倒な処理を一括して行った

41. 今後の課題
•
自動的に認証したい
•
パソコン スマホに限らず、
ゲームでプレイヤーマッチングもできそう

42. リアルタイム通信楽しい！

43. express.io
で
快適なリアルタイム通信ライフを