SlideShare a Scribd company logo
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
2回のコード書き換え




36
1回目




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




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




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




40
最初はマルチプロセス




41
・・・




42
プロセス間通信が大変




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




44
全く問題なかった




45
見積りは大事!




46
2回目




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




48
WebSocketの仕様変更




49
下位互換性がない




50
ライブラリの変更




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




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




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




54
Socket.IOのアップデート




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




56
Socket.IO オススメ!




57
Nodeで実装してみて




58
お手軽




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




60
次のHackDayもNodeで




61
まとめ

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




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




                 63

More Related Content

PDF
Node.js を選ぶとき 選ばないとき
Ryunosuke SATO
 
PDF
Nodeについて
Natsuki Yamanaka
 
PDF
Node.js入門
俊夫 森
 
PDF
Node.js Tutorial at Hiroshima
Yoshihiro Iwanaga
 
PDF
Node.js基礎の基礎 - Miyazaki.js vol.2
Nobuhiro Nakashima
 
PPT
Node.js で Web アプリ開発
Tatsumi Naganuma
 
PDF
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Kohei Asai
 
PPTX
【東京Node学園祭2016】Node.js × Babel で AWS Lambda アプリケーションを開発する
Hiroyuki Kusu
 
Node.js を選ぶとき 選ばないとき
Ryunosuke SATO
 
Nodeについて
Natsuki Yamanaka
 
Node.js入門
俊夫 森
 
Node.js Tutorial at Hiroshima
Yoshihiro Iwanaga
 
Node.js基礎の基礎 - Miyazaki.js vol.2
Nobuhiro Nakashima
 
Node.js で Web アプリ開発
Tatsumi Naganuma
 
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Kohei Asai
 
【東京Node学園祭2016】Node.js × Babel で AWS Lambda アプリケーションを開発する
Hiroyuki Kusu
 

What's hot (20)

PDF
づや会 Vol4 Node.jsとphpのパフォーマンスを比較してみる
zuya
 
PPTX
Node.js Hands-On
Akinari Tsugo
 
PDF
Node js 入門
Satoshi Takami
 
PDF
TypeScriptへの入口
Sunao Tomita
 
PPTX
Node.js×mongo dbで3年間サービス運用してみた話
leverages_event
 
PDF
Hello, Node.js
Shin Sekaryo
 
PDF
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
Shunsuke Watanabe
 
PDF
サーバサイドNodeの使い道
pospome
 
PPT
[大図解]ピグライフはこう動いている
Akihiro Kuwano
 
PDF
最近のフロントエンドツールの紹介
Ryo Iinuma
 
PDF
Node.jsでサーバプログラマ デビューしよう
Yuusuke Takeuchi
 
PDF
Bp study39 nodejs
Yohei Sasaki
 
PPTX
Sails.jsのメリット・デメリット
Ito Kohta
 
PPT
20131012 nodejs
Amuro Nishizawa
 
PPTX
AngularJS2でつまづいたこと
Takehiro Takahashi
 
PPTX
たのしいNode.js
ishiki-takai
 
PPTX
Hokuriku.net 2013 01-26 node.js
Tadahiro Ishisaka
 
PPTX
Node.jsではじめるサーバ構築
AimingStudy
 
PDF
Nodejs
和樹 川端
 
PDF
ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011
Hiroh Satoh
 
づや会 Vol4 Node.jsとphpのパフォーマンスを比較してみる
zuya
 
Node.js Hands-On
Akinari Tsugo
 
Node js 入門
Satoshi Takami
 
TypeScriptへの入口
Sunao Tomita
 
Node.js×mongo dbで3年間サービス運用してみた話
leverages_event
 
Hello, Node.js
Shin Sekaryo
 
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
Shunsuke Watanabe
 
サーバサイドNodeの使い道
pospome
 
[大図解]ピグライフはこう動いている
Akihiro Kuwano
 
最近のフロントエンドツールの紹介
Ryo Iinuma
 
Node.jsでサーバプログラマ デビューしよう
Yuusuke Takeuchi
 
Bp study39 nodejs
Yohei Sasaki
 
Sails.jsのメリット・デメリット
Ito Kohta
 
20131012 nodejs
Amuro Nishizawa
 
AngularJS2でつまづいたこと
Takehiro Takahashi
 
