Node.js × Silverlight
 の WebSocket 連携では
      まったこと
Microsoft MVP for Windows Azure
割と普通

2011年12月3日
SL囲む会 東京#5
今回お話する内容
•   Node.js の概要
•   socket.io の概要
•   Silverlight 連携でのハマリどころ
•   まとめ




                             2
Node.js の概要

              3
Node.js とは
• サーバサイド JavaScript の実装
 – 他に Rhino や Aptana Jaxer 等がある

• JavaScript を利用してシングルスレッドベー
  スの非同期処理が可能
 – 大規模アクセス時のリアルタイム通信等


• 依存関係を解決するパッケージ管理機構
  (npm)が存在する
 – v0.6.4 からは Win版も標準インストール
Node.js の簡単な利用例
• コード例( example.js )
 var http = require('http');
 http.createServer(function (request, response) {
           response.writeHead(200,
                 { 'Content-Type': 'text/plain; charset=utf-8;' });
           response.end(„Node.js on Windows Azure n');
  }).listen(8080);


• アプリケーションを起動

 > node.exe example.js
Windows Azure 上で Node.js
• 非同期 IO と ブロブ・ストレージの相性
  が良い
 – 非同期的に処理が可能
 – アップロード等重い処理の対応に適している


• 運用の対応は不要
 – Windows Azure 上で稼働するため、OS レベ
   ルの運用はお任せ可能
 – CDN を利用することで、パフォーマンスの
   改善も可能
socket.io
 の概要

            7
socket.io とは?
• WebSocket の Node.js 実装
  – 主にリアルタイム通信を行うために利用
  – ブラウザ側/サーバ側の両方に提供
  – IE9等、WebSocket が実装されていないブラ
    ウザもリアルタイム通信を可能にする



 IE5.5 以降
  なら OK
                           幅広いブラウを
                            サポート
                                     8
socket.io の通信方式
 • ブラウザの実装によって動作を変える
    – WebSocket 実装済みのブラウザでは
      WebScket を利用する
    – WebScoket 未実装のブラウザでは Comet を
      利用する

                              Comet 通信
                        (




                        ブ
            Socket.io




                                            Socket.io
                                                        (
                        ラ                               サ
WebSocket               ウ                               ー
                        ザ                               バ
の実装有無で                                                  側
                        側
 動作を変更




                                                        js)
                              WebSocket 通
                        js)




                                  信
                                                              9
簡単なデモ
• ブラウザ側
 1. /socket.io/socket.io.js を読み込む
 2. socket = io.connect(uri); で接続
 3. socket.send(„メッセージ‟) で送信
• サーバ側
 1. io = require(„socket.io‟).listen(app) でインス
    タンス作成
 2. io.sockets.on(„connection‟, …); で接続
 3. socket.send(„メッセージ‟); で送信

                                                 10
Silverlight 連携での
   ハマリどころ


                   11
• 隠ぺい化が問題に・・・
    – SLは「ws = new
      WebSocket(“ws://localhost:4503/”);」
    – Socket.io は
      「io.connect('http://127.0.0.1:8080/');」

                               Comet 通信
                              ここが問題!!
                        (




                        ブ
            Socket.io




                                            Socket.io
                                                        (
                        ラ                               サ
WebSocket               ウ                               ー
                        ザ                               バ
の実装有無で                                                  側
                        側
 動作を変更




                                                        js)
                              WebSocket 通
                        js)




                                  信
                                                              12
Silverlight は
    ws = new
    WebSocket(“ws://localhost:4503/”);
• そもそも Comet 通信している場合は無理
• WebSocket 通信の場合での流れは以下
 1. いったん
    http://localhost/socket.io/1/?t=xxxxxxxxxにア
    クセスして、セッションID等の疎通手段を
    取得する
 2. ws://localhost/socket.io/1/websocket/セッ
    ションIDのアドレスでWebSocketの接続を
    行う


                                                  13
まとめ

      14
• socket.io はクロスブラウザでのリアルタ
  イム通信を可能にするライブラリ(便利!)
• Silverlight に限らず、他のライブラリと連
  携する場合には注意が必要
• Silverlight との連携には相当なハックが必
  要。。。。
    実現した人はいるよ!


                               15
• @gtk2k さんが実現
 – http://twitter.com/#!/gtk2k/status/13928844
   3506262017




                                                 16

SL囲む会東京5 Nodejs×Silverlightではまったこと

  • 1.
    Node.js × Silverlight の WebSocket 連携では まったこと Microsoft MVP for Windows Azure 割と普通 2011年12月3日 SL囲む会 東京#5
  • 2.
    今回お話する内容 • Node.js の概要 • socket.io の概要 • Silverlight 連携でのハマリどころ • まとめ 2
  • 3.
  • 4.
    Node.js とは • サーバサイドJavaScript の実装 – 他に Rhino や Aptana Jaxer 等がある • JavaScript を利用してシングルスレッドベー スの非同期処理が可能 – 大規模アクセス時のリアルタイム通信等 • 依存関係を解決するパッケージ管理機構 (npm)が存在する – v0.6.4 からは Win版も標準インストール
  • 5.
    Node.js の簡単な利用例 • コード例(example.js ) var http = require('http'); http.createServer(function (request, response) { response.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8;' }); response.end(„Node.js on Windows Azure n'); }).listen(8080); • アプリケーションを起動 > node.exe example.js
  • 6.
    Windows Azure 上でNode.js • 非同期 IO と ブロブ・ストレージの相性 が良い – 非同期的に処理が可能 – アップロード等重い処理の対応に適している • 運用の対応は不要 – Windows Azure 上で稼働するため、OS レベ ルの運用はお任せ可能 – CDN を利用することで、パフォーマンスの 改善も可能
  • 7.
  • 8.
    socket.io とは? • WebSocketの Node.js 実装 – 主にリアルタイム通信を行うために利用 – ブラウザ側/サーバ側の両方に提供 – IE9等、WebSocket が実装されていないブラ ウザもリアルタイム通信を可能にする IE5.5 以降 なら OK 幅広いブラウを サポート 8
  • 9.
    socket.io の通信方式 •ブラウザの実装によって動作を変える – WebSocket 実装済みのブラウザでは WebScket を利用する – WebScoket 未実装のブラウザでは Comet を 利用する Comet 通信 ( ブ Socket.io Socket.io ( ラ サ WebSocket ウ ー ザ バ の実装有無で 側 側 動作を変更 js) WebSocket 通 js) 信 9
  • 10.
    簡単なデモ • ブラウザ側 1./socket.io/socket.io.js を読み込む 2. socket = io.connect(uri); で接続 3. socket.send(„メッセージ‟) で送信 • サーバ側 1. io = require(„socket.io‟).listen(app) でインス タンス作成 2. io.sockets.on(„connection‟, …); で接続 3. socket.send(„メッセージ‟); で送信 10
  • 11.
    Silverlight 連携での ハマリどころ 11
  • 12.
    • 隠ぺい化が問題に・・・ – SLは「ws = new WebSocket(“ws://localhost:4503/”);」 – Socket.io は 「io.connect('http://127.0.0.1:8080/');」 Comet 通信 ここが問題!! ( ブ Socket.io Socket.io ( ラ サ WebSocket ウ ー ザ バ の実装有無で 側 側 動作を変更 js) WebSocket 通 js) 信 12
  • 13.
    Silverlight は ws = new WebSocket(“ws://localhost:4503/”); • そもそも Comet 通信している場合は無理 • WebSocket 通信の場合での流れは以下 1. いったん http://localhost/socket.io/1/?t=xxxxxxxxxにア クセスして、セッションID等の疎通手段を 取得する 2. ws://localhost/socket.io/1/websocket/セッ ションIDのアドレスでWebSocketの接続を 行う 13
  • 14.
  • 15.
    • socket.io はクロスブラウザでのリアルタ イム通信を可能にするライブラリ(便利!) • Silverlight に限らず、他のライブラリと連 携する場合には注意が必要 • Silverlight との連携には相当なハックが必 要。。。。 実現した人はいるよ! 15
  • 16.
    • @gtk2k さんが実現 – http://twitter.com/#!/gtk2k/status/13928844 3506262017 16