サーバーサイドも JavaScript で作る、 WebSocket を使った

Metro style app

 MetroStyleDeveloper #03@tanaka_733

自己紹介

Blog: 銀の光と碧い空http://techblog.hilife-jp.info/

Twitter: tanaka_733

趣味Silverlight / WP7Kinect / Metro style

仕事とある PaaS 開発・運用Java / Node.js / Ruby

Metro style apps using JavaScript

Metro style apps 開発C#/VBJavaScript

JavaScript が使えるIE10 でのレンダリングが使われる

JavaScript での入門記事JavaScript を使った初めての Metro スタイル アプリの作成

C# / VBJavaScript

IE10

サーバーサイド JavaScript 「 Node.js 」

Metro でのサーバーサイド技術制約なし

サーバーサイドも JavaScript という選択Node.js を使ってみよう

Node.js ってなんだろう？Windows でもネイティブサポートIIS モジュールAzure でもサポート

WebSocket

双方向通信

単一の TCP チャネルによる双方向通信

従来の Comet より単純標準化提案完了

Windows8 でもサポートhttp://www.infoq.com/jp/news/2012/04/websocket-windowsServer / Client とも.NET 4.5 の System.Web.WebSocketsライブラリ

Windows8

今回のテーマ

Metro style appusing JavaScript

Server/Client(Metro) の両方をJavaScript で開発してみよう

Node.js

WebSocket を使って双方向通信をしてみよう

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

作ってみたアプリがこちら

Node.js

I/O のコストは高い

http://blog.mixu.net/2011/02/01/understanding-the-node-js-event-loop/

Node.js とは？

asynchronous

シングルスレッドベースの非同期処理

Non-Blocking I/O / イベントループ

なぜ JavaScriptI/O 処理が API にないので都合がいい

V8 Engine を使用JVM (Java 8) で動くという話も

最新版は v0.6.17( それ以下は脆弱性あり )

開発版は v0.7, v0.8 は来月という噂

Non-Blocking

I/O

何がおいしいの・・・？

C10K 問題

CPU-boundsには不向き

Apache など通常の Web サーバー

1 リクエストにつき 1 スレッドスレッドを使い回すにせよ、スレッド当たりでメモリを喰う

C10K ( クライアントたくさん )クライアント当たりの処理が軽くても、スレッドとワーク Queue が増え、

メモリがあふれてしまう

逆に言うと、Node は CPU-bounds な処理は不向き

Node.js in Windows

asynchronous

Windows でのサポートMS の協力により v0.6 ( 安定版 ) よりAzure でもサポート

IDE は？Cloud9 IDE がおすすめ

http://c9.io/Node.js 製の Web ベース IDE

Visual Studio 使えないかなぁ・・・

Azure, Joyent, Cloud Foundry などにもデプロイ可能

Non-Blocking

I/O

Node.js で hello world

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

Node.js の特徴 ( 含むJavaScript)

モジュール化

Prototype ベースの継承

EventEmitter によるイベント機構

非同期処理 (callback)

複数バージョン管理 : nvm, nvmw1 つのマシン上で複数バージョンの node を切り替えたい

モジュール管理 : npmNuGet 的なモジュールをインストールする仕組み

Windows で動かすときドキュメントのパスを読み替えたりネイティブモジュールが動かないことがあったり

各種フレームワーク・ライブラリExpress(Web app framework), aync( 非同期 ), restler(REST)Linqjs(LINQ), RxJs(Rx), etc

もっと知りたい人のために

WebSocket からsocket.io まで

WebSocket ( 再掲 )

双方向通信

単一の TCP チャネルによる双方向通信

従来の Comet より単純標準化提案完了

Windows8 でもサポートhttp://www.infoq.com/jp/news/2012/04/websocket-windowsServer / Client とも.NET 4.5 の System.Web.WebSocketsライブラリ

Windows8

WebSocket in Metro style apps

WebSocket クライアントをMetro Style apps で使うことができる参考記事

http://msdn.microsoft.com/ja-jp/library/hh673567(v=vs.85).aspx

でも WebSocket を直接触るのはちょっとめんどい

socket.io

本来の目的ブラウザごとの WebSocket の実装の有無や仕様の差異を吸収するライブラリ

今回はNode.js 向けの便利なラッパーとして使用npm install socket.io

Metro style apps では？特に記述がないが、問題なく使えた使い方と注意点は後で

WebSocket を分散環境で使うと・・・

おはよう

おはよう

?

分散サーバー間で連携させる必要あり

WebSocket を nginx 配下で使うと・・・

?

現行の nginx v1.2 まではWebSocket に対応していない

対応策• プラグイン入れる ( 柔軟に構成できないという記事あり )• xhr-polling を使う• 対応予定の v1.3 を待つ

nginx: 高速な http, リバースプロキシサーバーいくつかの PaaS ではフロントエンドのプロキシとして使用

socket.io を Metro style で使うには

通常の Web アプリでは<context>/socket.io/socket.io.jsにクライアント側の js ファイルがsocket.io モジュールにより自動的に置かれます

Metro では以下にあるファイルを js フォルダにコピー

node_modules\socket.io\node_modules\socket.io-client\dist\socket.io(.min).js

socket.io.js を Metro style で使う場合の注意

そのまま使うとこういうエラーが出ました( 動作に影響なし )

おそらく、 socket.io.js で、 FlashSocket を使う部分で例外が出ていると思われます 暫定：該当部分をコメントアウトする socket.io.js の 2445~2635 行目

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

本質的には socket.io を使っている部分のみ

それ以外は、 Node.js で Web アプリを作るためのモジュール express を使用し、 Web 版部分を提供

サーバーサイド (1) 接続時

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

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

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

UI は ListView を使った単純なものsocket.io.js を使用して通信

クライアント (Metro style apps)

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

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

クライアント (4) ListView Binding

まずはどこに何を書くかからサンプル見つつ、ファイルがいつ読み込まれいつ実行されるかを確認

バインディングどうするの？data-win-* 属性のバインディングの仕組み従来の記述との使い分けはどうしよう？

JavaScript で Metro した感想

Node.js のコールバックって、C# で引数に関数渡すのと似てるよね・・・

コールバック地獄になるよねRxJS が使えるんじゃ？

Metro で JavaScript 使えるメリットって？

やっぱり C#+XAML の方が便利では？Web と Metro のクロスプラットフォーム？でも、書き方が違うような・・・jQuery とか knockout.js とかと組み合わせ？

JavaScript で Metro した感想

まとめ

Metro style appusing JavaScript

Node.js を使えば、サーバーサイドも JavaScript で開発できる

JavaScript のメリット？

socket.io を使えばWebSocket も簡単に使える

http://www.scottlogic.co.uk/blog/colin/2011/12/a-metro-themed-powerpoint-template/

This pptx’s theme is provided by @ColinEberhardt