たのしいNode.js
ishiki-takai
 
Hokuriku.net 2013 01-26 node.js
Tadahiro Ishisaka
 
Node.jsではじめるサーバ構築
AimingStudy
 
ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011
Hiroh Satoh
 
Ad

Viewers also liked (7)

PDF
「新しい」を生み出すためのWebアプリ開発とその周辺
Yusuke Wada
 
PDF
Real-time Bus Location System using by node.js
Yahoo!デベロッパーネットワーク
 
PDF
NodeFest2014 - Transpiler
Martin Heidegger
 
PDF
Node-v0.12のTLSを256倍使いこなす方法
shigeki_ohtsu
 
PPTX
Nodeで操るKurentoメディアサーバー ( Kurento + WebRTC + Node.js )
mganeko
 
PDF
power-assert, mechanism and philosophy
Takuto Wada
 
「新しい」を生み出すためのWebアプリ開発とその周辺
Yusuke Wada
 
Real-time Bus Location System using by node.js
Yahoo!デベロッパーネットワーク
 
NodeFest2014 - Transpiler
Martin Heidegger
 
Node-v0.12のTLSを256倍使いこなす方法
shigeki_ohtsu
 
Nodeで操るKurentoメディアサーバー ( Kurento + WebRTC + Node.js )
mganeko
 
power-assert, mechanism and philosophy
Takuto Wada
 
Ad

Similar to Node.jsでブラウザメッセンジャー (20)

PPTX
オタク×Node.js勉強会
虎の穴 開発室
 
PDF
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
Naoya Ito
 
PDF
WebSocket + Node.jsでつくるチャットアプリ
Kohei Kadowaki
 
PDF
SocketStream入門
Kohei Kadowaki
 
PDF
node+socket.io+enchant.jsでチャットゲーを作る
Kiyoshi SATOH
 
PDF
Nodeにしましょう
Yuzo Hebishima
 
PDF
Nodejsによるapiサーバ構築事例
Hidetoshi Mori
 
PPTX
120512 metro styleapp_javascript
Takayoshi Tanaka
 
PDF
Node.jsアプリの開発をモダン化するために取り組んできたこと
bitbank, Inc. Tokyo, Japan
 
PDF
関西FirefoxOS勉強会6thGiG「アプリ間通信」
Noritada Shimizu
 
PDF
Java scriptの進化
maruyama097
 
PPTX
A 2-1 gitwebmatrix 2 から使う node.js on windows azure
GoAzure
 
PPTX
how to create a web server with a raspberry pi
nshmzlose
 
PDF
Node.jsv0.8からv4.xへのバージョンアップ ~大規模Push通知基盤の運用事例~
Recruit Technologies
 
PDF
Nodejs Introduction
Jxck Jxck
 
PDF
inside 2012新卒説明会
Taiyoh Tanaka
 
PDF
TypeScript 勉強会
Masahiro Wakame
 
PDF
大規模なギョームシステムにHaxeを採用してみた話
terurou
 
PPTX
SL囲む会東京5 Nodejs×Silverlightではまったこと
normalian
 
PDF
泥臭い運用から、プログラマブルインフラ構築(に行きたい)
Akihiro Kuwano
 
オタク×Node.js勉強会
虎の穴 開発室
 
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
Naoya Ito
 
WebSocket + Node.jsでつくるチャットアプリ
Kohei Kadowaki
 
SocketStream入門
Kohei Kadowaki
 
node+socket.io+enchant.jsでチャットゲーを作る
Kiyoshi SATOH
 
Nodeにしましょう
Yuzo Hebishima
 
Nodejsによるapiサーバ構築事例
Hidetoshi Mori
 
120512 metro styleapp_javascript
Takayoshi Tanaka
 
Node.jsアプリの開発をモダン化するために取り組んできたこと
bitbank, Inc. Tokyo, Japan
 
関西FirefoxOS勉強会6thGiG「アプリ間通信」
Noritada Shimizu
 
Java scriptの進化
maruyama097
 
A 2-1 gitwebmatrix 2 から使う node.js on windows azure
GoAzure
 
how to create a web server with a raspberry pi
nshmzlose
 
Node.jsv0.8からv4.xへのバージョンアップ ~大規模Push通知基盤の運用事例~
Recruit Technologies
 
