120512 metro styleapp_javascript

875 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
875
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
3
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

120512 metro styleapp_javascript

  1. 1. サーバーサイドもJavaScriptで作る、 WebSocketを使った Metro style app MetroStyleDeveloper #03 @tanaka_733
  2. 2. 自己紹介 Twitter: tanaka_733 仕事 Blog: 銀の光と碧い空 とあるPaaS開発・運 http://techblog.hilife- 用 jp.info/ Java / Node.js / Ruby 趣味 Silverlight / WP7 Kinect / Metro style
  3. 3. Metro style apps using JavaScriptMetro style apps 開発 C#/VB C# / VB JavaScript JavaScriptJavaScriptが使える IE10でのレンダリングが使われるJavaScriptでの入門記事 JavaScript を使った初めての Metro スタイル アプリの作成 IE10
  4. 4. サーバーサイドJavaScript 「Node.js」Metroでのサーバーサイド技術 制約なしサーバーサイドもJavaScriptという選択 Node.js を使ってみようNode.js ってなんだろう? Windowsでもネイティブサポート IISモジュール Azureでもサポート
  5. 5. WebSocket単一のTCPチャネルによる双方向通信 従来のCometより単純 双方向通信 標準化提案完了Windows8 でもサポート http://www.infoq.com/jp/news/2012/0 4/websocket-windows Server / Client とも Windows8 .NET 4.5 の System.Web.WebSocketsライブラ リ
  6. 6. 今回のテーマ Server/Client(Metro)の両方を JavaScriptで開発してみよう Metro style app Node.js using JavaScript WebSocket を使って 双方向通信をしてみよう
  7. 7. 作ってみたアプリがこちらWebSocketを使ったChatアプリ Web版はこちら http://techblog.hilife-jp.info:3000/ MetroStyleApp版のデモソースはGitで公開 Server+Web版: https://github.com/tanaka-takayoshi/ws-chat Metro style apps: https://github.com/tanaka-takayoshi/metro-js-ws-chat
  8. 8. Node.js
  9. 9. I/Oのコストは高い http://blog.mixu.net/2011/02/01/understanding-the-node-js-event-loop/
  10. 10. Node.js とは?シングルスレッドベースの非同期処理 Non-Blocking I/O / イベントループ asynchronousなぜ JavaScript I/O処理がAPIにないので都合がいいV8 Engineを使用 JVM (Java 8) で動くという話も Non-Blocking最新版はv0.6.17 I/O(それ以下は脆弱性あり) 開発版はv0.7, v0.8 は来月という噂
  11. 11. 何がおいしいの・・・?Apache など通常のWebサーバー1リクエストにつき1スレッドスレッドを使い回すにせよ、 C10K問題スレッド当たりでメモリを喰うC10K (クライアントたくさん)クライアント当たりの処理が軽くても、スレッドとワークQueueが増え、メモリがあふれてしまう CPU-bounds には不向き逆に言うと、Node は CPU-boundsな処理は不向き
  12. 12. Node.js in WindowsWindows でのサポート MSの協力によりv0.6 (安定版)より Azureでもサポート asynchronousIDEは? Cloud9 IDE がおすすめ http://c9.io/ Node.js 製のWebベースIDE Visual Studio 使えないかなぁ・・・ Non-Blocking I/OAzure, Joyent, CloudFoundry などにもデプロイ可能
  13. 13. Node.js で hello world HTTPサーバーとしても働くので、 ポート番号を指定する必要があります
  14. 14. Node.js の特徴 (含むJavaScript) モジュール化 Prototype ベースの継承 EventEmitterによるイベント機構 非同期処理 (callback)
  15. 15. もっと知りたい人のために複数バージョン管理: nvm, nvmw1つのマシン上で複数バージョンのnodeを切り替えたいモジュール管理: npmNuGet的なモジュールをインストールする仕組みWindowsで動かすときドキュメントのパスを読み替えたりネイティブモジュールが動かないことがあったり各種フレームワーク・ライブラリExpress(Web app framework), aync(非同期),restler(REST)Linqjs(LINQ), RxJs(Rx), etc
  16. 16. WebSocketからsocket.io まで
  17. 17. WebSocket (再掲)単一のTCPチャネルによる双方向通信 従来のCometより単純 双方向通信 標準化提案完了Windows8 でもサポート http://www.infoq.com/jp/news/2012/0 4/websocket-windows Server / Client とも Windows8 .NET 4.5 の System.Web.WebSocketsライブラ リ
  18. 18. WebSocket in Metro style appsWebSocket クライアントをMetro Style apps で使うことができる参考記事 http://msdn.microsoft.com/ja- jp/library/hh673567(v=vs.85).aspx でもWebSocketを直接触るのはちょっとめんどい
  19. 19. socket.io本来の目的 ブラウザごとのWebSocketの実装の有無や 仕様の差異を吸収するライブラリ今回は Node.js 向けの便利なラッパーとして使用 npm install socket.ioMetro style apps では? 特に記述がないが、問題なく使えた 使い方と注意点は後で
  20. 20. WebSocketを分散環境で使うと・・・ おはよう おはよう ? 分散サーバー間で連携させる必要あり
  21. 21. WebSocketをnginx配下で使うと・・・nginx: 高速なhttp, リバースプロキシサーバーいくつかのPaaSではフロントエンドのプロキシとして使用 ? 現行のnginx v1.2までは WebSocketに対応していない 対応策 • プラグイン入れる(柔軟に構成できないという記事あり) • xhr-pollingを使う • 対応予定のv1.3を待つ
  22. 22. socket.io をMetro style で使うには通常のWebアプリでは<context>/socket.io/socket.io.jsにクライアント側のjsファイルがsocket.ioモジュールにより自動的に置かれますMetroでは以下にあるファイルをjsフォルダにコピーnode_modulessocket.ionode_modulessocket.io-clientdistsocket.io(.min).js
  23. 23. socket.io.js をMetro style で使う場合の注意そのまま使うとこういうエラーが出ました(動作に影響なし)おそらく、socket.io.js で、FlashSocketを使う部分で例外が出ていると思われます暫定:該当部分をコメントアウトするsocket.io.js の 2445~2635行目
  24. 24. アプリのコードを見てみましょう
  25. 25. サーバーサイド (1) 接続時本質的にはsocket.ioを使っている部分のみ それ以外は、Node.jsでWebアプリを作るための モジュール expressを使用し、Web版部分を提供
  26. 26. サーバーサイド(2) ユーザー登録受信
  27. 27. サーバーサイド(3) メッセージ受信送信
  28. 28. サーバーサイド(4) 切断時
  29. 29. クライアント (Metro style apps)UIはListViewを使った単純なものsocket.io.js を使用して通信
  30. 30. クライアント (2) socket.io 接続/送信
  31. 31. クライアント (3) socket.io 受信
  32. 32. クライアント (4) ListView Binding
  33. 33. JavaScriptでMetroした感想まずはどこに何を書くかから サンプル見つつ、ファイルがいつ読み込まれ いつ実行されるかを確認バインディングどうするの? data-win-* 属性のバインディングの仕組み 従来の記述との使い分けはどうしよう?
  34. 34. JavaScriptでMetroした感想Node.jsのコールバックって、C#で引数に関数渡すのと似てるよね・・・ コールバック地獄になるよね RxJSが使えるんじゃ?Metro でJavaScript使えるメリットって? やっぱりC#+XAMLの方が便利では? WebとMetroのクロスプラットフォーム? でも、書き方が違うような・・・ jQuery とか knockout.js とかと組み合わせ?
  35. 35. まとめ Node.js を使えば、 サーバーサイドもJavaScriptで開発できる Metro style app JavaScriptの using JavaScript メリット? socket.ioを使えば WebSocketも簡単に使える
  36. 36. This pptx’s theme is provided by@ColinEberhardthttp://www.scottlogic.co.uk/blog/colin/2011/12/a-metro-themed-powerpoint-template/

×