SlideShare a Scribd company logo
SmartFXでの
Socket.IO活用事
例
株式会社みんかぶ 森田剛志
@takeshy
アジェンダ
SmartFXについて
Socket.IOを使った実装
 Socket.IOの実装で考慮したこと
 Socket.IO-ReqEvについて
Socket.IOサーバの運用
 冗長化と負荷分散
 デプロイ時における停止
SmartFXについて
どんなサイト?
 みんかぶが提供するスマホ向け無料FX情
報サイト。ニュース、チャート、予想が
見れたり、バーチャルトレードができま
す。
 Socket.IOとBackbone.jsを使ってリアル
タイムなSinglePageApplicationを構築し
ています。
http://smartfx.jp
(正式にはhttp://smartfx.minkabu.jp)
Socket.IOを使った実装
Socket.IOの実装で考慮
したこと
Socket.IOはSocketを制御するため
のNameSpace、Rooms、Events
という便利な機能があります。
ただ、これらの機能は各々が代替
できるので方針を決めて使わない
と、まちまちになってしまいます。
そこでSmartFXはルールを決めま
した
SmartFXにおける
NameSpace,Rooms,Eventsの
ルール
 NameSpaceとオブジェクトは1対1の関
係で作成する
 Roomはイベント毎に作成する
 イベントが発生した場合はRoomを使って
送信する
 Eventは”message”,”reply”,”error”の3
つ
 “message”はクライアントからサーバ
に”reply”,”error”はサーバからクライアント
Socket.IO-ReqEv
 これらの約束を適用することで
Socket.IO関連の処理が共通化され
たので、くくりだしMiddlewareに
することができました
 そのMiddlewareがSocket.IO-ReqEv
です
 インストールは下記のコマンドです
npm install socket.io-reqev
Socket.IO-ReqEvの使い
方 サーバー側
Socket.IO-ReqEvを使う2つのSTEP
1. Socket.IOオブジェクトを初期値として渡して
IOReqEvオブジェクトを生成
2. IOReqEvオブジェクトにパラメータとして、
NameSpaceと規約にのっとったオブジェクトを
渡します。
この例ではひとつだけの登録ですが、ペアを何個も登録可能。
Socke.IO-ReqEvに渡すオブジェク
トの規約は下記の3つです。
1. eventsというArrayのプロパティ
にクライアントに送るイベント名
を登録する。
2. EventEmitterを継承して、イベ
ントが発生した場合はデータと共
にイベントをemitする
3. クライアントからのメッセージ
にrequestsというパラメータが含
まれていた場合に呼び出されるメ
ソッドrequestを実装する。(Like
HTTP GET)
左記のサンプルは1秒および1分ご
とのイベントと現在時間を返すた
めのプログラムです。
Socket.IO-ReqEvの使い
方 クライアント側
Socket.IO-Reqevをブラウザで使う2つの
STEP
1. Socket.IOサーバアドレス+Path(NameSpace)と、
callbackを渡してIOReqEvClientを作ります。
2. watchメソッドでsubscribeしたいイベントとリクエス
トの種別を指定します。
eventsに違うイベントを指定して再度watchを実行すると、サーバ側
でもう必要なくなったイベントのunsubscribe処理が行われます
Socket.IO-ReqEvの実
装
 サーバ側は60行もないソース
 Socket.IO 0.9.xの頃は非公開の属性
を使っていましたが、1.0になって公
開されている属性のみになりました
 興味がある人は読んで
https://github.com/takeshy/socket.io-
reqev
Socket.IOサーバの運用
システム構成
冗長化と負荷分散
 冗長化と負荷分散は、Socket.IOサーバ
がDBに登録された自分の情報を定期的
更新し、Webサーバが最近更新された
Socket.IOサーバのアドレス一覧からラ
ンダムにアドレスを選んでそのアドレ
スをクライアントに伝えることで実現
しています。
冗長化と負荷分散
シーケンス
デプロイ時における停止
 pm2というNode.jsのプログラムの
デーモン管理ツールを使っています
が、Shutdownしようとdeleteコマン
ドを実行しても、 Socket.IOのよう
なネットワークコネクションがは
りっぱなしの場合、いつまでも
deleteコマンドが完了しません。
 そのため、Socket.IOサーバ自身が
Shutdownする仕組みを作りました。
Deployの流れ
 対象Socket.IOサーバのアプリのソースを更新し、pm2の
deleteとstartを実行するスクリプトの実行(by capistrano)
 DB上の該当Socket.IOサーバのレコードのstatusを
inactive
 Socket.IOサーバは自身のレコードがinactiveになったこ
とを検知すると、ClientsにinactiveイベントをBraodcast
して、1分後に自身をexitするタイマーを実行
 inactiveイベントを受信したクライアントは、もし1分間
以上同じページに留まったいた場合は接続が切断された
旨のpopupを出力(ページ更新した場合は新たなsocket.io
サーバのアドレスを取得できるため問題なし)
 DB上の該当Socket.IOサーバのレコードのstatusをactive
Socket.IOサーバ停止
シーケンス
ご静聴ありがとうご
ざいました

More Related Content

PDF
Xcode 6の新機能
PDF
iOS 8/Swift 概要 #ios8yahoo
PPTX
2020 11/25 第29回 Tokyo Jazug Night 発表資料
PDF
既存アプリのiOS8対応 #ios8yahoo
PDF
サムネイルを作る話
PDF
SoftLayerにゅうもん(2016/03/04 SoftLayer勉強会)
PPTX
async / await の話
PPTX
BluemixでサクッとIoT ! ~ IoT Foundation, Node-RED や Azure Event Hub との連携もお助けヾ(o´∀`o)ノ
Xcode 6の新機能
iOS 8/Swift 概要 #ios8yahoo
2020 11/25 第29回 Tokyo Jazug Night 発表資料
既存アプリのiOS8対応 #ios8yahoo
サムネイルを作る話
SoftLayerにゅうもん(2016/03/04 SoftLayer勉強会)
async / await の話
BluemixでサクッとIoT ! ~ IoT Foundation, Node-RED や Azure Event Hub との連携もお助けヾ(o´∀`o)ノ

What's hot (18)

PDF
Getting started with Handoff
PPTX
Our Track to Modern Angular #2
PDF
ここにハマった!Dockerコンテナホスティング「Arukas」の裏側
PDF
2010年インストールマニアックス ~Javaアプリ編~
PDF
Riot.jsとフォームのデータバインディング
PPTX
Face APIで開発する時に使っている7つの道具
PDF
現場!実物!実践!マルチクラスタを運用するときの課題とコツ
PDF
Wolcome to swift
PDF
スタートアップにjoinして1年間の変化を振り返る
PPTX
現実的な「WordPress on Azure App Service」 クイックスタート
PDF
サーバサイドエンジニアが 1年間まじめにSPAやってみた
PPTX
本番運用で使うVisual Studio
PDF
第一回REST勉強会_鈴木商店の開発環境
PDF
Azure Arcで「どこでも」Azureサービスを利用可能に!
PDF
Apiドキュメンテーションツールを使いこなす【api blueprint編】
PPTX
SoftLayer API で資産管理をお手伝い!
PPTX
Idcfクラウドで始める構築自動化
PPTX
コンテナで作る開発環境 (20161104 CodeIgniter Night)
Getting started with Handoff
Our Track to Modern Angular #2
ここにハマった!Dockerコンテナホスティング「Arukas」の裏側
2010年インストールマニアックス ~Javaアプリ編~
Riot.jsとフォームのデータバインディング
Face APIで開発する時に使っている7つの道具
現場!実物!実践!マルチクラスタを運用するときの課題とコツ
Wolcome to swift
スタートアップにjoinして1年間の変化を振り返る
現実的な「WordPress on Azure App Service」 クイックスタート
サーバサイドエンジニアが 1年間まじめにSPAやってみた
本番運用で使うVisual Studio
第一回REST勉強会_鈴木商店の開発環境
Azure Arcで「どこでも」Azureサービスを利用可能に!
Apiドキュメンテーションツールを使いこなす【api blueprint編】
SoftLayer API で資産管理をお手伝い!
Idcfクラウドで始める構築自動化
コンテナで作る開発環境 (20161104 CodeIgniter Night)
Ad

Smart fxでのsocketio活用事例