using sockjs(websocket) with sencha ext js
TRANSCRIPT
Using SockJS(Websocket) with Sencha Ext JS Sencha Ext JS上のWebSocket実装の形
株式会社ゼノフィ XenophyCOLTD
小堤 一弘
本日のアジェンダ
自己紹介
SockJSをSencha Ext JSで使うための準備
メッセージ交換とマウス位置共有の設計
デモ
まとめ
自己紹介
こつつみ かずひろ
小堤 一弘 株式会社ゼノフィ 代表取締役 Sencha 公式トレーニング認定トレーナー Japan Sencha User Group 主宰 html5jエンタープライズ部 Twitter kotsutsumi Facebook httpswwwfacebookcomkotsutsumi
Books Ext JS Data-Driven Application Design Sencha Ext JS 4 実践開発ガイド Sencha Ext JS 4 実践開発ガイド 2 Sencha Touch 2 実践開発ガイド (監修)
SockJSをSencha Ext JSで使うための準備
まず普通にSockJSでWebSocket通信を するための準備をする
Vertx + SockJS Serverの環境構築について
昨日rdquohtml5jエンタープライズ部rdquo で紹介させてもらった
ldquoSPA のための Web サーバ構築ノウハウrdquo を参照してください
httpwwwslidesharenetkotsutsumispa-web
SockJS Serverの作成
Vertx読み込み var vertx = require(vertx)
HTTPサーバー生成 var server = vertxcreateHttpServer()
SockJSサーバー生成 var sockJSServer = vertxcreateSockJSServer(server)
SockJS Serverの作成
Vertx読み込み var vertx = require(vertx)
HTTPサーバー生成 var server = vertxcreateHttpServer()
SockJSサーバー生成 var sockJSServer = vertxcreateSockJSServer(server)
SockJS Serverの作成
Vertx読み込み var vertx = require(vertx)
HTTPサーバー生成 var server = vertxcreateHttpServer()
SockJSサーバー生成 var sockJSServer = vertxcreateSockJSServer(server)
SockJS Serverの作成
Vertx読み込み var vertx = require(vertx)
HTTPサーバー生成 var server = vertxcreateHttpServer()
SockJSサーバー生成 var sockJSServer = vertxcreateSockJSServer(server)
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
ブリッジはデフォルトのすべてを拒否するポリシーを 持つファイアウォールの一種のように動作します
SockJS Serverの作成
リスン serverlisten(8081)
SockJS Serverの起動
vertx run extjs-sockjsjs
クラスター起動する場合は後ろに-clusterをつける
無事起動
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJSクライアントに必要なリソース
sockjs-034minjs
httpcdnsockjsorgsockjs-034minjs
vertxbus-21js
vertx-21M2targzを解凍したディレクトリに格納されている
のでHTMLからアクセスできるところに配置する
vertx-21M2clientvertxbus-21js
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
これがさっきサーバーサイドで設定したprefixね
prefix eventbus
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
セキュリティ設定で指定したaddress
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
メッセージを受信したときのコールバック関数
実行するとこんな感じ
SockJSでWebSocket繋がったね
やったねっ
これ前回hellip html5j エンタープライズ部でやったやつhellip
をちょっと詳しく説明しただけhellip
デス
続きましてhellip
メッセージ交換とマウス位置共有の設計
SockJSをSencha Ext JSのクラスシステムで ラッピングする
Sencha Cmdを利用してワークスペースを作成する
sencha -s ~LibrarySenchaext-4221144 generate app MyApp
SDKまでのパス
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
本日のアジェンダ
自己紹介
SockJSをSencha Ext JSで使うための準備
メッセージ交換とマウス位置共有の設計
デモ
まとめ
自己紹介
こつつみ かずひろ
小堤 一弘 株式会社ゼノフィ 代表取締役 Sencha 公式トレーニング認定トレーナー Japan Sencha User Group 主宰 html5jエンタープライズ部 Twitter kotsutsumi Facebook httpswwwfacebookcomkotsutsumi
Books Ext JS Data-Driven Application Design Sencha Ext JS 4 実践開発ガイド Sencha Ext JS 4 実践開発ガイド 2 Sencha Touch 2 実践開発ガイド (監修)
SockJSをSencha Ext JSで使うための準備
まず普通にSockJSでWebSocket通信を するための準備をする
Vertx + SockJS Serverの環境構築について
昨日rdquohtml5jエンタープライズ部rdquo で紹介させてもらった
ldquoSPA のための Web サーバ構築ノウハウrdquo を参照してください
httpwwwslidesharenetkotsutsumispa-web
SockJS Serverの作成
Vertx読み込み var vertx = require(vertx)
HTTPサーバー生成 var server = vertxcreateHttpServer()
SockJSサーバー生成 var sockJSServer = vertxcreateSockJSServer(server)
SockJS Serverの作成
Vertx読み込み var vertx = require(vertx)
HTTPサーバー生成 var server = vertxcreateHttpServer()
SockJSサーバー生成 var sockJSServer = vertxcreateSockJSServer(server)
SockJS Serverの作成
Vertx読み込み var vertx = require(vertx)
HTTPサーバー生成 var server = vertxcreateHttpServer()
SockJSサーバー生成 var sockJSServer = vertxcreateSockJSServer(server)
SockJS Serverの作成
Vertx読み込み var vertx = require(vertx)
HTTPサーバー生成 var server = vertxcreateHttpServer()
SockJSサーバー生成 var sockJSServer = vertxcreateSockJSServer(server)
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
ブリッジはデフォルトのすべてを拒否するポリシーを 持つファイアウォールの一種のように動作します
SockJS Serverの作成
リスン serverlisten(8081)
SockJS Serverの起動
vertx run extjs-sockjsjs
クラスター起動する場合は後ろに-clusterをつける
無事起動
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJSクライアントに必要なリソース
sockjs-034minjs
httpcdnsockjsorgsockjs-034minjs
vertxbus-21js
vertx-21M2targzを解凍したディレクトリに格納されている
のでHTMLからアクセスできるところに配置する
vertx-21M2clientvertxbus-21js
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
これがさっきサーバーサイドで設定したprefixね
prefix eventbus
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
セキュリティ設定で指定したaddress
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
メッセージを受信したときのコールバック関数
実行するとこんな感じ
SockJSでWebSocket繋がったね
やったねっ
これ前回hellip html5j エンタープライズ部でやったやつhellip
をちょっと詳しく説明しただけhellip
デス
続きましてhellip
メッセージ交換とマウス位置共有の設計
SockJSをSencha Ext JSのクラスシステムで ラッピングする
Sencha Cmdを利用してワークスペースを作成する
sencha -s ~LibrarySenchaext-4221144 generate app MyApp
SDKまでのパス
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
自己紹介
こつつみ かずひろ
小堤 一弘 株式会社ゼノフィ 代表取締役 Sencha 公式トレーニング認定トレーナー Japan Sencha User Group 主宰 html5jエンタープライズ部 Twitter kotsutsumi Facebook httpswwwfacebookcomkotsutsumi
Books Ext JS Data-Driven Application Design Sencha Ext JS 4 実践開発ガイド Sencha Ext JS 4 実践開発ガイド 2 Sencha Touch 2 実践開発ガイド (監修)
SockJSをSencha Ext JSで使うための準備
まず普通にSockJSでWebSocket通信を するための準備をする
Vertx + SockJS Serverの環境構築について
昨日rdquohtml5jエンタープライズ部rdquo で紹介させてもらった
ldquoSPA のための Web サーバ構築ノウハウrdquo を参照してください
httpwwwslidesharenetkotsutsumispa-web
SockJS Serverの作成
Vertx読み込み var vertx = require(vertx)
HTTPサーバー生成 var server = vertxcreateHttpServer()
SockJSサーバー生成 var sockJSServer = vertxcreateSockJSServer(server)
SockJS Serverの作成
Vertx読み込み var vertx = require(vertx)
HTTPサーバー生成 var server = vertxcreateHttpServer()
SockJSサーバー生成 var sockJSServer = vertxcreateSockJSServer(server)
SockJS Serverの作成
Vertx読み込み var vertx = require(vertx)
HTTPサーバー生成 var server = vertxcreateHttpServer()
SockJSサーバー生成 var sockJSServer = vertxcreateSockJSServer(server)
SockJS Serverの作成
Vertx読み込み var vertx = require(vertx)
HTTPサーバー生成 var server = vertxcreateHttpServer()
SockJSサーバー生成 var sockJSServer = vertxcreateSockJSServer(server)
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
ブリッジはデフォルトのすべてを拒否するポリシーを 持つファイアウォールの一種のように動作します
SockJS Serverの作成
リスン serverlisten(8081)
SockJS Serverの起動
vertx run extjs-sockjsjs
クラスター起動する場合は後ろに-clusterをつける
無事起動
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJSクライアントに必要なリソース
sockjs-034minjs
httpcdnsockjsorgsockjs-034minjs
vertxbus-21js
vertx-21M2targzを解凍したディレクトリに格納されている
のでHTMLからアクセスできるところに配置する
vertx-21M2clientvertxbus-21js
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
これがさっきサーバーサイドで設定したprefixね
prefix eventbus
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
セキュリティ設定で指定したaddress
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
メッセージを受信したときのコールバック関数
実行するとこんな感じ
SockJSでWebSocket繋がったね
やったねっ
これ前回hellip html5j エンタープライズ部でやったやつhellip
をちょっと詳しく説明しただけhellip
デス
続きましてhellip
メッセージ交換とマウス位置共有の設計
SockJSをSencha Ext JSのクラスシステムで ラッピングする
Sencha Cmdを利用してワークスペースを作成する
sencha -s ~LibrarySenchaext-4221144 generate app MyApp
SDKまでのパス
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
SockJSをSencha Ext JSで使うための準備
まず普通にSockJSでWebSocket通信を するための準備をする
Vertx + SockJS Serverの環境構築について
昨日rdquohtml5jエンタープライズ部rdquo で紹介させてもらった
ldquoSPA のための Web サーバ構築ノウハウrdquo を参照してください
httpwwwslidesharenetkotsutsumispa-web
SockJS Serverの作成
Vertx読み込み var vertx = require(vertx)
HTTPサーバー生成 var server = vertxcreateHttpServer()
SockJSサーバー生成 var sockJSServer = vertxcreateSockJSServer(server)
SockJS Serverの作成
Vertx読み込み var vertx = require(vertx)
HTTPサーバー生成 var server = vertxcreateHttpServer()
SockJSサーバー生成 var sockJSServer = vertxcreateSockJSServer(server)
SockJS Serverの作成
Vertx読み込み var vertx = require(vertx)
HTTPサーバー生成 var server = vertxcreateHttpServer()
SockJSサーバー生成 var sockJSServer = vertxcreateSockJSServer(server)
SockJS Serverの作成
Vertx読み込み var vertx = require(vertx)
HTTPサーバー生成 var server = vertxcreateHttpServer()
SockJSサーバー生成 var sockJSServer = vertxcreateSockJSServer(server)
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
ブリッジはデフォルトのすべてを拒否するポリシーを 持つファイアウォールの一種のように動作します
SockJS Serverの作成
リスン serverlisten(8081)
SockJS Serverの起動
vertx run extjs-sockjsjs
クラスター起動する場合は後ろに-clusterをつける
無事起動
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJSクライアントに必要なリソース
sockjs-034minjs
httpcdnsockjsorgsockjs-034minjs
vertxbus-21js
vertx-21M2targzを解凍したディレクトリに格納されている
のでHTMLからアクセスできるところに配置する
vertx-21M2clientvertxbus-21js
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
これがさっきサーバーサイドで設定したprefixね
prefix eventbus
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
セキュリティ設定で指定したaddress
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
メッセージを受信したときのコールバック関数
実行するとこんな感じ
SockJSでWebSocket繋がったね
やったねっ
これ前回hellip html5j エンタープライズ部でやったやつhellip
をちょっと詳しく説明しただけhellip
デス
続きましてhellip
メッセージ交換とマウス位置共有の設計
SockJSをSencha Ext JSのクラスシステムで ラッピングする
Sencha Cmdを利用してワークスペースを作成する
sencha -s ~LibrarySenchaext-4221144 generate app MyApp
SDKまでのパス
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
Vertx + SockJS Serverの環境構築について
昨日rdquohtml5jエンタープライズ部rdquo で紹介させてもらった
ldquoSPA のための Web サーバ構築ノウハウrdquo を参照してください
httpwwwslidesharenetkotsutsumispa-web
SockJS Serverの作成
Vertx読み込み var vertx = require(vertx)
HTTPサーバー生成 var server = vertxcreateHttpServer()
SockJSサーバー生成 var sockJSServer = vertxcreateSockJSServer(server)
SockJS Serverの作成
Vertx読み込み var vertx = require(vertx)
HTTPサーバー生成 var server = vertxcreateHttpServer()
SockJSサーバー生成 var sockJSServer = vertxcreateSockJSServer(server)
SockJS Serverの作成
Vertx読み込み var vertx = require(vertx)
HTTPサーバー生成 var server = vertxcreateHttpServer()
SockJSサーバー生成 var sockJSServer = vertxcreateSockJSServer(server)
SockJS Serverの作成
Vertx読み込み var vertx = require(vertx)
HTTPサーバー生成 var server = vertxcreateHttpServer()
SockJSサーバー生成 var sockJSServer = vertxcreateSockJSServer(server)
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
ブリッジはデフォルトのすべてを拒否するポリシーを 持つファイアウォールの一種のように動作します
SockJS Serverの作成
リスン serverlisten(8081)
SockJS Serverの起動
vertx run extjs-sockjsjs
クラスター起動する場合は後ろに-clusterをつける
無事起動
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJSクライアントに必要なリソース
sockjs-034minjs
httpcdnsockjsorgsockjs-034minjs
vertxbus-21js
vertx-21M2targzを解凍したディレクトリに格納されている
のでHTMLからアクセスできるところに配置する
vertx-21M2clientvertxbus-21js
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
これがさっきサーバーサイドで設定したprefixね
prefix eventbus
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
セキュリティ設定で指定したaddress
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
メッセージを受信したときのコールバック関数
実行するとこんな感じ
SockJSでWebSocket繋がったね
やったねっ
これ前回hellip html5j エンタープライズ部でやったやつhellip
をちょっと詳しく説明しただけhellip
デス
続きましてhellip
メッセージ交換とマウス位置共有の設計
SockJSをSencha Ext JSのクラスシステムで ラッピングする
Sencha Cmdを利用してワークスペースを作成する
sencha -s ~LibrarySenchaext-4221144 generate app MyApp
SDKまでのパス
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
SockJS Serverの作成
Vertx読み込み var vertx = require(vertx)
HTTPサーバー生成 var server = vertxcreateHttpServer()
SockJSサーバー生成 var sockJSServer = vertxcreateSockJSServer(server)
SockJS Serverの作成
Vertx読み込み var vertx = require(vertx)
HTTPサーバー生成 var server = vertxcreateHttpServer()
SockJSサーバー生成 var sockJSServer = vertxcreateSockJSServer(server)
SockJS Serverの作成
Vertx読み込み var vertx = require(vertx)
HTTPサーバー生成 var server = vertxcreateHttpServer()
SockJSサーバー生成 var sockJSServer = vertxcreateSockJSServer(server)
SockJS Serverの作成
Vertx読み込み var vertx = require(vertx)
HTTPサーバー生成 var server = vertxcreateHttpServer()
SockJSサーバー生成 var sockJSServer = vertxcreateSockJSServer(server)
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
ブリッジはデフォルトのすべてを拒否するポリシーを 持つファイアウォールの一種のように動作します
SockJS Serverの作成
リスン serverlisten(8081)
SockJS Serverの起動
vertx run extjs-sockjsjs
クラスター起動する場合は後ろに-clusterをつける
無事起動
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJSクライアントに必要なリソース
sockjs-034minjs
httpcdnsockjsorgsockjs-034minjs
vertxbus-21js
vertx-21M2targzを解凍したディレクトリに格納されている
のでHTMLからアクセスできるところに配置する
vertx-21M2clientvertxbus-21js
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
これがさっきサーバーサイドで設定したprefixね
prefix eventbus
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
セキュリティ設定で指定したaddress
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
メッセージを受信したときのコールバック関数
実行するとこんな感じ
SockJSでWebSocket繋がったね
やったねっ
これ前回hellip html5j エンタープライズ部でやったやつhellip
をちょっと詳しく説明しただけhellip
デス
続きましてhellip
メッセージ交換とマウス位置共有の設計
SockJSをSencha Ext JSのクラスシステムで ラッピングする
Sencha Cmdを利用してワークスペースを作成する
sencha -s ~LibrarySenchaext-4221144 generate app MyApp
SDKまでのパス
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
SockJS Serverの作成
Vertx読み込み var vertx = require(vertx)
HTTPサーバー生成 var server = vertxcreateHttpServer()
SockJSサーバー生成 var sockJSServer = vertxcreateSockJSServer(server)
SockJS Serverの作成
Vertx読み込み var vertx = require(vertx)
HTTPサーバー生成 var server = vertxcreateHttpServer()
SockJSサーバー生成 var sockJSServer = vertxcreateSockJSServer(server)
SockJS Serverの作成
Vertx読み込み var vertx = require(vertx)
HTTPサーバー生成 var server = vertxcreateHttpServer()
SockJSサーバー生成 var sockJSServer = vertxcreateSockJSServer(server)
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
ブリッジはデフォルトのすべてを拒否するポリシーを 持つファイアウォールの一種のように動作します
SockJS Serverの作成
リスン serverlisten(8081)
SockJS Serverの起動
vertx run extjs-sockjsjs
クラスター起動する場合は後ろに-clusterをつける
無事起動
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJSクライアントに必要なリソース
sockjs-034minjs
httpcdnsockjsorgsockjs-034minjs
vertxbus-21js
vertx-21M2targzを解凍したディレクトリに格納されている
のでHTMLからアクセスできるところに配置する
vertx-21M2clientvertxbus-21js
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
これがさっきサーバーサイドで設定したprefixね
prefix eventbus
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
セキュリティ設定で指定したaddress
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
メッセージを受信したときのコールバック関数
実行するとこんな感じ
SockJSでWebSocket繋がったね
やったねっ
これ前回hellip html5j エンタープライズ部でやったやつhellip
をちょっと詳しく説明しただけhellip
デス
続きましてhellip
メッセージ交換とマウス位置共有の設計
SockJSをSencha Ext JSのクラスシステムで ラッピングする
Sencha Cmdを利用してワークスペースを作成する
sencha -s ~LibrarySenchaext-4221144 generate app MyApp
SDKまでのパス
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
SockJS Serverの作成
Vertx読み込み var vertx = require(vertx)
HTTPサーバー生成 var server = vertxcreateHttpServer()
SockJSサーバー生成 var sockJSServer = vertxcreateSockJSServer(server)
SockJS Serverの作成
Vertx読み込み var vertx = require(vertx)
HTTPサーバー生成 var server = vertxcreateHttpServer()
SockJSサーバー生成 var sockJSServer = vertxcreateSockJSServer(server)
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
ブリッジはデフォルトのすべてを拒否するポリシーを 持つファイアウォールの一種のように動作します
SockJS Serverの作成
リスン serverlisten(8081)
SockJS Serverの起動
vertx run extjs-sockjsjs
クラスター起動する場合は後ろに-clusterをつける
無事起動
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJSクライアントに必要なリソース
sockjs-034minjs
httpcdnsockjsorgsockjs-034minjs
vertxbus-21js
vertx-21M2targzを解凍したディレクトリに格納されている
のでHTMLからアクセスできるところに配置する
vertx-21M2clientvertxbus-21js
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
これがさっきサーバーサイドで設定したprefixね
prefix eventbus
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
セキュリティ設定で指定したaddress
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
メッセージを受信したときのコールバック関数
実行するとこんな感じ
SockJSでWebSocket繋がったね
やったねっ
これ前回hellip html5j エンタープライズ部でやったやつhellip
をちょっと詳しく説明しただけhellip
デス
続きましてhellip
メッセージ交換とマウス位置共有の設計
SockJSをSencha Ext JSのクラスシステムで ラッピングする
Sencha Cmdを利用してワークスペースを作成する
sencha -s ~LibrarySenchaext-4221144 generate app MyApp
SDKまでのパス
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
SockJS Serverの作成
Vertx読み込み var vertx = require(vertx)
HTTPサーバー生成 var server = vertxcreateHttpServer()
SockJSサーバー生成 var sockJSServer = vertxcreateSockJSServer(server)
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
ブリッジはデフォルトのすべてを拒否するポリシーを 持つファイアウォールの一種のように動作します
SockJS Serverの作成
リスン serverlisten(8081)
SockJS Serverの起動
vertx run extjs-sockjsjs
クラスター起動する場合は後ろに-clusterをつける
無事起動
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJSクライアントに必要なリソース
sockjs-034minjs
httpcdnsockjsorgsockjs-034minjs
vertxbus-21js
vertx-21M2targzを解凍したディレクトリに格納されている
のでHTMLからアクセスできるところに配置する
vertx-21M2clientvertxbus-21js
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
これがさっきサーバーサイドで設定したprefixね
prefix eventbus
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
セキュリティ設定で指定したaddress
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
メッセージを受信したときのコールバック関数
実行するとこんな感じ
SockJSでWebSocket繋がったね
やったねっ
これ前回hellip html5j エンタープライズ部でやったやつhellip
をちょっと詳しく説明しただけhellip
デス
続きましてhellip
メッセージ交換とマウス位置共有の設計
SockJSをSencha Ext JSのクラスシステムで ラッピングする
Sencha Cmdを利用してワークスペースを作成する
sencha -s ~LibrarySenchaext-4221144 generate app MyApp
SDKまでのパス
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
ブリッジはデフォルトのすべてを拒否するポリシーを 持つファイアウォールの一種のように動作します
SockJS Serverの作成
リスン serverlisten(8081)
SockJS Serverの起動
vertx run extjs-sockjsjs
クラスター起動する場合は後ろに-clusterをつける
無事起動
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJSクライアントに必要なリソース
sockjs-034minjs
httpcdnsockjsorgsockjs-034minjs
vertxbus-21js
vertx-21M2targzを解凍したディレクトリに格納されている
のでHTMLからアクセスできるところに配置する
vertx-21M2clientvertxbus-21js
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
これがさっきサーバーサイドで設定したprefixね
prefix eventbus
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
セキュリティ設定で指定したaddress
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
メッセージを受信したときのコールバック関数
実行するとこんな感じ
SockJSでWebSocket繋がったね
やったねっ
これ前回hellip html5j エンタープライズ部でやったやつhellip
をちょっと詳しく説明しただけhellip
デス
続きましてhellip
メッセージ交換とマウス位置共有の設計
SockJSをSencha Ext JSのクラスシステムで ラッピングする
Sencha Cmdを利用してワークスペースを作成する
sencha -s ~LibrarySenchaext-4221144 generate app MyApp
SDKまでのパス
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
ブリッジはデフォルトのすべてを拒否するポリシーを 持つファイアウォールの一種のように動作します
SockJS Serverの作成
リスン serverlisten(8081)
SockJS Serverの起動
vertx run extjs-sockjsjs
クラスター起動する場合は後ろに-clusterをつける
無事起動
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJSクライアントに必要なリソース
sockjs-034minjs
httpcdnsockjsorgsockjs-034minjs
vertxbus-21js
vertx-21M2targzを解凍したディレクトリに格納されている
のでHTMLからアクセスできるところに配置する
vertx-21M2clientvertxbus-21js
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
これがさっきサーバーサイドで設定したprefixね
prefix eventbus
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
セキュリティ設定で指定したaddress
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
メッセージを受信したときのコールバック関数
実行するとこんな感じ
SockJSでWebSocket繋がったね
やったねっ
これ前回hellip html5j エンタープライズ部でやったやつhellip
をちょっと詳しく説明しただけhellip
デス
続きましてhellip
メッセージ交換とマウス位置共有の設計
SockJSをSencha Ext JSのクラスシステムで ラッピングする
Sencha Cmdを利用してワークスペースを作成する
sencha -s ~LibrarySenchaext-4221144 generate app MyApp
SDKまでのパス
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
ブリッジはデフォルトのすべてを拒否するポリシーを 持つファイアウォールの一種のように動作します
SockJS Serverの作成
リスン serverlisten(8081)
SockJS Serverの起動
vertx run extjs-sockjsjs
クラスター起動する場合は後ろに-clusterをつける
無事起動
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJSクライアントに必要なリソース
sockjs-034minjs
httpcdnsockjsorgsockjs-034minjs
vertxbus-21js
vertx-21M2targzを解凍したディレクトリに格納されている
のでHTMLからアクセスできるところに配置する
vertx-21M2clientvertxbus-21js
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
これがさっきサーバーサイドで設定したprefixね
prefix eventbus
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
セキュリティ設定で指定したaddress
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
メッセージを受信したときのコールバック関数
実行するとこんな感じ
SockJSでWebSocket繋がったね
やったねっ
これ前回hellip html5j エンタープライズ部でやったやつhellip
をちょっと詳しく説明しただけhellip
デス
続きましてhellip
メッセージ交換とマウス位置共有の設計
SockJSをSencha Ext JSのクラスシステムで ラッピングする
Sencha Cmdを利用してワークスペースを作成する
sencha -s ~LibrarySenchaext-4221144 generate app MyApp
SDKまでのパス
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
ブリッジはデフォルトのすべてを拒否するポリシーを 持つファイアウォールの一種のように動作します
SockJS Serverの作成
リスン serverlisten(8081)
SockJS Serverの起動
vertx run extjs-sockjsjs
クラスター起動する場合は後ろに-clusterをつける
無事起動
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJSクライアントに必要なリソース
sockjs-034minjs
httpcdnsockjsorgsockjs-034minjs
vertxbus-21js
vertx-21M2targzを解凍したディレクトリに格納されている
のでHTMLからアクセスできるところに配置する
vertx-21M2clientvertxbus-21js
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
これがさっきサーバーサイドで設定したprefixね
prefix eventbus
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
セキュリティ設定で指定したaddress
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
メッセージを受信したときのコールバック関数
実行するとこんな感じ
SockJSでWebSocket繋がったね
やったねっ
これ前回hellip html5j エンタープライズ部でやったやつhellip
をちょっと詳しく説明しただけhellip
デス
続きましてhellip
メッセージ交換とマウス位置共有の設計
SockJSをSencha Ext JSのクラスシステムで ラッピングする
Sencha Cmdを利用してワークスペースを作成する
sencha -s ~LibrarySenchaext-4221144 generate app MyApp
SDKまでのパス
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
SockJS Serverの作成
ブリッジ設定 sockJSServerbridge(
コンフィグ prefix lsquoeventbusrsquo セキュリティ設定 [address lsquodemoorderMgr] [address lsquodemoorderMgr] )
ブリッジはデフォルトのすべてを拒否するポリシーを 持つファイアウォールの一種のように動作します
SockJS Serverの作成
リスン serverlisten(8081)
SockJS Serverの起動
vertx run extjs-sockjsjs
クラスター起動する場合は後ろに-clusterをつける
無事起動
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJSクライアントに必要なリソース
sockjs-034minjs
httpcdnsockjsorgsockjs-034minjs
vertxbus-21js
vertx-21M2targzを解凍したディレクトリに格納されている
のでHTMLからアクセスできるところに配置する
vertx-21M2clientvertxbus-21js
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
これがさっきサーバーサイドで設定したprefixね
prefix eventbus
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
セキュリティ設定で指定したaddress
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
メッセージを受信したときのコールバック関数
実行するとこんな感じ
SockJSでWebSocket繋がったね
やったねっ
これ前回hellip html5j エンタープライズ部でやったやつhellip
をちょっと詳しく説明しただけhellip
デス
続きましてhellip
メッセージ交換とマウス位置共有の設計
SockJSをSencha Ext JSのクラスシステムで ラッピングする
Sencha Cmdを利用してワークスペースを作成する
sencha -s ~LibrarySenchaext-4221144 generate app MyApp
SDKまでのパス
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
SockJS Serverの作成
リスン serverlisten(8081)
SockJS Serverの起動
vertx run extjs-sockjsjs
クラスター起動する場合は後ろに-clusterをつける
無事起動
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJSクライアントに必要なリソース
sockjs-034minjs
httpcdnsockjsorgsockjs-034minjs
vertxbus-21js
vertx-21M2targzを解凍したディレクトリに格納されている
のでHTMLからアクセスできるところに配置する
vertx-21M2clientvertxbus-21js
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
これがさっきサーバーサイドで設定したprefixね
prefix eventbus
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
セキュリティ設定で指定したaddress
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
メッセージを受信したときのコールバック関数
実行するとこんな感じ
SockJSでWebSocket繋がったね
やったねっ
これ前回hellip html5j エンタープライズ部でやったやつhellip
をちょっと詳しく説明しただけhellip
デス
続きましてhellip
メッセージ交換とマウス位置共有の設計
SockJSをSencha Ext JSのクラスシステムで ラッピングする
Sencha Cmdを利用してワークスペースを作成する
sencha -s ~LibrarySenchaext-4221144 generate app MyApp
SDKまでのパス
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
SockJS Serverの起動
vertx run extjs-sockjsjs
クラスター起動する場合は後ろに-clusterをつける
無事起動
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJSクライアントに必要なリソース
sockjs-034minjs
httpcdnsockjsorgsockjs-034minjs
vertxbus-21js
vertx-21M2targzを解凍したディレクトリに格納されている
のでHTMLからアクセスできるところに配置する
vertx-21M2clientvertxbus-21js
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
これがさっきサーバーサイドで設定したprefixね
prefix eventbus
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
セキュリティ設定で指定したaddress
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
メッセージを受信したときのコールバック関数
実行するとこんな感じ
SockJSでWebSocket繋がったね
やったねっ
これ前回hellip html5j エンタープライズ部でやったやつhellip
をちょっと詳しく説明しただけhellip
デス
続きましてhellip
メッセージ交換とマウス位置共有の設計
SockJSをSencha Ext JSのクラスシステムで ラッピングする
Sencha Cmdを利用してワークスペースを作成する
sencha -s ~LibrarySenchaext-4221144 generate app MyApp
SDKまでのパス
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
無事起動
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJSクライアントに必要なリソース
sockjs-034minjs
httpcdnsockjsorgsockjs-034minjs
vertxbus-21js
vertx-21M2targzを解凍したディレクトリに格納されている
のでHTMLからアクセスできるところに配置する
vertx-21M2clientvertxbus-21js
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
これがさっきサーバーサイドで設定したprefixね
prefix eventbus
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
セキュリティ設定で指定したaddress
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
メッセージを受信したときのコールバック関数
実行するとこんな感じ
SockJSでWebSocket繋がったね
やったねっ
これ前回hellip html5j エンタープライズ部でやったやつhellip
をちょっと詳しく説明しただけhellip
デス
続きましてhellip
メッセージ交換とマウス位置共有の設計
SockJSをSencha Ext JSのクラスシステムで ラッピングする
Sencha Cmdを利用してワークスペースを作成する
sencha -s ~LibrarySenchaext-4221144 generate app MyApp
SDKまでのパス
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJSクライアントに必要なリソース
sockjs-034minjs
httpcdnsockjsorgsockjs-034minjs
vertxbus-21js
vertx-21M2targzを解凍したディレクトリに格納されている
のでHTMLからアクセスできるところに配置する
vertx-21M2clientvertxbus-21js
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
これがさっきサーバーサイドで設定したprefixね
prefix eventbus
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
セキュリティ設定で指定したaddress
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
メッセージを受信したときのコールバック関数
実行するとこんな感じ
SockJSでWebSocket繋がったね
やったねっ
これ前回hellip html5j エンタープライズ部でやったやつhellip
をちょっと詳しく説明しただけhellip
デス
続きましてhellip
メッセージ交換とマウス位置共有の設計
SockJSをSencha Ext JSのクラスシステムで ラッピングする
Sencha Cmdを利用してワークスペースを作成する
sencha -s ~LibrarySenchaext-4221144 generate app MyApp
SDKまでのパス
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJSクライアントに必要なリソース
sockjs-034minjs
httpcdnsockjsorgsockjs-034minjs
vertxbus-21js
vertx-21M2targzを解凍したディレクトリに格納されている
のでHTMLからアクセスできるところに配置する
vertx-21M2clientvertxbus-21js
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
これがさっきサーバーサイドで設定したprefixね
prefix eventbus
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
セキュリティ設定で指定したaddress
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
メッセージを受信したときのコールバック関数
実行するとこんな感じ
SockJSでWebSocket繋がったね
やったねっ
これ前回hellip html5j エンタープライズ部でやったやつhellip
をちょっと詳しく説明しただけhellip
デス
続きましてhellip
メッセージ交換とマウス位置共有の設計
SockJSをSencha Ext JSのクラスシステムで ラッピングする
Sencha Cmdを利用してワークスペースを作成する
sencha -s ~LibrarySenchaext-4221144 generate app MyApp
SDKまでのパス
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJSクライアントに必要なリソース
sockjs-034minjs
httpcdnsockjsorgsockjs-034minjs
vertxbus-21js
vertx-21M2targzを解凍したディレクトリに格納されている
のでHTMLからアクセスできるところに配置する
vertx-21M2clientvertxbus-21js
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
これがさっきサーバーサイドで設定したprefixね
prefix eventbus
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
セキュリティ設定で指定したaddress
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
メッセージを受信したときのコールバック関数
実行するとこんな感じ
SockJSでWebSocket繋がったね
やったねっ
これ前回hellip html5j エンタープライズ部でやったやつhellip
をちょっと詳しく説明しただけhellip
デス
続きましてhellip
メッセージ交換とマウス位置共有の設計
SockJSをSencha Ext JSのクラスシステムで ラッピングする
Sencha Cmdを利用してワークスペースを作成する
sencha -s ~LibrarySenchaext-4221144 generate app MyApp
SDKまでのパス
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJSクライアントに必要なリソース
sockjs-034minjs
httpcdnsockjsorgsockjs-034minjs
vertxbus-21js
vertx-21M2targzを解凍したディレクトリに格納されている
のでHTMLからアクセスできるところに配置する
vertx-21M2clientvertxbus-21js
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
これがさっきサーバーサイドで設定したprefixね
prefix eventbus
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
セキュリティ設定で指定したaddress
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
メッセージを受信したときのコールバック関数
実行するとこんな感じ
SockJSでWebSocket繋がったね
やったねっ
これ前回hellip html5j エンタープライズ部でやったやつhellip
をちょっと詳しく説明しただけhellip
デス
続きましてhellip
メッセージ交換とマウス位置共有の設計
SockJSをSencha Ext JSのクラスシステムで ラッピングする
Sencha Cmdを利用してワークスペースを作成する
sencha -s ~LibrarySenchaext-4221144 generate app MyApp
SDKまでのパス
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
SockJS ClientのHTML作成
lthtmlgt ltheadgt ltscript src=httpcdnsockjsorgsockjs-034minjsgtltscriptgt ltscript src=vertxbus-21jsgtltscriptgt ltscript src=sockjs-appjsgtltscriptgt ltheadgt ltbodygt lth1gtSockJS Client without Sencha Ext JSlth1gt ltbutton onclick=ebSend()gtSend Messageltbuttongt ltbodygt lthtmlgt
SockJSクライアントに必要なリソース
sockjs-034minjs
httpcdnsockjsorgsockjs-034minjs
vertxbus-21js
vertx-21M2targzを解凍したディレクトリに格納されている
のでHTMLからアクセスできるところに配置する
vertx-21M2clientvertxbus-21js
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
これがさっきサーバーサイドで設定したprefixね
prefix eventbus
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
セキュリティ設定で指定したaddress
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
メッセージを受信したときのコールバック関数
実行するとこんな感じ
SockJSでWebSocket繋がったね
やったねっ
これ前回hellip html5j エンタープライズ部でやったやつhellip
をちょっと詳しく説明しただけhellip
デス
続きましてhellip
メッセージ交換とマウス位置共有の設計
SockJSをSencha Ext JSのクラスシステムで ラッピングする
Sencha Cmdを利用してワークスペースを作成する
sencha -s ~LibrarySenchaext-4221144 generate app MyApp
SDKまでのパス
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
SockJSクライアントに必要なリソース
sockjs-034minjs
httpcdnsockjsorgsockjs-034minjs
vertxbus-21js
vertx-21M2targzを解凍したディレクトリに格納されている
のでHTMLからアクセスできるところに配置する
vertx-21M2clientvertxbus-21js
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
これがさっきサーバーサイドで設定したprefixね
prefix eventbus
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
セキュリティ設定で指定したaddress
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
メッセージを受信したときのコールバック関数
実行するとこんな感じ
SockJSでWebSocket繋がったね
やったねっ
これ前回hellip html5j エンタープライズ部でやったやつhellip
をちょっと詳しく説明しただけhellip
デス
続きましてhellip
メッセージ交換とマウス位置共有の設計
SockJSをSencha Ext JSのクラスシステムで ラッピングする
Sencha Cmdを利用してワークスペースを作成する
sencha -s ~LibrarySenchaext-4221144 generate app MyApp
SDKまでのパス
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
これがさっきサーバーサイドで設定したprefixね
prefix eventbus
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
セキュリティ設定で指定したaddress
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
メッセージを受信したときのコールバック関数
実行するとこんな感じ
SockJSでWebSocket繋がったね
やったねっ
これ前回hellip html5j エンタープライズ部でやったやつhellip
をちょっと詳しく説明しただけhellip
デス
続きましてhellip
メッセージ交換とマウス位置共有の設計
SockJSをSencha Ext JSのクラスシステムで ラッピングする
Sencha Cmdを利用してワークスペースを作成する
sencha -s ~LibrarySenchaext-4221144 generate app MyApp
SDKまでのパス
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
これがさっきサーバーサイドで設定したprefixね
prefix eventbus
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
セキュリティ設定で指定したaddress
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
メッセージを受信したときのコールバック関数
実行するとこんな感じ
SockJSでWebSocket繋がったね
やったねっ
これ前回hellip html5j エンタープライズ部でやったやつhellip
をちょっと詳しく説明しただけhellip
デス
続きましてhellip
メッセージ交換とマウス位置共有の設計
SockJSをSencha Ext JSのクラスシステムで ラッピングする
Sencha Cmdを利用してワークスペースを作成する
sencha -s ~LibrarySenchaext-4221144 generate app MyApp
SDKまでのパス
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
SockJSアプリケーション作成 - sockjs-appjs
イベントバス生成 var eb = new vertxEventBus( http[VertxサーバーIP]8081eventbus )
これがさっきサーバーサイドで設定したprefixね
prefix eventbus
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
セキュリティ設定で指定したaddress
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
メッセージを受信したときのコールバック関数
実行するとこんな感じ
SockJSでWebSocket繋がったね
やったねっ
これ前回hellip html5j エンタープライズ部でやったやつhellip
をちょっと詳しく説明しただけhellip
デス
続きましてhellip
メッセージ交換とマウス位置共有の設計
SockJSをSencha Ext JSのクラスシステムで ラッピングする
Sencha Cmdを利用してワークスペースを作成する
sencha -s ~LibrarySenchaext-4221144 generate app MyApp
SDKまでのパス
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
セキュリティ設定で指定したaddress
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
メッセージを受信したときのコールバック関数
実行するとこんな感じ
SockJSでWebSocket繋がったね
やったねっ
これ前回hellip html5j エンタープライズ部でやったやつhellip
をちょっと詳しく説明しただけhellip
デス
続きましてhellip
メッセージ交換とマウス位置共有の設計
SockJSをSencha Ext JSのクラスシステムで ラッピングする
Sencha Cmdを利用してワークスペースを作成する
sencha -s ~LibrarySenchaext-4221144 generate app MyApp
SDKまでのパス
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
セキュリティ設定で指定したaddress
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
メッセージを受信したときのコールバック関数
実行するとこんな感じ
SockJSでWebSocket繋がったね
やったねっ
これ前回hellip html5j エンタープライズ部でやったやつhellip
をちょっと詳しく説明しただけhellip
デス
続きましてhellip
メッセージ交換とマウス位置共有の設計
SockJSをSencha Ext JSのクラスシステムで ラッピングする
Sencha Cmdを利用してワークスペースを作成する
sencha -s ~LibrarySenchaext-4221144 generate app MyApp
SDKまでのパス
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
セキュリティ設定で指定したaddress
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
メッセージを受信したときのコールバック関数
実行するとこんな感じ
SockJSでWebSocket繋がったね
やったねっ
これ前回hellip html5j エンタープライズ部でやったやつhellip
をちょっと詳しく説明しただけhellip
デス
続きましてhellip
メッセージ交換とマウス位置共有の設計
SockJSをSencha Ext JSのクラスシステムで ラッピングする
Sencha Cmdを利用してワークスペースを作成する
sencha -s ~LibrarySenchaext-4221144 generate app MyApp
SDKまでのパス
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
セキュリティ設定で指定したaddress
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
メッセージを受信したときのコールバック関数
実行するとこんな感じ
SockJSでWebSocket繋がったね
やったねっ
これ前回hellip html5j エンタープライズ部でやったやつhellip
をちょっと詳しく説明しただけhellip
デス
続きましてhellip
メッセージ交換とマウス位置共有の設計
SockJSをSencha Ext JSのクラスシステムで ラッピングする
Sencha Cmdを利用してワークスペースを作成する
sencha -s ~LibrarySenchaext-4221144 generate app MyApp
SDKまでのパス
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
SockJSアプリケーション作成 - sockjs-appjs
openイベントハンドラ ebonopen = function() consolelog(open) ebregisterHandler( demoorderMgr function(message) consolelog( received a message + JSONstringify(message) ) )
メッセージを受信したときのコールバック関数
実行するとこんな感じ
SockJSでWebSocket繋がったね
やったねっ
これ前回hellip html5j エンタープライズ部でやったやつhellip
をちょっと詳しく説明しただけhellip
デス
続きましてhellip
メッセージ交換とマウス位置共有の設計
SockJSをSencha Ext JSのクラスシステムで ラッピングする
Sencha Cmdを利用してワークスペースを作成する
sencha -s ~LibrarySenchaext-4221144 generate app MyApp
SDKまでのパス
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
実行するとこんな感じ
SockJSでWebSocket繋がったね
やったねっ
これ前回hellip html5j エンタープライズ部でやったやつhellip
をちょっと詳しく説明しただけhellip
デス
続きましてhellip
メッセージ交換とマウス位置共有の設計
SockJSをSencha Ext JSのクラスシステムで ラッピングする
Sencha Cmdを利用してワークスペースを作成する
sencha -s ~LibrarySenchaext-4221144 generate app MyApp
SDKまでのパス
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
SockJSでWebSocket繋がったね
やったねっ
これ前回hellip html5j エンタープライズ部でやったやつhellip
をちょっと詳しく説明しただけhellip
デス
続きましてhellip
メッセージ交換とマウス位置共有の設計
SockJSをSencha Ext JSのクラスシステムで ラッピングする
Sencha Cmdを利用してワークスペースを作成する
sencha -s ~LibrarySenchaext-4221144 generate app MyApp
SDKまでのパス
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
やったねっ
これ前回hellip html5j エンタープライズ部でやったやつhellip
をちょっと詳しく説明しただけhellip
デス
続きましてhellip
メッセージ交換とマウス位置共有の設計
SockJSをSencha Ext JSのクラスシステムで ラッピングする
Sencha Cmdを利用してワークスペースを作成する
sencha -s ~LibrarySenchaext-4221144 generate app MyApp
SDKまでのパス
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
これ前回hellip html5j エンタープライズ部でやったやつhellip
をちょっと詳しく説明しただけhellip
デス
続きましてhellip
メッセージ交換とマウス位置共有の設計
SockJSをSencha Ext JSのクラスシステムで ラッピングする
Sencha Cmdを利用してワークスペースを作成する
sencha -s ~LibrarySenchaext-4221144 generate app MyApp
SDKまでのパス
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
をちょっと詳しく説明しただけhellip
デス
続きましてhellip
メッセージ交換とマウス位置共有の設計
SockJSをSencha Ext JSのクラスシステムで ラッピングする
Sencha Cmdを利用してワークスペースを作成する
sencha -s ~LibrarySenchaext-4221144 generate app MyApp
SDKまでのパス
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
デス
続きましてhellip
メッセージ交換とマウス位置共有の設計
SockJSをSencha Ext JSのクラスシステムで ラッピングする
Sencha Cmdを利用してワークスペースを作成する
sencha -s ~LibrarySenchaext-4221144 generate app MyApp
SDKまでのパス
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
続きましてhellip
メッセージ交換とマウス位置共有の設計
SockJSをSencha Ext JSのクラスシステムで ラッピングする
Sencha Cmdを利用してワークスペースを作成する
sencha -s ~LibrarySenchaext-4221144 generate app MyApp
SDKまでのパス
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
メッセージ交換とマウス位置共有の設計
SockJSをSencha Ext JSのクラスシステムで ラッピングする
Sencha Cmdを利用してワークスペースを作成する
sencha -s ~LibrarySenchaext-4221144 generate app MyApp
SDKまでのパス
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
Sencha Cmdを利用してワークスペースを作成する
sencha -s ~LibrarySenchaext-4221144 generate app MyApp
SDKまでのパス
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
Sencha Cmdを利用してワークスペースを作成する
チンッ
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ext-sockjsを作る
SockJSをラッピングしてSencha Ext JSのクラスシステムとして 利用できるようにする
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
EventBus A
Controller B
EventBus B
EventBus C
Controller C
Controller A
Component A
Component B
Manager
ext-sockjsを作る
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ext-sockjsを作る
大体こんな感じのSencha Ext JSでは 普通のExtAbstractManagerを継承したクラス構成
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ext-sockjsを作る
というのも粗いのでソースを見ていきましょうhellip
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ext-sockjsを作る
ExtsockjsManager
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsManager
Extdefine(ExtsockjsManager extend ExtAbstractManager requires [ ExtutilMixedCollection ExtsockjsEventBus ] mixins observable ExtutilObservable singleton true
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsManager
constructor function() var me = this meeventbuses = new ExtutilMixedCollection() memixinsobservableconstructorcall(me)
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsManager
addEventBus function(config) var me = this config = config || ExtapplyIf(config url addr ) meeventbusesadd( configaddr Extcreate(ExtsockjsEventBus config) )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsManager
get function(name) var me = this return meeventbusesget(name) function() ExtSockJS = ExtsockjsManager )
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ext-sockjsを作る
Managerはできたので次は管理される側をhellip
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ext-sockjsを作る
ExtsockjsEventBus
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsEventBus
Extdefine(ExtsockjsEventBus mixins observable ExtutilObservable
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsEventBus
constructor function(config) var me = this Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsEventBus
onClosefunction() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
メッセージのやりとりをする
最初に解説した素のSockJSサンプルと同じ事をSencha Ext JS上で作ったクラスを使ってやってみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
サンプルコード
thiscontrol( button[action=publish] click function() ebpublish(testdata) )
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
デモ
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
共有オブジェクト（仮）
メッセージのやりとりができたので 今度はExtwindowWindowを表示して 複数のブラウザで位置やサイズを共有してみましょう
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) win lock = false
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
サンプルコード
thiscontrol( button[action=createwindow] click function() win = Extwidget(window itemId hoge autoShow true width 300 height 200 )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
サンプルコード
winon( move function(win x y) lock = true ebpublish( x x y y ) resize function(win width height) lock = true ebpublish( width width height height ) ) )
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有（共有オ
ブジェクト）やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
ご清聴ありがとうございました