2014/05/22 HerokuMeetup LT

1. 2014/05/24
Playframework2 Meetup
株式会社 FLECT
小西俊司

2. } 小西俊司(@shunjikonishi)
◦ 株式会社FLECTの1人R&D
◦ ライブラリ開発や技術調査が生業(最近はサービス開発も)
◦ 技術調査はかなりHerokuに傾けている
◦ 最近はWebSocketブーム
} Blog
◦ http://blog.flect.co.jp/labo/
◦ HerokuとかWebSocketとかPlayとか
} GitHub
◦ https://github.com/shunjikonishi
◦ 社内要件から派生したライブラリやアプリを公開
◦ アプリはすべてGitHubからcloneしてHeroku上で動かすことがで
きます。

3. } 2013年10月頃にHerokuで利用可能になった
} 2013年12月末に初めてまともにWebSocketを使ったアプリを
作る
◦ ログを垂れ流してブラウザ上でグラフ化する(ソース公開)
} 2014年2月DevSumiでHeroku + Redis + WebSocketの
デモ(ほとんど公開負荷テスト状態)
◦ ボタン連打。１時間半で200万クリック(ソース公開、ブログ)
} 2014年3月クイズアプリ開発
◦ http://quizar.info
◦ 初のルームモデルアプリ(ソース公開、ブログ、スライド)
} 2014年５月ルームモデルアプリのためのフレームワークを作
りたい(希望)
◦ Roomframework(ソース公開)
} 2014年6月9日 SalesforceイベントでHerokuとWebSocket
について講演
◦ http://jp.force.com/dcmax

4. クイズとか

5. room-sandbox.
herokuapp.com

6. } もれなく、
404 Not Found

7. } パスにどんな文字列を指定しても繋がります。
◦ 間に「/」があってもOK
◦ 例） ws://room-sandbox.herokuapp.com
/chottotameshitemiyoukana
} 同じパスに接続したクライアントはルームを共有し、そ
こに送信したメッセージはルーム内の全クライアントに
ブロードキャストされます。
◦ それ以外は何もしません
◦ WebSocketにはSame Origin Policyはないのでどこからで
も繋がります。
◦ ローカルファイル(file://プロトコル)からも接続可

8. var ws = new WebSocket("ws://room-sandbox.herokuapp.com/tanjunnachat"),
$logs = $(“#logs”), $msg = $(“#message”), $name = $("#name");
ws.onopen = function(event) {
ws.send(“”);//最初に何かを送信しないと受信しないブラウザがある
}
ws.onmessage = function(event) {
$("<p/>").append(event.data).prependTo($logs);
}
$msg.keydown(function(event) {
if (event.keyCode == 13) {
ws.send(($name.val() || "NoName") + ": " + $msg.val());
$msg.val("");
}
});
http://shunjikonishi.github.io/room-sandbox/sample/chat.html

9. } 一つのCanvas上にみんなでお絵描き
} MouseMoveでメッセージを送信
http://shunjikonishi.github.io/room-sandbox/sample/canvas.html

10. } https://github.com/shunjikonishi/roomframework-play
◦ 今まさに作っているフレームワーク
◦ RedisのPub/Subによるスケールアウトに対応
◦ FLECTのmaven-repoもあるがgit submoduleがおすすめ
import roomframework.room.＿
import roomframework.room.echo.EchoRoomFactory
object Application extends Controller {
val rm = RoomManager(new DefaultRoomFactory() with EchoRoomFactory)
def ws(path: String) = WebSocket.using[String] { implicit request =>
Logger.info("WebSocket request: " + path)
val h = rm.join(path)
(h.in, h.out)
}
}

11. } ソース(Playframework)
◦ https://github.com/shunjikonishi/room-sandbox
} サンプルインデックス
◦ http://shunjikonishi.github.io/room-sandbox/
} ルームモデルのEchoサーバとクライアントロジックだけでもそれなり
のアプリが作れる
◦ WebStorageやIndexedDBと組み合わせればさらに強力
} WebSocketをhttpアプリの機能補完と考えずに最初から
WebSocketアプリとして設計すると新たな世界が開ける
} httpがコンテンツ配信からWebAPIにシフトしたように、時間の問題
でWebSocket APIの時代がくる
というような話を6/9にするので興味のある方はおいでませ
http://jp.force.com/dcmax