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

7,511 views

Published on

新卒入社3年目のエンジニア集団。それぞれが広告関連システム、ビデオ関連サービス、地図関連サービスの開発に関わる傍ら、Node.js、MongoDB、HTML5を組み合わせたブラウザ上で動作する社内用メッセンジャーツールを開発や、WebSocketを使った実験的地図サービスの開発をおこなっている。これらを実験場として、ブラウザの最新仕様やNode.jsのノウハウをヤフー社内に普及・啓蒙中。

Published in: Technology
0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,511
On SlideShare
0
From Embeds
0
Number of Embeds
2,970
Actions
Shares
0
Downloads
33
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide

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

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

×