Node.jsでブラウザメッセンジャー

Node.jsで ブラウザメッセンジャー ヤフー株式会社 R&D統括本部 石澤 基、濱邉 将太、栗山 太希 2011年10月29日（土） 東京Node学園祭 2011

Yahoo! JAPAN 2

講演者紹介 石澤 基 R&D統括本部 プラットフォーム開発本部 広告開発2部 開発4 濱邉 将太 R&D統括本部 フロントエンド開発1本部 開発5部 開発2 栗山 太希 R&D統括本部 プラットフォーム開発本部 広告開発1部 開発4 3

HackDayのご紹介 • NodeKOのような社内開発イベント • 8時間×3日+発表会 • 2分間LTでの社内に向けて発表 4

MYM • とにかくNode.jsが使いたい！ • HackDay期間中にNode.jsで開発 • HTML5 + Node.js + MongoDB • ブラウザ上で動作するメッセンジャーツール 5

MYMフロントエンド 6

コンセプト • コンセプトは実験場 – HTML5 • WebSocket、 Web Worker、 Web Notification、 File API、 Drag and Drop、 History API、… – ブラウザに先行実装された機能 • とにかく気になる機能を実験的に 使ってみる 7

Demo 8

クライアントサイド検索 Node Server server client Web Worker UI 9 ユーザ検索 ルーム検索 検索開始時 のみ通信 ログ検索

脱ライブラリのススメ • JavaScriptエンジンの高速化 • ネイティブメソッドの充実 • CSS3によるアニメーション • ブラウザ仕様の統一 • JavaScriptライブラリの利用は昔 ほど必須ではなくなっている 10

脱jQuery ⇊ JS力の向上 ⇊ Node力の向上 11

バックエンドサーバ 12

バックエンドの構成 13

Node.js MongoDB WebSocket 14

アプリケーションサーバの実装 （Node.js） 15

常時起動のサーバと言えば、 16

シグナルハンドラ 17

process.on('SIGINT', function () { // 諸々の後始末 // exit }); 18

process.on('SIGHUP', function () { try { // コンフィグの構文チェック } catch (err) { return util.log(err.stack); } // 諸々の後始末 // exit }); 19

process.on('uncaughtException', function (err) { util.log(err.stack); }); 20

コンフィグファイル 21

$ cat conf.json { "maxConnections" : 1000, "port" : 9999, "messageBufferSize" : 8192, ... } 22

try { var data = fs.readFileSync('conf.json'); config = JSON.parse(data); } catch (err) { util.log(err.stack); // exit } // 1000 console.log(config.maxConnections); 23

Node.js v0.5.2 try { config = require('conf.json'); } catch (err) { util.log(err.stack); // exit } 24

ロギング 25

• util.log(err.stack);
// 28 Oct 14:54:56 - ReferenceError: test is not defined
// at [object Context]:1:7
// at Interface.<anonymous> (repl.js:171:22)
// at ReadStream.onData (tty_posix.js:70:12)
// ...

• util.log('message');
// 28 Oct 15:33:36 - message

26

MongoDB 27

node-mongodb-native https://github.com/christkv/node-mongodb-native 28

スキーマレス BSON 29

function onMessage (data) { var message = JSON.parse(data); collection.save(message, function(err, doc) { // if (err) ... server.broadcast(JSON.stringify(doc)); }); } 30

抜群の相性 31

{ "type" : "message", "date" : 1319792185, "_id" : "343ea44e42f0ef0001000000", .... } 32

WebSocket 33

WebSocket-Node https://github.com/Worlize/WebSocket-Node 34

ちょっとしたエピソード 35

２回のコード書き換え 36

１回目 37

マルチプロセスからシングルプ ロセスに 38

数百人が同時に常時接続 39

非同期I/Oとはいえ・・・ 40

最初はマルチプロセス 41

・・・ 42

プロセス間通信が大変 43

シングルプロセスに変更 44

全く問題なかった 45

見積りは大事！ 46

２回目 47

ブラウザのバージョンアップ 48

WebSocketの仕様変更 49

下位互換性がない 50

ライブラリの変更 51

互換性のあるライブラリがない 52

WebSocket-Nodeに モンキーパッチ 53

ということがあった２日後 54

Socket.IOのアップデート 55

新バージョンサポート 旧バージョン互換性あり 56

Socket.IO オススメ！ 57

Nodeで実装してみて 58

お手軽 59

ネットワークプログラミングの味方 60

次のHackDayもNodeで 61

まとめ • 中規模アプリ開発には最適 – オールJavaScriptの生産性 – MongoDBの柔軟性 • Socket.IOはオススメ • 脱jQueryでJS力アップ！Node力アップ！ 62

ご清聴ありがとうございました 63