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

300 Views

November 14, 11

スライド概要

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

profile-image

2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

Yahoo! JAPAN 2

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.
[beta]
• 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.

2回のコード書き換え 36

37.

1回目 37

38.

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

39.

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

40.

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

41.

最初はマルチプロセス 41

42.

・・・ 42

43.

プロセス間通信が大変 43

44.

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

45.

全く問題なかった 45

46.

見積りは大事! 46

47.

2回目 47

48.

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

49.

WebSocketの仕様変更 49

50.

下位互換性がない 50

51.

ライブラリの変更 51

52.

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

53.

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

54.

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

55.

Socket.IOのアップデート 55

56.

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

57.

Socket.IO オススメ! 57

58.

Nodeで実装してみて 58

59.

お手軽 59

60.

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

61.

次のHackDayもNodeで 61

62.

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

63.

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