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.

一番簡単なWebSocketの試し方

2014/05/22 HerokuMeetup LT

  • Login to see the comments

一番簡単な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

×