Node.jsでブラウザメッセンジャー
13 likes4,200 views
新卒入社3年目のエンジニア集団。それぞれが広告関連システム、ビデオ関連サービス、地図関連サービスの開発に関わる傍ら、Node.js、MongoDB、HTML5を組み合わせたブラウザ上で動作する社内用メッセンジャーツールを開発や、WebSocketを使った実験的地図サービスの開発をおこなっている。これらを実験場として、ブラウザの最新仕様やNode.jsのノウハウをヤフー社内に普及・啓蒙中。
![• 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](https://image.slidesharecdn.com/nodefestv1-1slideshare-111114012355-phpapp02/85/Node-js-26-320.jpg)
Node.jsでブラウザメッセンジャー
- 1. Node.jsで ブラウザメッセンジャー ヤフー株式会社 R&D統括本部 石澤 基、濱邉 将太、栗山 太希 2011年10月29日（土） 東京Node学園祭 2011
- 3. 講演者紹介 石澤 基 R&D統括本部 プラットフォーム開発本部 広告開発2部 開発4 濱邉 将太 R&D統括本部 フロントエンド開発1本部 開発5部 開発2 栗山 太希 R&D統括本部 プラットフォーム開発本部 広告開発1部 開発4 3
- 4. HackDayのご紹介 • NodeKOのような社内開発イベント • 8時間×3日+発表会 • 2分間LTでの社内に向けて発表 4
- 5. MYM • とにかくNode.jsが使いたい！ • HackDay期間中にNode.jsで開発 • HTML5 + Node.js + MongoDB • ブラウザ上で動作するメッセンジャーツール 5
- 6. MYMフロントエンド 6
- 7. コンセプト • コンセプトは実験場 – HTML5 • WebSocket、 Web Worker、 Web Notification、 File API、 Drag and Drop、 History API、… – ブラウザに先行実装された機能 • とにかく気になる機能を実験的に 使ってみる 7
- 8. Demo 8
- 9. クライアントサイド検索 Node Server 検索開始時 server のみ通信 client Web Worker ユーザ検索 ルーム検索 ログ検索 UI 9
- 10. 脱ライブラリのススメ • JavaScriptエンジンの高速化 • ネイティブメソッドの充実 • CSS3によるアニメーション • ブラウザ仕様の統一 • JavaScriptライブラリの利用は昔 ほど必須ではなくなっている 10
- 11. 脱jQuery ⇊ JS力の向上 ⇊ Node力の向上 11
- 12. バックエンドサーバ 12
- 13. バックエンドの構成 13
- 14. Node.js MongoDB WebSocket 14
- 15. アプリケーションサーバの実装 （Node.js） 15
- 16. 常時起動のサーバと言えば、 16
- 17. シグナルハンドラ 17
- 18. process.on('SIGINT', function () { // 諸々の後始末 // exit }); 18
- 19. process.on('SIGHUP', function () { try { // コンフィグの構文チェック } catch (err) { return util.log(err.stack); } // 諸々の後始末 // exit }); 19
- 20. process.on('uncaughtException', function (err) { util.log(err.stack); }); 20
- 21. コンフィグファイル 21
- 22. $ cat conf.json { "maxConnections" : 1000, "port" : 9999, "messageBufferSize" : 8192, ... } 22
- 23. try { var data = fs.readFileSync('conf.json'); config = JSON.parse(data); } catch (err) { util.log(err.stack); // exit } // 1000 console.log(config.maxConnections); 23
- 24. Node.js v0.5.2 try { config = require('conf.json'); } catch (err) { util.log(err.stack); // exit } 24
- 25. ロギング 25
- 26. • 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
- 27. MongoDB 27
- 28. node-mongodb-native https://github.com/christkv/node-mongodb-native 28
- 29. スキーマレス BSON 29
- 30. function onMessage (data) { var message = JSON.parse(data); collection.save(message, function(err, doc) { // if (err) ... server.broadcast(JSON.stringify(doc)); }); } 30
- 31. 抜群の相性 31
- 32. { "type" : "message", "date" : 1319792185, "_id" : "343ea44e42f0ef0001000000", .... } 32
- 33. WebSocket 33
- 34. WebSocket-Node https://github.com/Worlize/WebSocket-Node 34
- 35. ちょっとしたエピソード 35
- 36. ２回のコード書き換え 36
- 37. １回目 37
- 38. マルチプロセスからシングルプ ロセスに 38
- 39. 数百人が同時に常時接続 39
- 40. 非同期I/Oとはいえ・・・ 40
- 41. 最初はマルチプロセス 41
- 42. ・・・ 42
- 43. プロセス間通信が大変 43
- 44. シングルプロセスに変更 44
- 45. 全く問題なかった 45
- 46. 見積りは大事！ 46
- 47. ２回目 47
- 48. ブラウザのバージョンアップ 48
- 50. 下位互換性がない 50
- 51. ライブラリの変更 51
- 53. WebSocket-Nodeに モンキーパッチ 53
- 54. ということがあった２日後 54
- 56. 新バージョンサポート 旧バージョン互換性あり 56
- 58. Nodeで実装してみて 58
- 59. お手軽 59
- 62. まとめ • 中規模アプリ開発には最適 – オールJavaScriptの生産性 – MongoDBの柔軟性 • Socket.IOはオススメ • 脱jQueryでJS力アップ！Node力アップ！ 62
- 63. ご清聴ありがとうございました 63