using sockjs(websocket) with sencha ext js
TRANSCRIPT
![Page 1: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/1.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 2: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/2.jpg)
本日のアジェンダ
自己紹介
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 3: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/3.jpg)
自己紹介
こつつみ かずひろ
小堤 一弘 株式会社ゼノフィ 代表取締役 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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 4: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/4.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 5: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/5.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 6: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/6.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 7: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/7.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 8: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/8.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 9: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/9.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 10: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/10.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 11: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/11.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 12: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/12.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 13: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/13.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 14: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/14.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 15: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/15.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 16: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/16.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 17: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/17.jpg)
無事起動
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 18: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/18.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 19: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/19.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 20: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/20.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 21: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/21.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 22: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/22.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 23: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/23.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 24: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/24.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 25: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/25.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 26: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/26.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 27: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/27.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 28: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/28.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 29: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/29.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 30: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/30.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 31: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/31.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 32: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/32.jpg)
実行するとこんな感じ
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 33: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/33.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 34: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/34.jpg)
やったねっ
これ前回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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 35: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/35.jpg)
これ前回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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 36: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/36.jpg)
をちょっと詳しく説明しただけ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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 37: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/37.jpg)
デス
続きまして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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 38: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/38.jpg)
続きまして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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 39: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/39.jpg)
メッセージ交換とマウス位置共有の設計
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 40: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/40.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 41: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/41.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 42: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/42.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 43: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/43.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 44: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/44.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 45: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/45.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 46: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/46.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 47: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/47.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 48: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/48.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 49: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/49.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 50: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/50.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 51: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/51.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 52: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/52.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 53: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/53.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 54: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/54.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 55: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/55.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 56: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/56.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 57: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/57.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 58: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/58.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 59: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/59.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 60: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/60.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 61: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/61.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 62: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/62.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 63: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/63.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 64: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/64.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 65: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/65.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 66: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/66.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 67: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/67.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 68: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/68.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 69: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/69.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 70: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/70.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 71: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/71.jpg)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) 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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 72: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/72.jpg)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) 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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 73: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/73.jpg)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) 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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 74: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/74.jpg)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) 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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 75: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/75.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 76: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/76.jpg)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 77: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/77.jpg)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 78: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/78.jpg)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(null eventbus-) conn new vertxEventBus(configurl) ) Extapply(meconn onopen ExtFunctionpass(meonOpen [] me) onmessage ExtFunctionpass(meonMessage [] me) onclose ExtFunctionpass(meonClose [] me) ) memixinsobservableconstructorcall(me config)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 79: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/79.jpg)
ExtsockjsEventBus
constructor function(config) var me = this conn Extapply(me config) ExtapplyIf(me id Extid(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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 80: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/80.jpg)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 81: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/81.jpg)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 82: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/82.jpg)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 83: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/83.jpg)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 84: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/84.jpg)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 85: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/85.jpg)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 86: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/86.jpg)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 87: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/87.jpg)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(meonReceive [] me)) onReceive function(message) var me = this mefireEvent(receive message) onMessage function(e) var me = this mefireEvent(message e) consolelog(message edata)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 88: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/88.jpg)
ExtsockjsEventBus
onOpen function(eventbus) var me = this mefireEvent(open) meconnregisterHandler(meaddr ExtFunctionpass(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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 89: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/89.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 90: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/90.jpg)
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var 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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 91: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/91.jpg)
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var me = this meconnpublish(meaddr o) )
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var 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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 92: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/92.jpg)
ExtsockjsEventBus
onClose function() var me = this mefireEvent(close) consolelog(close) publish function(o) var 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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 93: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/93.jpg)
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 94: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/94.jpg)
メッセージのやりとりをする
最初に解説した素の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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 95: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/95.jpg)
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr) ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 96: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/96.jpg)
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 97: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/97.jpg)
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 98: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/98.jpg)
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 99: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/99.jpg)
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 100: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/100.jpg)
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 101: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/101.jpg)
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(addr)
ebon(receive function(o) consolelog(o) )
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 102: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/102.jpg)
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr demoorderMgr )
var addr = demoorderMgr eb = ExtSockJSget(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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 103: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/103.jpg)
サンプルコード
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 104: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/104.jpg)
サンプルコード
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 105: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/105.jpg)
サンプルコード
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 106: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/106.jpg)
サンプルコード
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 107: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/107.jpg)
サンプルコード
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 108: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/108.jpg)
サンプルコード
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 109: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/109.jpg)
デモ
共有オブジェクト(仮)
メッセージのやりとりができたので 今度は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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 110: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/110.jpg)
共有オブジェクト(仮)
メッセージのやりとりができたので 今度は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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 111: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/111.jpg)
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr 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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 112: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/112.jpg)
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr 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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 113: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/113.jpg)
サンプルコード
ExtSockJSaddEventBus( url httpxxxxxxxxxxxx8081eventbus addr 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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 114: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/114.jpg)
サンプルコード
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 115: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/115.jpg)
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 116: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/116.jpg)
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 117: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/117.jpg)
サンプルコード
ebon(receive function(o) if(lock) winsuspendEvents(false) if(ox || oy) winsetPosition(ox oy) else if(owidth || oheight) winsetSize(owidth oheight) winresumeEvents() lock = false )
サンプルコード
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 118: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/118.jpg)
サンプルコード
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 119: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/119.jpg)
サンプルコード
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 120: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/120.jpg)
サンプルコード
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 121: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/121.jpg)
サンプルコード
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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 122: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/122.jpg)
サンプルコード
winon( 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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 123: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/123.jpg)
サンプルコード
winon( 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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 124: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/124.jpg)
サンプルコード
winon( 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 まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 125: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/125.jpg)
デモ
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有(共有オ
ブジェクト)やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 126: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/126.jpg)
まとめ
SockJSのクライアントライブラリとEventBusをラッピングして
しまえばSencha クラスシステム上で違和感なく利用できる
メッセージングで処理する内容をコンポーネントの共有(共有オ
ブジェクト)やデータストアなどSencha クラスシステム上の構
造に乗せていくとよりリアルタイムにおもしろいアプリケーショ
ンが作れそう
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 127: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/127.jpg)
まとめ
インフラは前回html5j エンタープライズ部で話したvertxでス
ケールもできてEventBusに乗せとけばあまり細かいこと考えなく
ても良さそう
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 128: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/128.jpg)
素のWebSocket使ってやるより良くない
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 129: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/129.jpg)
使う技術に翻弄されず やりたいことを迅速に実現しよう
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 130: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/130.jpg)
今日紹介したソースコードはGitHubにて公開してあります
httpsgithubcomxenophyext-sockjs
がまだまだSencha Ext JSクラスっぽく無いので鋭意作成中hellip
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 131: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/131.jpg)
Sencha フレームワーク times SockJS まだまだ可能性がありそうだねっ
ご清聴ありがとうございました
![Page 132: Using SockJS(Websocket) with Sencha Ext JS](https://reader038.vdocuments.mx/reader038/viewer/2022102513/554f6d65b4c9058a148b5050/html5/thumbnails/132.jpg)
ご清聴ありがとうございました