Download to read offline
![WORKS
•
IT 勉強会カレンダー for Android & iOS
•
Image Shortener - [img.ww24.jp]
•
Realtime Chat - [rtc.ww24.jp]
•
Connect Smartphone - [connect-sp.ww24.jp]](https://image.slidesharecdn.com/openil-vol1-140224044407-phpapp02/85/OpenIL-vol-1-5-320.jpg)
OpenIL vol.1
- 1.
- 2. 自己紹介 • var age =19 歳 (誕生日 2/24) • 北海道工業大学 学部 2 年生 • インフィニットループ アルバイト • 趣味は旅行、写真、プログラミング • Web Developer
- 3.
- 4.
- 5. WORKS • IT 勉強会カレンダー forAndroid & iOS • Image Shortener - [img.ww24.jp] • Realtime Chat - [rtc.ww24.jp] • Connect Smartphone - [connect-sp.ww24.jp]
- 6.
- 7. IMAGE SHORTENER 短縮 URLを利用したオンラインストレージ
- 8. REALTIME CHAT Google DriveRealtime API を利用した Chat
- 9.
- 10.
- 11.
- 12.
- 13. CONNECT SMARTPHONE • リアルタイムな連携の例 • Chrome WorldWide Maze • • https://chrome.com/maze/ jsdo.it WebSocket Controller • http://jsdo.it/controller
- 14. CHROME WORLD WIDEMAZE Google の迷路ゲーム
- 15.
- 16.
- 17. CONNECT SMARTPHONE • 仕組み • WebSocket Server(Socket.IO) • Web Application Server (Express.js) • Socket.IO + Express.js = Express.IO
- 18.
- 19. EXPRESS と SOCKET.IO あるプログラマがコードを書いていたところ、git commit する前に手が滑ってエディタごと 落としてしまいました。! すると、突然女神が現れ「あなたが落としたのは金の express ですか？それとも銀の Socket.IO ですか？」と尋ねてきました。
- 20. EXPRESS と SOCKET.IO 正直者のプログラマは、「私が落としたのは生のWebSocket で通信するスパゲッティコード です」と答えます。
- 21. EXPRESS と SOCKET.IO 正直者のプログラマに感心した女神は、! 本題と無関係です。 expressと Socket.IO を掛け合わせた、 express.io をプログラマに授けるのでした。
- 23.
- 24.
- 25. CONNECT SMARTPHONE Connect Smartphone GamePage /connect/KCL98U 2 Smartphone (子端末) 2 3 3 PC (親端末) 1
- 26. CONNECT SMARTPHONE Connect Smartphone GamePage Socket.IO Smartphone (子端末) PC (親端末)
- 27. CONNECT SMARTPHONE • Connect Smartphoneでの接続処理 • 乱数から connection_id 生成 • 親端末と子端末を connection_id で照合 • 親端末に接続端末(子端末)の一覧を表示
- 32.
- 33.
- 34.
- 35.
- 36.
- 37. CONNECT SMARTPHONE • 問題点 • 同じブラウザで 2画面開くと、全く同じセッション 情報を持っているので、どちらが親か判別できない ! ! たまにバグる 先に接続してきた方が親で良いよね！
- 38.
- 39. CONNECT SMARTPHONE • なぜそうなるか… • HTTP リクエストはステートレス。状態を持たな い。状態を持たせるためにセッションを用いる。 • WebSocket通信はステートフル。コネクション毎 に個々に状態を保持できる。ブラウザが同じであっ ても、親端末か子端末か判定可能。
- 40.
- 41.
- 42.
- 43.