Using SockJS(Websocket) with Sencha Ext JS
Upcoming SlideShare
Loading in...5
×
 

Using SockJS(Websocket) with Sencha Ext JS

on

  • 1,061 views

 

Statistics

Views

Total Views
1,061
Views on SlideShare
1,049
Embed Views
12

Actions

Likes
4
Downloads
6
Comments
0

2 Embeds 12

https://twitter.com 11
https://www.google.co.uk 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Using SockJS(Websocket) with Sencha Ext JS Using SockJS(Websocket) with Sencha Ext JS Presentation Transcript

  • Using SockJS(Websocket) with Sencha Ext JS Sencha Ext JS上のWebSocket実装の形 小堤 一弘 株式会社ゼノフィ Xenophy.CO.,LTD
  • 本日のアジェンダ 自己紹介 SockJSをSencha Ext JSで使うための準備 メッセージ交換と、マウス位置共有の設計 デモ まとめ
  • 自己紹介 こつつみ   かずひろ 小堤 一弘 株式会社ゼノフィ 代表取締役 Sencha 公式トレーニング認定トレーナー Japan Sencha User Group 主宰 html5jエンタープライズ部 ! Twitter @kotsutsumi ! Facebook https://www.facebook.com/kotsutsumi 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通信を するための準備をする。
  • Vert.x + SockJS Serverの環境構築について 昨日、 html5jエンタープライズ部 で、紹介させてもらった、 SPA のための Web サーバ構築ノウハウ を参照してください。 http://www.slideshare.net/kotsutsumi/spa-web
  • SockJS Serverの作成 // Vert.x読み込み var vertx = require('vertx'); ! // HTTPサーバー生成 var server = vertx.createHttpServer(); ! // SockJSサーバー生成 var sockJSServer = vertx.createSockJSServer(server);
  • SockJS Serverの作成 // Vert.x読み込み var vertx = require('vertx'); ! // HTTPサーバー生成 var server = vertx.createHttpServer(); ! // SockJSサーバー生成 var sockJSServer = vertx.createSockJSServer(server);
  • SockJS Serverの作成 // Vert.x読み込み var vertx = require('vertx'); ! // HTTPサーバー生成 var server = vertx.createHttpServer(); ! // SockJSサーバー生成 var sockJSServer = vertx.createSockJSServer(server);
  • SockJS Serverの作成 // Vert.x読み込み var vertx = require('vertx'); ! // HTTPサーバー生成 var server = vertx.createHttpServer(); ! // SockJSサーバー生成 var sockJSServer = vertx.createSockJSServer(server);
  • SockJS Serverの作成 // ブリッジ設定 sockJSServer.bridge( ! // コンフィグ {prefix : ‘/eventbus’}, ); // セキュリティ設定 [{address : ‘demo.orderMgr'}], [{address : ‘demo.orderMgr'}]
  • SockJS Serverの作成 // ブリッジ設定 sockJSServer.bridge( ! // コンフィグ {prefix : ‘/eventbus’}, ); // セキュリティ設定 [{address : ‘demo.orderMgr'}], [{address : ‘demo.orderMgr'}]
  • SockJS Serverの作成 // ブリッジ設定 sockJSServer.bridge( ! // コンフィグ {prefix : ‘/eventbus’}, ); // セキュリティ設定 [{address : ‘demo.orderMgr'}], [{address : ‘demo.orderMgr'}]
  • SockJS Serverの作成 // ブリッジ設定 sockJSServer.bridge( ! // コンフィグ {prefix : ‘/eventbus’}, ); // セキュリティ設定 [{address : ‘demo.orderMgr'}], [{address : ‘demo.orderMgr'}]
  • SockJS Serverの作成 // ブリッジ設定 sockJSServer.bridge( ! // コンフィグ {prefix : ‘/eventbus’}, // セキュリティ設定 [{address : ‘demo.orderMgr'}], [{address : ‘demo.orderMgr'}] ); ブリッジはデフォルトのすべてを拒否するポリシーを 持つファイアウォールの一種のように動作します。
  • SockJS Serverの作成 // リスン server.listen(8081);
  • SockJS Serverの起動 vertx run extjs-sockjs.js クラスター起動する場合は、後ろに-clusterをつける
  • 無事、起動!!
  • SockJS ClientのHTML作成 <html> <head> <script src="http://cdn.sockjs.org/sockjs-0.3.4.min.js"></script> <script src="vertxbus-2.1.js"></script> <script src="sockjs-app.js"></script> </head> <body> <h1>SockJS Client without Sencha Ext JS</h1> <button onclick="ebSend();">Send Message</button> </body> </html>
  • SockJS ClientのHTML作成 <html> <head> <script src="http://cdn.sockjs.org/sockjs-0.3.4.min.js"></script> <script src="vertxbus-2.1.js"></script> <script src="sockjs-app.js"></script> </head> <body> <h1>SockJS Client without Sencha Ext JS</h1> <button onclick="ebSend();">Send Message</button> </body> </html>
  • SockJS ClientのHTML作成 <html> <head> <script src="http://cdn.sockjs.org/sockjs-0.3.4.min.js"></script> <script src="vertxbus-2.1.js"></script> <script src="sockjs-app.js"></script> </head> <body> <h1>SockJS Client without Sencha Ext JS</h1> <button onclick="ebSend();">Send Message</button> </body> </html>
  • SockJS ClientのHTML作成 <html> <head> <script src="http://cdn.sockjs.org/sockjs-0.3.4.min.js"></script> <script src="vertxbus-2.1.js"></script> <script src="sockjs-app.js"></script> </head> <body> <h1>SockJS Client without Sencha Ext JS</h1> <button onclick="ebSend();">Send Message</button> </body> </html>
  • SockJS ClientのHTML作成 <html> <head> <script src="http://cdn.sockjs.org/sockjs-0.3.4.min.js"></script> <script src="vertxbus-2.1.js"></script> <script src="sockjs-app.js"></script> </head> <body> <h1>SockJS Client without Sencha Ext JS</h1> <button onclick="ebSend();">Send Message</button> </body> </html>
  • SockJSクライアントに必要なリソース sockjs-0.3.4.min.js http://cdn.sockjs.org/sockjs-0.3.4.min.js vertxbus-2.1.js vert.x-2.1M2.tar.gzを解凍したディレクトリに格納されている ので、HTMLからアクセスできるところに配置する。 vert.x-2.1M2/client/vertxbus-2.1.js
  • SockJSアプリケーション作成 - sockjs-app.js // イベントバス生成 var eb = new vertx.EventBus( 'http://[Vert.xサーバーIP]:8081/eventbus' );
  • SockJSアプリケーション作成 - sockjs-app.js // イベントバス生成 var eb = new vertx.EventBus( 'http://[Vert.xサーバーIP]:8081/eventbus' );
  • SockJSアプリケーション作成 - sockjs-app.js // イベントバス生成 var eb = new vertx.EventBus( 'http://[Vert.xサーバーIP]:8081/eventbus' ); これが、さっきサーバーサイドで設定したprefixね!
 ! {prefix : '/eventbus'}
  • SockJSアプリケーション作成 - sockjs-app.js // openイベントハンドラ eb.onopen = function() { console.log('open'); eb.registerHandler( 'demo.orderMgr', function(message) { console.log( 'received a message: ' + JSON.stringify(message) ); } ); }
  • SockJSアプリケーション作成 - sockjs-app.js // openイベントハンドラ eb.onopen = function() { console.log('open'); eb.registerHandler( 'demo.orderMgr', function(message) { console.log( 'received a message: ' + JSON.stringify(message) ); } ); }
  • SockJSアプリケーション作成 - sockjs-app.js // openイベントハンドラ eb.onopen = function() { console.log('open'); eb.registerHandler( 'demo.orderMgr', function(message) { console.log( 'received a message: ' + JSON.stringify(message) ); } ); }
  • SockJSアプリケーション作成 - sockjs-app.js // openイベントハンドラ eb.onopen = function() { console.log('open'); eb.registerHandler( 'demo.orderMgr', セキュリティ設定で指定したaddress function(message) { console.log( 'received a message: ' + JSON.stringify(message) ); } ); }
  • SockJSアプリケーション作成 - sockjs-app.js // openイベントハンドラ eb.onopen = function() { console.log('open'); eb.registerHandler( 'demo.orderMgr', function(message) { メッセージを受信したときのコールバック関数 console.log( 'received a message: ' + JSON.stringify(message) ); } ); }
  • 実行すると、こんな感じ
  • SockJSで、WebSocket繋がったね!
  • やったねっ!
  • これ前回… html5j エンタープライズ部でやったやつ…
  • を、ちょっと詳しく説明しただけ…
  • デス!!
  • 続きまして…
  • メッセージ交換と、マウス位置共有の設計 SockJSをSencha Ext JSのクラスシステムで ラッピングする
  • Sencha Cmdを利用してワークスペースを作成する SDKまでのパス sencha -s ~/Library/Sencha/ext-4.2.2.1144 generate app MyApp ./
  • Sencha Cmdを利用してワークスペースを作成する チンッ!!
  • ext-sockjsを作る SockJSをラッピングして、Sencha Ext JSのクラスシステムとして 利用できるようにする。
  • ext-sockjsを作る Controller A EventBus A Controller B Controller C Component A Component B Manager EventBus B EventBus C
  • ext-sockjsを作る 大体こんな感じの、Sencha Ext JSでは、 普通のExt.AbstractManagerを継承したクラス構成
  • ext-sockjsを作る というのも、粗いので、ソースを見ていきましょう…
  • ext-sockjsを作る Ext.sockjs.Manager
  • Ext.sockjs.Manager Ext.define('Ext.sockjs.Manager', { extend: 'Ext.AbstractManager', requires: [ 'Ext.util.MixedCollection', 'Ext.sockjs.EventBus' ], mixins: { observable: 'Ext.util.Observable' }, singleton: true,
  • Ext.sockjs.Manager Ext.define('Ext.sockjs.Manager', { extend: 'Ext.AbstractManager', requires: [ 'Ext.util.MixedCollection', 'Ext.sockjs.EventBus' ], mixins: { observable: 'Ext.util.Observable' }, singleton: true,
  • Ext.sockjs.Manager Ext.define('Ext.sockjs.Manager', { extend: 'Ext.AbstractManager', requires: [ 'Ext.util.MixedCollection', 'Ext.sockjs.EventBus' ], mixins: { observable: 'Ext.util.Observable' }, singleton: true,
  • Ext.sockjs.Manager Ext.define('Ext.sockjs.Manager', { extend: 'Ext.AbstractManager', requires: [ 'Ext.util.MixedCollection', 'Ext.sockjs.EventBus' ], mixins: { observable: 'Ext.util.Observable' }, singleton: true,
  • Ext.sockjs.Manager Ext.define('Ext.sockjs.Manager', { extend: 'Ext.AbstractManager', requires: [ 'Ext.util.MixedCollection', 'Ext.sockjs.EventBus' ], mixins: { observable: 'Ext.util.Observable' }, singleton: true,
  • Ext.sockjs.Manager Ext.define('Ext.sockjs.Manager', { extend: 'Ext.AbstractManager', requires: [ 'Ext.util.MixedCollection', 'Ext.sockjs.EventBus' ], mixins: { observable: 'Ext.util.Observable' }, singleton: true,
  • Ext.sockjs.Manager constructor: function() { var me = this; me.eventbuses = new Ext.util.MixedCollection(); me.mixins.observable.constructor.call(me); },
  • Ext.sockjs.Manager constructor: function() { var me = this; me.eventbuses = new Ext.util.MixedCollection(); me.mixins.observable.constructor.call(me); },
  • Ext.sockjs.Manager constructor: function() { var me = this; me.eventbuses = new Ext.util.MixedCollection(); me.mixins.observable.constructor.call(me); },
  • Ext.sockjs.Manager constructor: function() { var me = this; me.eventbuses = new Ext.util.MixedCollection(); me.mixins.observable.constructor.call(me); },
  • Ext.sockjs.Manager addEventBus: function(config) { var me = this; config = config || {}; Ext.applyIf(config, { url: '', addr: '' }); me.eventbuses.add( config.addr, Ext.create('Ext.sockjs.EventBus', config) ); },
  • Ext.sockjs.Manager addEventBus: function(config) { var me = this; config = config || {}; Ext.applyIf(config, { url: '', addr: '' }); me.eventbuses.add( config.addr, Ext.create('Ext.sockjs.EventBus', config) ); },
  • Ext.sockjs.Manager addEventBus: function(config) { var me = this; config = config || {}; Ext.applyIf(config, { url: '', addr: '' }); me.eventbuses.add( config.addr, Ext.create('Ext.sockjs.EventBus', config) ); },
  • Ext.sockjs.Manager addEventBus: function(config) { var me = this; config = config || {}; Ext.applyIf(config, { url: '', addr: '' }); me.eventbuses.add( config.addr, Ext.create('Ext.sockjs.EventBus', config) ); },
  • Ext.sockjs.Manager addEventBus: function(config) { var me = this; config = config || {}; Ext.applyIf(config, { url: '', addr: '' }); me.eventbuses.add( config.addr, Ext.create('Ext.sockjs.EventBus', config) ); },
  • Ext.sockjs.Manager get: function(name) { var me = this; return me.eventbuses.get(name); } }, function() { Ext.SockJS = Ext.sockjs.Manager; });
  • Ext.sockjs.Manager get: function(name) { var me = this; return me.eventbuses.get(name); } }, function() { Ext.SockJS = Ext.sockjs.Manager; });
  • Ext.sockjs.Manager get: function(name) { var me = this; return me.eventbuses.get(name); } }, function() { Ext.SockJS = Ext.sockjs.Manager; });
  • Ext.sockjs.Manager get: function(name) { var me = this; return me.eventbuses.get(name); } }, function() { Ext.SockJS = Ext.sockjs.Manager; });
  • ext-sockjsを作る Managerはできたので、次は管理される側を…
  • ext-sockjsを作る Ext.sockjs.EventBus
  • Ext.sockjs.EventBus Ext.define('Ext.sockjs.EventBus', { mixins: { observable: 'Ext.util.Observable' },
  • Ext.sockjs.EventBus Ext.define('Ext.sockjs.EventBus', { mixins: { observable: 'Ext.util.Observable' },
  • Ext.sockjs.EventBus Ext.define('Ext.sockjs.EventBus', { mixins: { observable: 'Ext.util.Observable' },
  • Ext.sockjs.EventBus constructor: function(config) { var me = this, conn; Ext.apply(me, config); Ext.applyIf(me, { id : Ext.id(null, 'eventbus-'), conn : new vertx.EventBus(config.url) }); Ext.apply(me.conn, { onopen : Ext.Function.pass(me.onOpen, [], me), onmessage : Ext.Function.pass(me.onMessage, [], me), onclose : Ext.Function.pass(me.onClose, [], me) }); me.mixins.observable.constructor.call(me, config); },
  • Ext.sockjs.EventBus constructor: function(config) { var me = this, conn; Ext.apply(me, config); Ext.applyIf(me, { id : Ext.id(null, 'eventbus-'), conn : new vertx.EventBus(config.url) }); Ext.apply(me.conn, { onopen : Ext.Function.pass(me.onOpen, [], me), onmessage : Ext.Function.pass(me.onMessage, [], me), onclose : Ext.Function.pass(me.onClose, [], me) }); me.mixins.observable.constructor.call(me, config); },
  • Ext.sockjs.EventBus constructor: function(config) { var me = this, conn; Ext.apply(me, config); Ext.applyIf(me, { id : Ext.id(null, 'eventbus-'), conn : new vertx.EventBus(config.url) }); Ext.apply(me.conn, { onopen : Ext.Function.pass(me.onOpen, [], me), onmessage : Ext.Function.pass(me.onMessage, [], me), onclose : Ext.Function.pass(me.onClose, [], me) }); me.mixins.observable.constructor.call(me, config); },
  • Ext.sockjs.EventBus constructor: function(config) { var me = this, conn; Ext.apply(me, config); Ext.applyIf(me, { id : Ext.id(null, 'eventbus-'), conn : new vertx.EventBus(config.url) }); Ext.apply(me.conn, { onopen : Ext.Function.pass(me.onOpen, [], me), onmessage : Ext.Function.pass(me.onMessage, [], me), onclose : Ext.Function.pass(me.onClose, [], me) }); me.mixins.observable.constructor.call(me, config); },
  • Ext.sockjs.EventBus constructor: function(config) { var me = this; Ext.apply(me, config); Ext.applyIf(me, { id : Ext.id(null, 'eventbus-'), conn : new vertx.EventBus(config.url) }); Ext.apply(me.conn, { onopen : Ext.Function.pass(me.onOpen, [], me), onmessage : Ext.Function.pass(me.onMessage, [], me), onclose : Ext.Function.pass(me.onClose, [], me) }); me.mixins.observable.constructor.call(me, config); },
  • Ext.sockjs.EventBus constructor: function(config) { var me = this, conn; Ext.apply(me, config); Ext.applyIf(me, { id : Ext.id(null, 'eventbus-'), conn : new vertx.EventBus(config.url) }); Ext.apply(me.conn, { onopen : Ext.Function.pass(me.onOpen, [], me), onmessage : Ext.Function.pass(me.onMessage, [], me), onclose : Ext.Function.pass(me.onClose, [], me) }); me.mixins.observable.constructor.call(me, config); },
  • Ext.sockjs.EventBus constructor: function(config) { var me = this, conn; Ext.apply(me, config); Ext.applyIf(me, { id : Ext.id(null, 'eventbus-'), conn : new vertx.EventBus(config.url) }); Ext.apply(me.conn, { onopen : Ext.Function.pass(me.onOpen, [], me), onmessage : Ext.Function.pass(me.onMessage, [], me), onclose : Ext.Function.pass(me.onClose, [], me) }); me.mixins.observable.constructor.call(me, config); },
  • Ext.sockjs.EventBus constructor: function(config) { var me = this, conn; Ext.apply(me, config); Ext.applyIf(me, { id : Ext.id(null, 'eventbus-'), conn : new vertx.EventBus(config.url) }); Ext.apply(me.conn, { onopen : Ext.Function.pass(me.onOpen, [], me), onmessage : Ext.Function.pass(me.onMessage, [], me), onclose : Ext.Function.pass(me.onClose, [], me) }); me.mixins.observable.constructor.call(me, config); },
  • Ext.sockjs.EventBus constructor: function(config) { var me = this, conn; Ext.apply(me, config); Ext.applyIf(me, { id : Ext.id(null, 'eventbus-'), conn : new vertx.EventBus(config.url) }); Ext.apply(me.conn, { onopen : Ext.Function.pass(me.onOpen, [], me), onmessage : Ext.Function.pass(me.onMessage, [], me), onclose : Ext.Function.pass(me.onClose, [], me) }); me.mixins.observable.constructor.call(me, config); },
  • Ext.sockjs.EventBus onOpen: function(eventbus) { var me = this; me.fireEvent('open'); me.conn.registerHandler(me.addr, Ext.Function.pass(me.onReceive, [], me)); }, onReceive: function(message) { var me = this; me.fireEvent('receive', message); }, onMessage: function(e) { var me = this; me.fireEvent('message', e); console.log('message', e.data); },
  • Ext.sockjs.EventBus onOpen: function(eventbus) { var me = this; me.fireEvent('open'); me.conn.registerHandler(me.addr, Ext.Function.pass(me.onReceive, [], me)); }, onReceive: function(message) { var me = this; me.fireEvent('receive', message); }, onMessage: function(e) { var me = this; me.fireEvent('message', e); console.log('message', e.data); },
  • Ext.sockjs.EventBus onOpen: function(eventbus) { var me = this; me.fireEvent('open'); me.conn.registerHandler(me.addr, Ext.Function.pass(me.onReceive, [], me)); }, onReceive: function(message) { var me = this; me.fireEvent('receive', message); }, onMessage: function(e) { var me = this; me.fireEvent('message', e); console.log('message', e.data); },
  • Ext.sockjs.EventBus onOpen: function(eventbus) { var me = this; me.fireEvent('open'); me.conn.registerHandler(me.addr, Ext.Function.pass(me.onReceive, [], me)); }, onReceive: function(message) { var me = this; me.fireEvent('receive', message); }, onMessage: function(e) { var me = this; me.fireEvent('message', e); console.log('message', e.data); },
  • Ext.sockjs.EventBus onOpen: function(eventbus) { var me = this; me.fireEvent('open'); me.conn.registerHandler(me.addr, Ext.Function.pass(me.onReceive, [], me)); }, onReceive: function(message) { var me = this; me.fireEvent('receive', message); }, onMessage: function(e) { var me = this; me.fireEvent('message', e); console.log('message', e.data); },
  • Ext.sockjs.EventBus onOpen: function(eventbus) { var me = this; me.fireEvent('open'); me.conn.registerHandler(me.addr, Ext.Function.pass(me.onReceive, [], me)); }, onReceive: function(message) { var me = this; me.fireEvent('receive', message); }, onMessage: function(e) { var me = this; me.fireEvent('message', e); console.log('message', e.data); },
  • Ext.sockjs.EventBus onOpen: function(eventbus) { var me = this; me.fireEvent('open'); me.conn.registerHandler(me.addr, Ext.Function.pass(me.onReceive, [], me)); }, onReceive: function(message) { var me = this; me.fireEvent('receive', message); }, onMessage: function(e) { var me = this; me.fireEvent('message', e); console.log('message', e.data); },
  • Ext.sockjs.EventBus onOpen: function(eventbus) { var me = this; me.fireEvent('open'); me.conn.registerHandler(me.addr, Ext.Function.pass(me.onReceive, [], me)); }, onReceive: function(message) { var me = this; me.fireEvent('receive', message); }, onMessage: function(e) { var me = this; me.fireEvent('message', e); console.log('message', e.data); },
  • Ext.sockjs.EventBus onOpen: function(eventbus) { var me = this; me.fireEvent('open'); me.conn.registerHandler(me.addr, Ext.Function.pass(me.onReceive, [], me)); }, onReceive: function(message) { var me = this; me.fireEvent('receive', message); }, onMessage: function(e) { var me = this; me.fireEvent('message', e); console.log('message', e.data); },
  • Ext.sockjs.EventBus onClose:function() { var me = this; me.fireEvent('close'); console.log('close'); }, publish: function(o) { var me = this; me.conn.publish(me.addr, o); } });
  • Ext.sockjs.EventBus onClose: function() { var me = this; me.fireEvent('close'); console.log('close'); }, publish: function(o) { var me = this; me.conn.publish(me.addr, o); } });
  • Ext.sockjs.EventBus onClose: function() { var me = this; me.fireEvent('close'); console.log('close'); }, publish: function(o) { var me = this; me.conn.publish(me.addr, o); } });
  • Ext.sockjs.EventBus onClose: function() { var me = this; me.fireEvent('close'); console.log('close'); }, publish: function(o) { var me = this; me.conn.publish(me.addr, o); } });
  • Ext.sockjs.EventBus onClose: function() { var me = this; me.fireEvent('close'); console.log('close'); }, publish: function(o) { var me = this; me.conn.publish(me.addr, o); } });
  • メッセージのやりとりをする 最初に解説した、素のSockJSサンプルと同じ事を Sencha Ext JS上で、作ったクラスを使ってやってみま しょう。
  • サンプルコード Ext.SockJS.addEventBus({ url : 'http://xxx.xxx.xxx.xxx:8081/eventbus', addr : 'demo.orderMgr' }); ! var addr = 'demo.orderMgr', eb = Ext.SockJS.get(addr); eb.on('receive', function(o) { console.log(o); });
  • サンプルコード Ext.SockJS.addEventBus({ url : 'http://xxx.xxx.xxx.xxx:8081/eventbus', addr : 'demo.orderMgr' }); ! var addr = 'demo.orderMgr', eb = Ext.SockJS.get(addr); ! eb.on('receive', function(o) { console.log(o); });
  • サンプルコード Ext.SockJS.addEventBus({ url : 'http://xxx.xxx.xxx.xxx:8081/eventbus', addr : 'demo.orderMgr' }); ! var addr = 'demo.orderMgr', eb = Ext.SockJS.get(addr); ! eb.on('receive', function(o) { console.log(o); });
  • サンプルコード Ext.SockJS.addEventBus({ url : 'http://xxx.xxx.xxx.xxx:8081/eventbus', addr : 'demo.orderMgr' }); ! var addr = 'demo.orderMgr', eb = Ext.SockJS.get(addr); ! eb.on('receive', function(o) { console.log(o); });
  • サンプルコード Ext.SockJS.addEventBus({ url : 'http://xxx.xxx.xxx.xxx:8081/eventbus', addr : 'demo.orderMgr' }); ! var addr = 'demo.orderMgr', eb = Ext.SockJS.get(addr); ! eb.on('receive', function(o) { console.log(o); });
  • サンプルコード Ext.SockJS.addEventBus({ url : 'http://xxx.xxx.xxx.xxx:8081/eventbus', addr : 'demo.orderMgr' }); ! var addr = 'demo.orderMgr', eb = Ext.SockJS.get(addr); ! eb.on('receive', function(o) { console.log(o); });
  • サンプルコード Ext.SockJS.addEventBus({ url : 'http://xxx.xxx.xxx.xxx:8081/eventbus', addr : 'demo.orderMgr' }); ! var addr = 'demo.orderMgr', eb = Ext.SockJS.get(addr); ! eb.on('receive', function(o) { console.log(o); });
  • サンプルコード Ext.SockJS.addEventBus({ url : 'http://xxx.xxx.xxx.xxx:8081/eventbus', addr : 'demo.orderMgr' }); ! var addr = 'demo.orderMgr', eb = Ext.SockJS.get(addr); ! eb.on('receive', function(o) { console.log(o); });
  • サンプルコード Ext.SockJS.addEventBus({ url : 'http://xxx.xxx.xxx.xxx:8081/eventbus', addr : 'demo.orderMgr' }); ! var addr = 'demo.orderMgr', eb = Ext.SockJS.get(addr); ! eb.on('receive', function(o) { console.log(o); });
  • サンプルコード this.control({ 'button[action=publish]': { click: function() { eb.publish('testdata'); } }, });
  • サンプルコード this.control({ 'button[action=publish]': { click: function() { eb.publish('testdata'); } }, });
  • サンプルコード this.control({ 'button[action=publish]': { click: function() { eb.publish('testdata'); } }, });
  • サンプルコード this.control({ 'button[action=publish]': { click: function() { eb.publish('testdata'); } }, });
  • サンプルコード this.control({ 'button[action=publish]': { click: function() { eb.publish('testdata'); } }, });
  • デモ
  • 共有オブジェクト(仮) メッセージのやりとりができたので、 今度は、Ext.window.Windowを表示して、 複数のブラウザで位置やサイズを共有してみましょう。
  • サンプルコード Ext.SockJS.addEventBus({ url : 'http://xxx.xxx.xxx.xxx:8081/eventbus', addr : 'demo.orderMgr' }); ! var addr = 'demo.orderMgr', eb = Ext.SockJS.get(addr), win, lock = false;
  • サンプルコード Ext.SockJS.addEventBus({ url : 'http://xxx.xxx.xxx.xxx:8081/eventbus', addr : 'demo.orderMgr' }); ! var addr = 'demo.orderMgr', eb = Ext.SockJS.get(addr), win, lock = false;
  • サンプルコード Ext.SockJS.addEventBus({ url : 'http://xxx.xxx.xxx.xxx:8081/eventbus', addr : 'demo.orderMgr' }); ! var addr = 'demo.orderMgr', eb = Ext.SockJS.get(addr), win, lock = false;
  • サンプルコード Ext.SockJS.addEventBus({ url : 'http://xxx.xxx.xxx.xxx:8081/eventbus', addr : 'demo.orderMgr' }); ! var addr = 'demo.orderMgr', eb = Ext.SockJS.get(addr), win, lock = false;
  • サンプルコード eb.on('receive', function(o) { if(!lock) { win.suspendEvents(false); if(o.x || o.y) { win.setPosition(o.x, o.y); } else if(o.width || o.height) { win.setSize(o.width, o.height); } win.resumeEvents(); } lock = false; });
  • サンプルコード eb.on('receive', function(o) { if(!lock) { win.suspendEvents(false); if(o.x || o.y) { win.setPosition(o.x, o.y); } else if(o.width || o.height) { win.setSize(o.width, o.height); } win.resumeEvents(); } lock = false; });
  • サンプルコード eb.on('receive', function(o) { if(!lock) { win.suspendEvents(false); if(o.x || o.y) { win.setPosition(o.x, o.y); } else if(o.width || o.height) { win.setSize(o.width, o.height); } win.resumeEvents(); } lock = false; });
  • サンプルコード eb.on('receive', function(o) { if(!lock) { win.suspendEvents(false); if(o.x || o.y) { win.setPosition(o.x, o.y); } else if(o.width || o.height) { win.setSize(o.width, o.height); } win.resumeEvents(); } lock = false; });
  • サンプルコード this.control({ 'button[action=createwindow]': { click: function() { win = Ext.widget('window', { itemId: 'hoge', autoShow: true, width: 300, height: 200 });
  • サンプルコード this.control({ 'button[action=createwindow]': { click: function() { win = Ext.widget('window', { itemId: 'hoge', autoShow: true, width: 300, height: 200 });
  • サンプルコード this.control({ 'button[action=createwindow]': { click: function() { win = Ext.widget('window', { itemId: 'hoge', autoShow: true, width: 300, height: 200 });
  • サンプルコード }); } } win.on({ move: function(win, x, y) { lock = true; eb.publish({ x: x, y: y }); }, resize: function(win, width, height) { lock = true; eb.publish({ width: width, height: height }); } });
  • サンプルコード }); } } win.on({ move: function(win, x, y) { lock = true; eb.publish({ x: x, y: y }); }, resize: function(win, width, height) { lock = true; eb.publish({ width: width, height: height }); } });
  • サンプルコード }); } } win.on({ move: function(win, x, y) { lock = true; eb.publish({ x: x, y: y }); }, resize: function(win, width, height) { lock = true; eb.publish({ width: width, height: height }); } });
  • デモ
  • まとめ SockJSのクライアントライブラリと、EventBusをラッピングして しまえば、Sencha クラスシステム上で違和感なく利用できる。 メッセージングで処理する内容を、コンポーネントの共有(共有オ ブジェクト)や、データストアなどSencha クラスシステム上の構 造に乗せていくと、よりリアルタイムにおもしろいアプリケーショ ンが作れそう。
  • まとめ インフラは、前回html5j エンタープライズ部で話した、vert.xでス ケールもできてEventBusに乗せとけば、あまり細かいこと考えなく ても良さそう。
  • 素のWebSocket使ってやるより、良くない?
  • 使う技術に翻弄されず、 やりたいことを迅速に実現しよう!
  • 今日、紹介したソースコードは、GitHubにて公開してあります。 が!まだまだSencha Ext JSクラスっぽく無いので鋭意作成中… https://github.com/xenophy/ext-sockjs
  • Sencha フレームワーク SockJS まだまだ、可能性がありそうだねっ!
  • ご清聴ありがとうございました!