SMARTPHONE CONTROLLEROpenIL vol.1

中川 武憲

自己紹介• var age = 19 歳 (誕生日 2/24)

• 北海道工業大学　学部 2 年生

• インフィニットループ　アルバイト

• 趣味は旅行、写真、プログラミング

• Web Developer

あと 3 日で

age++するイベントが。

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

WORKS

• IT 勉強会カレンダー for Android & iOS

• Image Shortener - [img.ww24.jp]

• Realtime Chat - [rtc.ww24.jp]

• Connect Smartphone - [connect-sp.ww24.jp]

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

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

REALTIME CHATGoogle Drive Realtime API を利用した Chat

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

CONNECT SMARTPHONE

CONNECT SMARTPHONE

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

AGENDA• リアルタイムな連携とは

• Express と Socket.IO

• 仕組み

• デモ

• サンプルコード

• 問題点、課題

CONNECT SMARTPHONE• リアルタイムな連携の例

• Chrome World Wide Maze

• https://chrome.com/maze/

• jsdo.it WebSocket Controller

• http://jsdo.it/controller

CHROME WORLD WIDE MAZEGoogle の迷路ゲーム

WEBSOCKET CONTROLLERjsdo.it

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

CONNECT SMARTPHONE

• 仕組み

• WebSocket Server (Socket.IO)

• Web Application Server (Express.js)

• Socket.IO + Express.js = Express.IO

金の EXPRESS物語調で解説

EXPRESS と SOCKET.IO

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

Socket.IO ですか？」と尋ねてきました。

EXPRESS と SOCKET.IO

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

EXPRESS と SOCKET.IO

正直者のプログラマに感心した女神は、! express と Socket.IO を掛け合わせた、 express.io をプログラマに授けるのでした。

本題と無関係です。

EXPRESS.IO

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

CONNECT SMARTPHONE

/connect/{connection_id}　にリダイレクト

接　続　処　理

アプリケーション・ゲームページにリダイレクト

CONNECT SMARTPHONEConnect Smartphone

Smartphone(子端末)

PC(親端末)

Game Page

122

3

3

/connect/KCL98U

CONNECT SMARTPHONEConnect Smartphone

Smartphone(子端末)

PC(親端末)

Game Page

Socket.IO

CONNECT SMARTPHONE

• Connect Smartphone での接続処理

• 乱数から connection_id 生成

• 親端末と子端末を connection_id で照合

• 親端末に接続端末(子端末)の一覧を表示

DEMOconnect-sp.ww24.jp

サンプルコード

接続

送信 (子端末)

受信 (親端末)

CONNECT SMARTPHONE• 問題点

• 同じブラウザで 2 画面開くと、全く同じセッション情報を持っているので、どちらが親か判別できない

!

!

先に接続してきた方が親で良いよね！

たまにバグる

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

CONNECT SMARTPHONE• なぜそうなるか…

• HTTP リクエストはステートレス。状態を持たない。状態を持たせるためにセッションを用いる。

• WebSocket 通信はステートフル。コネクション毎に個々に状態を保持できる。ブラウザが同じであっても、親端末か子端末か判定可能。

CONNECT SMARTPHONE• リダイレクトさせる実装にした理由

• スタンドアロンな実装を目指した

• サーバの実装不要でリアルタイム連携を実現

• URL ルーティングや子端末の認証など、面倒な処理を一括して行った

今後の課題

• 自動的に認証したい

• パソコン⇔スマホに限らず、

ゲームでプレイヤーマッチングもできそう

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

express.io で

快適なリアルタイム通信ライフを