Using SockJS(Websocket) with Sencha Ext JS

1. Using SockJS(Websocket) with Sencha Ext JS Sencha Ext JS上のWebSocket実装の形小堤一弘株式会社ゼノフィ Xenophy.CO.,LTD

2. 本日のアジェンダ自己紹介 SockJSをSencha Ext JSで使うための準備メッセージ交換と、マウス位置共有の設計デモまとめ

3. 自己紹介こつつみかずひろ小堤一弘株式会社ゼノフィ代表取締役 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 実践開発ガイド (監修)

4. SockJSをSencha Ext JSで使うための準備まず、普通にSockJSでWebSocket通信をするための準備をする。

5. Vert.x + SockJS Serverの環境構築について昨日、 html5jエンタープライズ部で、紹介させてもらった、 SPA のための Web サーバ構築ノウハウを参照してください。 http://www.slideshare.net/kotsutsumi/spa-web

6. SockJS Serverの作成 // Vert.x読み込み var vertx = require('vertx'); ! // HTTPサーバー生成 var server = vertx.createHttpServer(); ! // SockJSサーバー生成 var sockJSServer = vertx.createSockJSServer(server);

10. SockJS Serverの作成 // ブリッジ設定 sockJSServer.bridge( ! // コンフィグ {prefix : ‘/eventbus’}, ); // セキュリティ設定 [{address : ‘demo.orderMgr'}], [{address : ‘demo.orderMgr'}]

14. SockJS Serverの作成 // ブリッジ設定 sockJSServer.bridge( ! // コンフィグ {prefix : ‘/eventbus’}, // セキュリティ設定 [{address : ‘demo.orderMgr'}], [{address : ‘demo.orderMgr'}] ); ブリッジはデフォルトのすべてを拒否するポリシーを持つファイアウォールの一種のように動作します。

15. SockJS Serverの作成 // リスン server.listen(8081);

16. SockJS Serverの起動 vertx run extjs-sockjs.js クラスター起動する場合は、後ろに-clusterをつける

17. 無事、起動!!

18. 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>

23. 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

24. SockJSアプリケーション作成 - sockjs-app.js // イベントバス生成 var eb = new vertx.EventBus( 'http://[Vert.xサーバーIP]:8081/eventbus' );

25. SockJSアプリケーション作成 - sockjs-app.js // イベントバス生成 var eb = new vertx.EventBus( 'http://[Vert.xサーバーIP]:8081/eventbus' );

26. SockJSアプリケーション作成 - sockjs-app.js // イベントバス生成 var eb = new vertx.EventBus( 'http://[Vert.xサーバーIP]:8081/eventbus' ); これが、さっきサーバーサイドで設定したpreﬁxね！  ! {prefix : '/eventbus'}

27. 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) ); } ); }

30. 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) ); } ); }

31. 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) ); } ); }

32. 実行すると、こんな感じ

33. SockJSで、WebSocket繋がったね!

34. やったねっ!

35. これ前回… html5j エンタープライズ部でやったやつ…

36. を、ちょっと詳しく説明しただけ…

37. デス!!

38. 続きまして…

39. メッセージ交換と、マウス位置共有の設計 SockJSをSencha Ext JSのクラスシステムでラッピングする

40. Sencha Cmdを利用してワークスペースを作成する SDKまでのパス sencha -s ~/Library/Sencha/ext-4.2.2.1144 generate app MyApp ./

41. Sencha Cmdを利用してワークスペースを作成するチンッ!!

42. ext-sockjsを作る SockJSをラッピングして、Sencha Ext JSのクラスシステムとして利用できるようにする。

43. ext-sockjsを作る Controller A EventBus A Controller B Controller C Component A Component B Manager EventBus B EventBus C

44. ext-sockjsを作る大体こんな感じの、Sencha Ext JSでは、普通のExt.AbstractManagerを継承したクラス構成

45. ext-sockjsを作るというのも、粗いので、ソースを見ていきましょう…

46. ext-sockjsを作る Ext.sockjs.Manager

47. 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,

53. Ext.sockjs.Manager constructor: function() { var me = this; me.eventbuses = new Ext.util.MixedCollection(); me.mixins.observable.constructor.call(me); },

57. 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) ); },

62. Ext.sockjs.Manager get: function(name) { var me = this; return me.eventbuses.get(name); } }, function() { Ext.SockJS = Ext.sockjs.Manager; });

66. ext-sockjsを作る Managerはできたので、次は管理される側を…

67. ext-sockjsを作る Ext.sockjs.EventBus

68. Ext.sockjs.EventBus Ext.define('Ext.sockjs.EventBus', { mixins: { observable: 'Ext.util.Observable' },

71. 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); },

75. 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); },

80. 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); },

89. 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); } });

90. 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); } });

94. メッセージのやりとりをする最初に解説した、素のSockJSサンプルと同じ事を Sencha Ext JS上で、作ったクラスを使ってやってみましょう。

95. サンプルコード 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); });

96. サンプルコード 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); });

104. サンプルコード this.control({ 'button[action=publish]': { click: function() { eb.publish('testdata'); } }, });

109. デモ

110. 共有オブジェクト（仮）メッセージのやりとりができたので、今度は、Ext.window.Windowを表示して、複数のブラウザで位置やサイズを共有してみましょう。

111. サンプルコード 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;

115. サンプルコード 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; });

119. サンプルコード this.control({ 'button[action=createwindow]': { click: function() { win = Ext.widget('window', { itemId: 'hoge', autoShow: true, width: 300, height: 200 });

122. サンプルコード }); } } 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 }); } });

125. デモ

126. まとめ SockJSのクライアントライブラリと、EventBusをラッピングしてしまえば、Sencha クラスシステム上で違和感なく利用できる。メッセージングで処理する内容を、コンポーネントの共有（共有オブジェクト）や、データストアなどSencha クラスシステム上の構造に乗せていくと、よりリアルタイムにおもしろいアプリケーションが作れそう。

127. まとめインフラは、前回html5j エンタープライズ部で話した、vert.xでスケールもできてEventBusに乗せとけば、あまり細かいこと考えなくても良さそう。

128. 素のWebSocket使ってやるより、良くない？

129. 使う技術に翻弄されず、やりたいことを迅速に実現しよう!

130. 今日、紹介したソースコードは、GitHubにて公開してあります。が！まだまだSencha Ext JSクラスっぽく無いので鋭意作成中… https://github.com/xenophy/ext-sockjs

131. Sencha フレームワーク SockJS まだまだ、可能性がありそうだねっ！

132. ご清聴ありがとうございました!

Using SockJS(Websocket) with Sencha Ext JS

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Using SockJS(Websocket) with Sencha Ext JS (20)

Recently uploaded (8)

Using SockJS(Websocket) with Sencha Ext JS