Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
2014/05/24
Playframework2 Meetup
株式会社 FLECT
小西俊司
}  小西俊司(@shunjikonishi)
◦  株式会社FLECTの1人R&D
◦  ライブラリ開発や技術調査が生業(最近はサービス開発も)
◦  技術調査はかなりHerokuに傾けている
◦  最近はWebSocketブーム
}  ...
}  2013年10月頃にHerokuで利用可能になった
}  2013年12月末に初めてまともにWebSocketを使ったアプリを
作る
◦  ログを垂れ流してブラウザ上でグラフ化する(ソース公開)
}  2014年2月DevSumiで...
クイズとか
room-sandbox.
herokuapp.com
}  もれなく、	
404 Not Found
}  パスにどんな文字列を指定しても繋がります。
◦  間に「/」があってもOK
◦  例) ws://room-sandbox.herokuapp.com

/chottotameshitemiyoukana
}  同じパスに接続したクラ...
var ws = new WebSocket("ws://room-sandbox.herokuapp.com/tanjunnachat"),
$logs = $(“#logs”), $msg = $(“#message”), $name = ...
}  一つのCanvas上にみんなでお絵描き
}  MouseMoveでメッセージを送信	
http://shunjikonishi.github.io/room-sandbox/sample/canvas.html
}  https://github.com/shunjikonishi/roomframework-play
◦  今まさに作っているフレームワーク
◦  RedisのPub/Subによるスケールアウトに対応
◦  FLECTのmaven-r...
}  ソース(Playframework)
◦  https://github.com/shunjikonishi/room-sandbox
}  サンプルインデックス
◦  http://shunjikonishi.github.io/r...
Upcoming SlideShare
Loading in …5
×

一番簡単なWebSocketの試し方

2014/05/22 HerokuMeetup LT

  • Be the first to comment

一番簡単なWebSocketの試し方

  1. 1. 2014/05/24 Playframework2 Meetup 株式会社 FLECT 小西俊司
  2. 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. 3. }  2013年10月頃にHerokuで利用可能になった }  2013年12月末に初めてまともにWebSocketを使ったアプリを 作る ◦  ログを垂れ流してブラウザ上でグラフ化する(ソース公開) }  2014年2月DevSumiでHeroku + Redis + WebSocketの デモ(ほとんど公開負荷テスト状態) ◦  ボタン連打。1時間半で200万クリック(ソース公開、ブログ) }  2014年3月クイズアプリ開発 ◦  http://quizar.info ◦  初のルームモデルアプリ(ソース公開、ブログ、スライド) }  2014年5月ルームモデルアプリのためのフレームワークを作 りたい(希望) ◦  Roomframework(ソース公開) }  2014年6月9日 SalesforceイベントでHerokuとWebSocket について講演 ◦  http://jp.force.com/dcmax
  4. 4. クイズとか
  5. 5. room-sandbox. herokuapp.com
  6. 6. }  もれなく、 404 Not Found
  7. 7. }  パスにどんな文字列を指定しても繋がります。 ◦  間に「/」があってもOK ◦  例) ws://room-sandbox.herokuapp.com
 /chottotameshitemiyoukana }  同じパスに接続したクライアントはルームを共有し、そ こに送信したメッセージはルーム内の全クライアントに ブロードキャストされます。 ◦  それ以外は何もしません ◦  WebSocketにはSame Origin Policyはないのでどこからで も繋がります。 ◦  ローカルファイル(file://プロトコル)からも接続可
  8. 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. 9. }  一つのCanvas上にみんなでお絵描き }  MouseMoveでメッセージを送信 http://shunjikonishi.github.io/room-sandbox/sample/canvas.html
  10. 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. 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

×