Suche senden
Hochladen
Using SockJS(Websocket) with Sencha Ext JS
•
4 gefällt mir
•
5,058 views
Kazuhiro Kotsutsumi
Folgen
Technologie
Melden
Teilen
Melden
Teilen
1 von 132
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
Html5, Web Applications 2
Html5, Web Applications 2
totty jp
勉強会0614 vagrant
勉強会0614 vagrant
Yu Ito
node+socket.io+enchant.jsでチャットゲーを作る
node+socket.io+enchant.jsでチャットゲーを作る
Kiyoshi SATOH
Nodejs
Nodejs
Masanobu Masuda
PowerShell de Azure
PowerShell de Azure
Atsushi Kojima
Webアプリケーションの パフォーマンス向上のコツ 実践編
Webアプリケーションの パフォーマンス向上のコツ 実践編
Masahiro Nagano
One night Vue.js
One night Vue.js
Masahiro Kyuden
翻訳から始めるVue.js 入門
翻訳から始めるVue.js 入門
Makoto Chiba
Empfohlen
Html5, Web Applications 2
Html5, Web Applications 2
totty jp
勉強会0614 vagrant
勉強会0614 vagrant
Yu Ito
node+socket.io+enchant.jsでチャットゲーを作る
node+socket.io+enchant.jsでチャットゲーを作る
Kiyoshi SATOH
Nodejs
Nodejs
Masanobu Masuda
PowerShell de Azure
PowerShell de Azure
Atsushi Kojima
Webアプリケーションの パフォーマンス向上のコツ 実践編
Webアプリケーションの パフォーマンス向上のコツ 実践編
Masahiro Nagano
One night Vue.js
One night Vue.js
Masahiro Kyuden
翻訳から始めるVue.js 入門
翻訳から始めるVue.js 入門
Makoto Chiba
第1回Webサーバ勉強会 - 212-223 ブラウザマッチ処理
第1回Webサーバ勉強会 - 212-223 ブラウザマッチ処理
Seiichiro Ishida
日本 GNU AWK ユーザー会チラシ - OSC2012 Tokyo/Fall
日本 GNU AWK ユーザー会チラシ - OSC2012 Tokyo/Fall
博文 斉藤
おすすめ gem
おすすめ gem
chocoby
SlackのIncomingWebhooksとOutgoingWebhooksを使って電子工作と連携させてみよう
SlackのIncomingWebhooksとOutgoingWebhooksを使って電子工作と連携させてみよう
Shigeo Ueda
第1回鹿児島node.jsの会資料_内村
第1回鹿児島node.jsの会資料_内村
Koichi Uchimura
Start React with Browserify
Start React with Browserify
Muyuu Fujita
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
Tide - SmalltalkでSPA
Tide - SmalltalkでSPA
Masashi Umezawa
PHP 2大 web フレームワークの徹底比較!
PHP 2大 web フレームワークの徹底比較!
Shohei Okada
サーバー実装いろいろ
サーバー実装いろいろ
kjwtnb
ISUCONの話(夏期講習2014)
ISUCONの話(夏期講習2014)
SATOSHI TAGOMORI
Windows スクリプトセミナー WMI編 VBScript&WMI
Windows スクリプトセミナー WMI編 VBScript&WMI
junichi anno
CategoLJについて
CategoLJについて
Toshiaki Maki
EWD 3トレーニングコース#31 ewd-xpressでWebおよびRESTサービスを作る
EWD 3トレーニングコース#31 ewd-xpressでWebおよびRESTサービスを作る
Kiyoshi Sawada
EWD 3トレーニングコース#4 ewd-xpressのインストールと構成
EWD 3トレーニングコース#4 ewd-xpressのインストールと構成
Kiyoshi Sawada
丸の内MongoDB勉強会#20LT 2.8のストレージエンジン動かしてみました
丸の内MongoDB勉強会#20LT 2.8のストレージエンジン動かしてみました
Ryuji Tamagawa
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
Toshiro Shimizu
これから利用拡大?WebSocket
これから利用拡大?WebSocket
AdvancedTechNight
20081003
20081003
小野 修司
Wight: Phantom’s Perl friend - YAPC::Asia 2012
Wight: Phantom’s Perl friend - YAPC::Asia 2012
Hiroshi Shibamura
SockJS Intro
SockJS Intro
Ngoc Dao
WebSockets with Spring 4
WebSockets with Spring 4
Sergi Almar i Graupera
Weitere ähnliche Inhalte
Was ist angesagt?
第1回Webサーバ勉強会 - 212-223 ブラウザマッチ処理
第1回Webサーバ勉強会 - 212-223 ブラウザマッチ処理
Seiichiro Ishida
日本 GNU AWK ユーザー会チラシ - OSC2012 Tokyo/Fall
日本 GNU AWK ユーザー会チラシ - OSC2012 Tokyo/Fall
博文 斉藤
おすすめ gem
おすすめ gem
chocoby
SlackのIncomingWebhooksとOutgoingWebhooksを使って電子工作と連携させてみよう
SlackのIncomingWebhooksとOutgoingWebhooksを使って電子工作と連携させてみよう
Shigeo Ueda
第1回鹿児島node.jsの会資料_内村
第1回鹿児島node.jsの会資料_内村
Koichi Uchimura
Start React with Browserify
Start React with Browserify
Muyuu Fujita
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
Tide - SmalltalkでSPA
Tide - SmalltalkでSPA
Masashi Umezawa
PHP 2大 web フレームワークの徹底比較!
PHP 2大 web フレームワークの徹底比較!
Shohei Okada
サーバー実装いろいろ
サーバー実装いろいろ
kjwtnb
ISUCONの話(夏期講習2014)
ISUCONの話(夏期講習2014)
SATOSHI TAGOMORI
Windows スクリプトセミナー WMI編 VBScript&WMI
Windows スクリプトセミナー WMI編 VBScript&WMI
junichi anno
CategoLJについて
CategoLJについて
Toshiaki Maki
EWD 3トレーニングコース#31 ewd-xpressでWebおよびRESTサービスを作る
EWD 3トレーニングコース#31 ewd-xpressでWebおよびRESTサービスを作る
Kiyoshi Sawada
EWD 3トレーニングコース#4 ewd-xpressのインストールと構成
EWD 3トレーニングコース#4 ewd-xpressのインストールと構成
Kiyoshi Sawada
丸の内MongoDB勉強会#20LT 2.8のストレージエンジン動かしてみました
丸の内MongoDB勉強会#20LT 2.8のストレージエンジン動かしてみました
Ryuji Tamagawa
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
Toshiro Shimizu
これから利用拡大?WebSocket
これから利用拡大?WebSocket
AdvancedTechNight
20081003
20081003
小野 修司
Wight: Phantom’s Perl friend - YAPC::Asia 2012
Wight: Phantom’s Perl friend - YAPC::Asia 2012
Hiroshi Shibamura
Was ist angesagt?
(20)
第1回Webサーバ勉強会 - 212-223 ブラウザマッチ処理
第1回Webサーバ勉強会 - 212-223 ブラウザマッチ処理
日本 GNU AWK ユーザー会チラシ - OSC2012 Tokyo/Fall
日本 GNU AWK ユーザー会チラシ - OSC2012 Tokyo/Fall
おすすめ gem
おすすめ gem
SlackのIncomingWebhooksとOutgoingWebhooksを使って電子工作と連携させてみよう
SlackのIncomingWebhooksとOutgoingWebhooksを使って電子工作と連携させてみよう
第1回鹿児島node.jsの会資料_内村
第1回鹿児島node.jsの会資料_内村
Start React with Browserify
Start React with Browserify
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Tide - SmalltalkでSPA
Tide - SmalltalkでSPA
PHP 2大 web フレームワークの徹底比較!
PHP 2大 web フレームワークの徹底比較!
サーバー実装いろいろ
サーバー実装いろいろ
ISUCONの話(夏期講習2014)
ISUCONの話(夏期講習2014)
Windows スクリプトセミナー WMI編 VBScript&WMI
Windows スクリプトセミナー WMI編 VBScript&WMI
CategoLJについて
CategoLJについて
EWD 3トレーニングコース#31 ewd-xpressでWebおよびRESTサービスを作る
EWD 3トレーニングコース#31 ewd-xpressでWebおよびRESTサービスを作る
EWD 3トレーニングコース#4 ewd-xpressのインストールと構成
EWD 3トレーニングコース#4 ewd-xpressのインストールと構成
丸の内MongoDB勉強会#20LT 2.8のストレージエンジン動かしてみました
丸の内MongoDB勉強会#20LT 2.8のストレージエンジン動かしてみました
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
これから利用拡大?WebSocket
これから利用拡大?WebSocket
20081003
20081003
Wight: Phantom’s Perl friend - YAPC::Asia 2012
Wight: Phantom’s Perl friend - YAPC::Asia 2012
Andere mochten auch
SockJS Intro
SockJS Intro
Ngoc Dao
WebSockets with Spring 4
WebSockets with Spring 4
Sergi Almar i Graupera
Make social media work for you
Make social media work for you
October Communications
Realtime web application with java
Realtime web application with java
JeongHun Byeon
WebSockets and Java
WebSockets and Java
Bozhidar Bozhanov
讓「文字型簡報」可讀性更高
讓「文字型簡報」可讀性更高
sliDEsign
把握每個人生機會 創造自我高峰 | 莊淑芬 Shenan Chuang
把握每個人生機會 創造自我高峰 | 莊淑芬 Shenan Chuang
sliDEsign
Websockets and SockJS, Real time chatting
Websockets and SockJS, Real time chatting
University of Alabama at Birmingham
SKET Servise Guide
SKET Servise Guide
SKET
日本都市再生15年回顧
日本都市再生15年回顧
Chih-Cheng Ting
Spring + WebSocket integration
Spring + WebSocket integration
Oleksandr Semenov
デザイン提案の参考資料
デザイン提案の参考資料
Tsutomu Sogitani
Webライティング11のルール
Webライティング11のルール
Tsutomu Sogitani
Digital Leadership, Reputation and Being Your Best Self
Digital Leadership, Reputation and Being Your Best Self
Paul Brown
REST vs. Messaging For Microservices
REST vs. Messaging For Microservices
Eberhard Wolff
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
Shoe-g Ueyama
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
Tsutomu Sogitani
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
MOCKS | Yuta Morishige
Social Media Best Practices, Part 1
Social Media Best Practices, Part 1
David King
Top Non Profits On Social Media Q4 2015
Top Non Profits On Social Media Q4 2015
Unmetric
Andere mochten auch
(20)
SockJS Intro
SockJS Intro
WebSockets with Spring 4
WebSockets with Spring 4
Make social media work for you
Make social media work for you
Realtime web application with java
Realtime web application with java
WebSockets and Java
WebSockets and Java
讓「文字型簡報」可讀性更高
讓「文字型簡報」可讀性更高
把握每個人生機會 創造自我高峰 | 莊淑芬 Shenan Chuang
把握每個人生機會 創造自我高峰 | 莊淑芬 Shenan Chuang
Websockets and SockJS, Real time chatting
Websockets and SockJS, Real time chatting
SKET Servise Guide
SKET Servise Guide
日本都市再生15年回顧
日本都市再生15年回顧
Spring + WebSocket integration
Spring + WebSocket integration
デザイン提案の参考資料
デザイン提案の参考資料
Webライティング11のルール
Webライティング11のルール
Digital Leadership, Reputation and Being Your Best Self
Digital Leadership, Reputation and Being Your Best Self
REST vs. Messaging For Microservices
REST vs. Messaging For Microservices
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
Social Media Best Practices, Part 1
Social Media Best Practices, Part 1
Top Non Profits On Social Media Q4 2015
Top Non Profits On Social Media Q4 2015
Ähnlich wie Using SockJS(Websocket) with Sencha Ext JS
大阪Node学園八時限目 「expressで作るWebアプリ」
大阪Node学園八時限目 「expressで作るWebアプリ」
Shunsuke Watanabe
ボット開発でも DevOps! BotBuilder のテスト手法
ボット開発でも DevOps! BotBuilder のテスト手法
Kenichiro Nakamura
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
Takayoshi Tanaka
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
Masanori Ishigami
Real world android akka
Real world android akka
Taisuke Oe
WebRTC meetup Tokyo 1
WebRTC meetup Tokyo 1
mganeko
Java EE8 Report
Java EE8 Report
Norito Agetsuma
Vue.js で XSS
Vue.js で XSS
tobaru_yuta
Node handson
Node handson
Makoto Kishimoto
JavaOne2014報告会資料
JavaOne2014報告会資料
Mitsuyasu Tsuhako
リアルFacebookガジェットを作った(ロングバージョン)
リアルFacebookガジェットを作った(ロングバージョン)
Mariko Goda
Data apiで実現 進化するwebの世界
Data apiで実現 進化するwebの世界
Yuji Takayama
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Akira Inoue
Node.jsでブラウザメッセンジャー
Node.jsでブラウザメッセンジャー
Yahoo!デベロッパーネットワーク
かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう
Shuhei Iitsuka
ScalaMatsuri 2016
ScalaMatsuri 2016
Yoshitaka Fujii
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
Kohei Kadowaki
Ext.direct
Ext.direct
Shuhei Aoyama
Djangoフレームワークの紹介
Djangoフレームワークの紹介
Shinya Okano
Titanium Mobile
Titanium Mobile
Naoya Ito
Ähnlich wie Using SockJS(Websocket) with Sencha Ext JS
(20)
大阪Node学園八時限目 「expressで作るWebアプリ」
大阪Node学園八時限目 「expressで作るWebアプリ」
ボット開発でも DevOps! BotBuilder のテスト手法
ボット開発でも DevOps! BotBuilder のテスト手法
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
Real world android akka
Real world android akka
WebRTC meetup Tokyo 1
WebRTC meetup Tokyo 1
Java EE8 Report
Java EE8 Report
Vue.js で XSS
Vue.js で XSS
Node handson
Node handson
JavaOne2014報告会資料
JavaOne2014報告会資料
リアルFacebookガジェットを作った(ロングバージョン)
リアルFacebookガジェットを作った(ロングバージョン)
Data apiで実現 進化するwebの世界
Data apiで実現 進化するwebの世界
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Node.jsでブラウザメッセンジャー
Node.jsでブラウザメッセンジャー
かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう
ScalaMatsuri 2016
ScalaMatsuri 2016
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
Ext.direct
Ext.direct
Djangoフレームワークの紹介
Djangoフレームワークの紹介
Titanium Mobile
Titanium Mobile
Kürzlich hochgeladen
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
Kürzlich hochgeladen
(9)
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
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);
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);
10.
SockJS Serverの作成 // ブリッジ設定 sockJSServer.bridge( ! //
コンフィグ {prefix : ‘/eventbus’}, ); // セキュリティ設定 [{address : ‘demo.orderMgr'}], [{address : ‘demo.orderMgr'}]
11.
SockJS Serverの作成 // ブリッジ設定 sockJSServer.bridge( ! //
コンフィグ {prefix : ‘/eventbus’}, ); // セキュリティ設定 [{address : ‘demo.orderMgr'}], [{address : ‘demo.orderMgr'}]
12.
SockJS Serverの作成 // ブリッジ設定 sockJSServer.bridge( ! //
コンフィグ {prefix : ‘/eventbus’}, ); // セキュリティ設定 [{address : ‘demo.orderMgr'}], [{address : ‘demo.orderMgr'}]
13.
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>
19.
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>
20.
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>
21.
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>
22.
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' ); これが、さっきサーバーサイドで設定したprefixね! ! {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) ); } ); }
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) ); } ); }
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,
48.
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,
49.
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,
50.
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,
51.
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,
52.
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); },
54.
Ext.sockjs.Manager constructor: function() { var
me = this; me.eventbuses = new Ext.util.MixedCollection(); me.mixins.observable.constructor.call(me); },
55.
Ext.sockjs.Manager constructor: function() { var
me = this; me.eventbuses = new Ext.util.MixedCollection(); me.mixins.observable.constructor.call(me); },
56.
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) ); },
58.
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) ); },
59.
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) ); },
60.
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) ); },
61.
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; });
63.
Ext.sockjs.Manager get: function(name) { var
me = this; return me.eventbuses.get(name); } }, function() { Ext.SockJS = Ext.sockjs.Manager; });
64.
Ext.sockjs.Manager get: function(name) { var
me = this; return me.eventbuses.get(name); } }, function() { Ext.SockJS = Ext.sockjs.Manager; });
65.
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' },
69.
Ext.sockjs.EventBus Ext.define('Ext.sockjs.EventBus', { mixins: { observable:
'Ext.util.Observable' },
70.
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); },
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); },
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); } });
91.
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); } });
92.
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); } });
93.
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); });
97.
サンプルコード 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); });
98.
サンプルコード 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); });
99.
サンプルコード 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); });
100.
サンプルコード 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); });
101.
サンプルコード 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); });
102.
サンプルコード 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); });
103.
サンプルコード 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'); } }, });
105.
サンプルコード this.control({ 'button[action=publish]': { click: function()
{ eb.publish('testdata'); } }, });
106.
サンプルコード this.control({ 'button[action=publish]': { click: function()
{ eb.publish('testdata'); } }, });
107.
サンプルコード this.control({ 'button[action=publish]': { click: function()
{ eb.publish('testdata'); } }, });
108.
サンプルコード 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;
112.
サンプルコード 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;
113.
サンプルコード 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;
114.
サンプルコード 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; });
116.
サンプルコード 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; });
117.
サンプルコード 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; });
118.
サンプルコード 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 });
120.
サンプルコード this.control({ 'button[action=createwindow]': { click: function()
{ win = Ext.widget('window', { itemId: 'hoge', autoShow: true, width: 300, height: 200 });
121.
サンプルコード 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 }); } });
123.
サンプルコード }); } } 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 }); } });
124.
サンプルコード }); } } 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.
ご清聴ありがとうございました!
Jetzt herunterladen