Nodejs Introduction
Jxck Jxck
 
inside 2012新卒説明会
Taiyoh Tanaka
 
TypeScript 勉強会
Masahiro Wakame
 
大規模なギョームシステムにHaxeを採用してみた話
terurou
 
SL囲む会東京5 Nodejs×Silverlightではまったこと
normalian
 
泥臭い運用から、プログラマブルインフラ構築(に行きたい)
Akihiro Kuwano
 

More from Yahoo!デベロッパーネットワーク (20)

PDF
ゼロから始める転移学習
Yahoo!デベロッパーネットワーク
 
PDF
継続的なモデルモニタリングを実現するKubernetes Operator
Yahoo!デベロッパーネットワーク
 
PDF
ヤフーでは開発迅速性と品質のバランスをどう取ってるか
Yahoo!デベロッパーネットワーク
 
PDF
オンプレML基盤on Kubernetes パネルディスカッション
Yahoo!デベロッパーネットワーク
 
PDF
オンプレML基盤on Kubernetes 〜Yahoo! JAPAN AIPF〜
Yahoo!デベロッパーネットワーク
 
PDF
Persistent-memory-native Database High-availability Feature
Yahoo!デベロッパーネットワーク
 
PDF
データの価値を最大化させるためのデザイン~データビジュアライゼーションの方法~ #devsumi 17-E-2
Yahoo!デベロッパーネットワーク
 
PDF
eコマースと実店舗の相互利益を目指したデザイン #yjtc
Yahoo!デベロッパーネットワーク
 
PDF
ヤフーを支えるセキュリティ ~サイバー攻撃を防ぐエンジニアの仕事とは~ #yjtc
Yahoo!デベロッパーネットワーク
 
PDF
Yahoo! JAPANのIaaSを支えるKubernetesクラスタ、アップデート自動化への挑戦 #yjtc
Yahoo!デベロッパーネットワーク
 
PDF
ビッグデータから人々のムードを捉える #yjtc
Yahoo!デベロッパーネットワーク
 
PDF
サイエンス領域におけるMLOpsの取り組み #yjtc
Yahoo!デベロッパーネットワーク
 
PDF
ヤフーのAIプラットフォーム紹介 ~AIテックカンパニーを支えるデータ基盤~ #yjtc
Yahoo!デベロッパーネットワーク
 
PDF
Yahoo! JAPAN Tech Conference 2022 Day2 Keynote #yjtc
Yahoo!デベロッパーネットワーク
 
PDF
新技術を使った次世代の商品の見せ方 ~ヤフオク!のマルチビュー機能~ #yjtc
Yahoo!デベロッパーネットワーク
 
PDF
PC版Yahoo!メールリニューアル ~サービスのUI/UX統合と改善プロセス~ #yjtc
Yahoo!デベロッパーネットワーク
 
PDF
モブデザインによる多職種チームのコミュニケーション改善 #yjtc
Yahoo!デベロッパーネットワーク
 
PDF
「新しいおうち探し」のためのAIアシスト検索 #yjtc
Yahoo!デベロッパーネットワーク
 
PDF
ユーザーの地域を考慮した検索入力補助機能の改善の試み #yjtc
Yahoo!デベロッパーネットワーク
 
ゼロから始める転移学習
Yahoo!デベロッパーネットワーク
 
継続的なモデルモニタリングを実現するKubernetes Operator
Yahoo!デベロッパーネットワーク
 
ヤフーでは開発迅速性と品質のバランスをどう取ってるか
Yahoo!デベロッパーネットワーク
 
オンプレML基盤on Kubernetes パネルディスカッション
Yahoo!デベロッパーネットワーク
 
オンプレML基盤on Kubernetes 〜Yahoo! JAPAN AIPF〜
Yahoo!デベロッパーネットワーク
 
Persistent-memory-native Database High-availability Feature
Yahoo!デベロッパーネットワーク
 
データの価値を最大化させるためのデザイン~データビジュアライゼーションの方法~ #devsumi 17-E-2
Yahoo!デベロッパーネットワーク
 
eコマースと実店舗の相互利益を目指したデザイン #yjtc
Yahoo!デベロッパーネットワーク
 
