1. サーバーサイドもJavaScriptで作る、
WebSocketを使った
Metro style app
MetroStyleDeveloper #03
@tanaka_733

2. 自己紹介
Twitter: tanaka_733
仕事 Blog: 銀の光と碧い空
とあるPaaS開発・運 http://techblog.hilife-
用 jp.info/
Java / Node.js / Ruby
趣味
Silverlight / WP7
Kinect / Metro style

3. Metro style apps using JavaScript
Metro style apps 開発
C#/VB C# / VB
JavaScript
JavaScript
JavaScriptが使える
IE10でのレンダリングが使われる
JavaScriptでの入門記事
JavaScript を使った初めての
Metro スタイル アプリの作成 IE10

4. サーバーサイドJavaScript 「Node.js」
Metroでのサーバーサイド技術
制約なし
サーバーサイドもJavaScriptという選択
Node.js を使ってみよう
Node.js ってなんだろう？
Windowsでもネイティブサポート
IISモジュール
Azureでもサポート

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. 今回のテーマ
Server/Client(Metro)の両方を
JavaScriptで開発してみよう
Metro style app
Node.js
using JavaScript
WebSocket を使って
双方向通信をしてみよう

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. Node.js

9. I/Oのコストは高い
http://blog.mixu.net/2011/02/01/understanding-the-node-js-event-loop/

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. 何がおいしいの・・・？
Apache など通常のWebサーバー
1リクエストにつき1スレッド
スレッドを使い回すにせよ、 C10K問題
スレッド当たりでメモリを喰う
C10K (クライアントたくさん)
クライアント当たりの処理が軽くて
も、スレッドとワークQueueが増え、
メモリがあふれてしまう CPU-bounds
には不向き
逆に言うと、
Node は CPU-boundsな処理は不向き

12. Node.js in Windows
Windows でのサポート
MSの協力によりv0.6 (安定版)より
Azureでもサポート asynchronous
IDEは？
Cloud9 IDE がおすすめ
http://c9.io/
Node.js 製のWebベースIDE
Visual Studio 使えないかなぁ・・・ Non-Blocking
I/O
Azure, Joyent, Cloud
Foundry などにもデプロイ
可能

13. Node.js で hello world
HTTPサーバーとしても働くので、
ポート番号を指定する必要があります

14. Node.js の特徴 (含むJavaScript)
モジュール化
Prototype ベースの継承
EventEmitterによるイベント機構
非同期処理 (callback)

15. もっと知りたい人のために
複数バージョン管理: nvm, nvmw
1つのマシン上で複数バージョンのnodeを切り替えたい
モジュール管理: npm
NuGet的なモジュールをインストールする仕組み
Windowsで動かすとき
ドキュメントのパスを読み替えたり
ネイティブモジュールが動かないことがあったり
各種フレームワーク・ライブラリ
Express(Web app framework), aync(非同期),
restler(REST)
Linqjs(LINQ), RxJs(Rx), etc

16. WebSocketから
socket.io まで

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. WebSocket in Metro style apps
WebSocket クライアントを
Metro Style apps で使うことができる
参考記事
http://msdn.microsoft.com/ja-
jp/library/hh673567(v=vs.85).aspx
でもWebSocketを直接触るのはちょっとめんどい

19. socket.io
本来の目的
ブラウザごとのWebSocketの実装の有無や
仕様の差異を吸収するライブラリ
今回は
Node.js 向けの便利なラッパーとして使用
npm install socket.io
Metro style apps では？
特に記述がないが、問題なく使えた
使い方と注意点は後で

20. WebSocketを分散環境で使うと・・・
おはよう
おはよう
?
分散サーバー間で連携させる必要あり

21. WebSocketをnginx配下で使うと・・・
nginx: 高速なhttp, リバースプロキシサーバー
いくつかのPaaSではフロントエンドのプロキシとして使用
?
現行のnginx v1.2までは
WebSocketに対応していない
対応策
• プラグイン入れる(柔軟に構成できないという記事あり)
• xhr-pollingを使う
• 対応予定のv1.3を待つ

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. socket.io.js をMetro style で使う場合の注意
そのまま使うとこういうエラーが出ました
(動作に影響なし)
おそらく、socket.io.js で、FlashSocketを
使う部分で例外が出ていると思われます
暫定：該当部分をコメントアウトする
socket.io.js の 2445~2635行目

24. アプリのコードを
見てみましょう

25. サーバーサイド (1) 接続時
本質的にはsocket.ioを使っている部分のみ
それ以外は、Node.jsでWebアプリを作るための
モジュール expressを使用し、Web版部分を提供

26. サーバーサイド(2) ユーザー登録受信

27. サーバーサイド(3) メッセージ受信送信

28. サーバーサイド(4) 切断時

29. クライアント (Metro style apps)
UIはListViewを使った単純なもの
socket.io.js を使用して通信

30. クライアント (2) socket.io 接続/送信

31. クライアント (3) socket.io 受信

32. クライアント (4) ListView Binding

33. JavaScriptでMetroした感想
まずはどこに何を書くかから
サンプル見つつ、ファイルがいつ読み込まれ
いつ実行されるかを確認
バインディングどうするの？
data-win-* 属性のバインディングの仕組み
従来の記述との使い分けはどうしよう？

34. JavaScriptでMetroした感想
Node.jsのコールバックって、
C#で引数に関数渡すのと似てるよね・・・
コールバック地獄になるよね
RxJSが使えるんじゃ？
Metro でJavaScript使えるメリットって？
やっぱりC#+XAMLの方が便利では？
WebとMetroのクロスプラットフォーム？
でも、書き方が違うような・・・
jQuery とか knockout.js とかと組み合わせ？

35. まとめ
Node.js を使えば、
サーバーサイドもJavaScriptで開発できる
Metro style app JavaScriptの
using JavaScript メリット？
socket.ioを使えば
WebSocketも簡単に使える

36. This pptx’s theme is provided by
@ColinEberhardt
http://www.scottlogic.co.uk/blog/colin/2011/1
2/a-metro-themed-powerpoint-template/