Contenu connexe
Similaire à Using SockJS(Websocket) with Sencha Ext JS
Similaire à Using SockJS(Websocket) with Sencha Ext JS (20)
Using SockJS(Websocket) with 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 実践開発ガイド (監修)
- 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);
- 7. SockJS Serverの作成
// Vert.x読み込み
var vertx = require('vertx');
!
// HTTPサーバー生成
var server = vertx.createHttpServer();
!
// SockJSサーバー生成
var sockJSServer = vertx.createSockJSServer(server);
- 8. SockJS Serverの作成
// Vert.x読み込み
var vertx = require('vertx');
!
// HTTPサーバー生成
var server = vertx.createHttpServer();
!
// SockJSサーバー生成
var sockJSServer = vertx.createSockJSServer(server);
- 9. SockJS Serverの作成
// Vert.x読み込み
var vertx = require('vertx');
!
// HTTPサーバー生成
var server = vertx.createHttpServer();
!
// SockJSサーバー生成
var sockJSServer = vertx.createSockJSServer(server);
- 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)
);
}
);
}
- 28. 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)
);
}
);
}
- 29. 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)
);
}
);
}
- 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);
},
- 72. 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);
},
- 73. 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);
},
- 74. 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);
},
- 76. 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);
},
- 77. 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);
},
- 78. 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);
},
- 79. 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);
},
- 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);
},
- 81. 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);
},
- 82. 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);
},
- 83. 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);
},
- 84. 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);
},
- 85. 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);
},
- 86. 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);
},
- 87. 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);
},
- 88. 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);
},