ヤフーを支えるセキュリティ ~サイバー攻撃を防ぐエンジニアの仕事とは~ #yjtc
Yahoo!デベロッパーネットワーク
 
Yahoo! JAPANのIaaSを支えるKubernetesクラスタ、アップデート自動化への挑戦 #yjtc
Yahoo!デベロッパーネットワーク
 
ビッグデータから人々のムードを捉える #yjtc
Yahoo!デベロッパーネットワーク
 
サイエンス領域におけるMLOpsの取り組み #yjtc
Yahoo!デベロッパーネットワーク
 
ヤフーのAIプラットフォーム紹介 ~AIテックカンパニーを支えるデータ基盤~ #yjtc
Yahoo!デベロッパーネットワーク
 
Yahoo! JAPAN Tech Conference 2022 Day2 Keynote #yjtc
Yahoo!デベロッパーネットワーク
 
新技術を使った次世代の商品の見せ方 ~ヤフオク!のマルチビュー機能~ #yjtc
Yahoo!デベロッパーネットワーク
 
PC版Yahoo!メールリニューアル ~サービスのUI/UX統合と改善プロセス~ #yjtc
Yahoo!デベロッパーネットワーク
 
モブデザインによる多職種チームのコミュニケーション改善 #yjtc
Yahoo!デベロッパーネットワーク
 
「新しいおうち探し」のためのAIアシスト検索 #yjtc
Yahoo!デベロッパーネットワーク
 
ユーザーの地域を考慮した検索入力補助機能の改善の試み #yjtc
Yahoo!デベロッパーネットワーク
 

Recently uploaded (11)

PDF
20250729_Devin-for-Enterprise
Masaki Yamakawa
 
PDF
20250730_QiitaBash_LT登壇資料_PDC_Kurashina.pdf
pdckurashina
 
PDF
TaketoFujikawa_ComicComputing12th_inKumamoto
Matsushita Laboratory
 
PDF
MahiroYoshida_セリフに着目したキャラクタロール推定に関する基礎検討_sigcc12th2025
Matsushita Laboratory
 
PDF
20250726_Devinで変えるエンプラシステム開発の未来
Masaki Yamakawa
 
PDF
【学会聴講報告】CVPR2025からみるVision最先端トレンド / CVPR2025 report
Sony - Neural Network Libraries
 
PDF
第三世代 ウェザーステーションキット v3 ー WSC3-L 日本語カタログ
CRI Japan, Inc.
 
PPTX
2025_7_25_吉祥寺_設計ナイト_ADR運用におけるデータ利活用の考え方.pptx
ssuserfcafd1
 
PDF
LoRaWAN ウェザーステーションキット v3 -WSC3-L 日本語ユーザーマニュアル
CRI Japan, Inc.
 
PPTX
baserCMS『カスタムコンテンツ』徹底活用術〜あなただけの管理画面を自由自在に〜
Ryuji Egashira
 
PDF
VMUG Japan book vsan 20250515 CPU/Memory vSAN
Kazuhiro Sota
 
20250729_Devin-for-Enterprise
Masaki Yamakawa
 
20250730_QiitaBash_LT登壇資料_PDC_Kurashina.pdf
pdckurashina
 
TaketoFujikawa_ComicComputing12th_inKumamoto
Matsushita Laboratory
 
MahiroYoshida_セリフに着目したキャラクタロール推定に関する基礎検討_sigcc12th2025
Matsushita Laboratory
 
20250726_Devinで変えるエンプラシステム開発の未来
Masaki Yamakawa
 
【学会聴講報告】CVPR2025からみるVision最先端トレンド / CVPR2025 report
Sony - Neural Network Libraries
 
第三世代 ウェザーステーションキット v3 ー WSC3-L 日本語カタログ
CRI Japan, Inc.
 
2025_7_25_吉祥寺_設計ナイト_ADR運用におけるデータ利活用の考え方.pptx
ssuserfcafd1
 
LoRaWAN ウェザーステーションキット v3 -WSC3-L 日本語ユーザーマニュアル
CRI Japan, Inc.
 
baserCMS『カスタムコンテンツ』徹底活用術〜あなただけの管理画面を自由自在に〜
Ryuji Egashira
 
VMUG Japan book vsan 20250515 CPU/Memory vSAN
Kazuhiro Sota
 

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