Node.js × Silverlight の WebSocket 連携ではまったこと

2011 年 12 月 3 日SL 囲む会 東京 #5

Microsoft MVP for Windows Azure

割と普通

2

今回お話する内容• Node.js の概要• socket.io の概要• Silverlight 連携でのハマリどころ• まとめ

3

Node.js の概要

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 を利用することで、パフォーマンス

の改善も可能

7

socket.io の概要

8

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

ラウザもリアルタイム通信を可能にする

幅広いブラウをサポート

IE5.5 以降なら OK

9

socket.io の通信方式• ブラウザの実装によって動作を変える–WebSocket 実装済みのブラウザでは

WebScket を利用する–WebScoket 未実装のブラウザでは Comet

を利用する

WebSocket 通信

Comet 通信

Socket.

io

(

ブラウザ側

js

)

Socket.

io

WebSocketの実装有無で動作を変更

(

サー

バ側

js

)

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(‘ メッセージ’ ); で送信

11

Silverlight 連携でのハマリどころ

12

• 隠ぺい化が問題に・・・– SL は「 ws = new

WebSocket(“ws://localhost:4503/”); 」– Socket.io

は「 io.connect('http://127.0.0.1:8080/');」

12

WebSocket 通信

Comet 通信

Socket.

io

(

ブラウザ側

js

)

Socket.

io

WebSocketの実装有無で動作を変更

(

サー

バ側

js

)

ここが問題！！

13

• そもそも Comet 通信している場合は無理

• WebSocket 通信の場合での流れは以下1. いったん http://localhost/socket.io/1/?

t=xxxxxxxxx にアクセスして、セッション ID 等の疎通手段を取得する

2. ws://localhost/socket.io/1/websocket/セッション ID のアドレスで WebSocket の接続を行う

Silverlight はws = new 　WebSocket(“ws://localhost:4503/”);

14

まとめ

15

• socket.io はクロスブラウザでのリアルタイム通信を可能にするライブラリ ( 便利！ )

• Silverlight に限らず、他のライブラリと連携する場合には注意が必要

• Silverlight との連携には相当なハックが必要。。。。

実現した人はいるよ！

16

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

139288443506262017