Spa のための web サーバ構築ノウハウ
•
29 j'aime•12,089 vues
RIAに代わる技術、実用的SPA(Single-page Application) 第７回 エンタープライズ×HTML5ナイトセミナー presented by html5jエンタープライズ部
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
Similaire à Spa のための web サーバ構築ノウハウ
Similaire à Spa のための web サーバ構築ノウハウ (20)
Dernier
Dernier (10)
Spa のための web サーバ構築ノウハウ
- 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 実践開発ガイド (監修)
- 36. SPAに必要なインフラとは？ node + socket.io 確かに、ググるとWebSocketといればsocket.ioみたいな感じで、 記事一杯転がってるよね。 サンプルも簡単、双方向通信余裕♪
- 57. WebScoketインフラとしてのVert.xとSockJS Virt.xってなに？ SockJS SockJS サーバーを作ってみる Hazelcastを利用したVert.xサーバーのクラスタリング
- 58. Virt.xってなに？ Vert.x is a polyglot, non-blocking, event-driven application platform that runs on the JVM.
- 61. ポリグロット?
- 64. シンプルな同時並行性モデル
- 69. イベントバス
- 77. SockJS SockJS - WebSocket emulation
- 80. SockJS すばらしいねっ！
- 85. SockJS サーバーを作ってみる SockJS サーバーコード作成 SockJS クライアントコード作成
- 87. Vert.xの設置 yumコマンドを使ってJDKをインストール # yum -y install java-1.7.0-openjdk-devel; vert.xインストール(/rootにインストールする前提、どこでもよい) # wget "http://dl.bintray.com/vertx/downloads/vert.x-2.1M2.tar.gz" -O vert.x-2.1M2.tar.gz; # tar xvzf vert.x-2.1M2.tar.gz; パスを通す # vi .bash_profile PATH=“$PATH”:/root/vert.x-2.1M2/bin # source .bash_profile バージョン確認 # vertx version
- 88. SockJS サーバーコード作成 var vertx = require('vertx'); var server = vertx.createHttpServer(); var sockJSServer = vertx.createSockJSServer(server); サーバー生成 ! sockJSServer.bridge({prefix : '/eventbus'}, [{ address : 'demo.orderMgr' }], [{ address : 'demo.orderMgr' }] ); セキュリティ設定 ! server.listen(8080); これだけ!
- 89. SockJS クライアントコード作成 <html> <head> </head> <body> <script src="http://cdn.sockjs.org/sockjs-0.3.4.min.js"></script> <script src='vertxbus-2.1.js'></script> ! <script> ! var eb = new vertx.EventBus('http://133.242.50.31:8080/eventbus'); ! eb.onopen = function() { ! console.log('open'); ! eb.registerHandler('demo.orderMgr', function(message) { ! console.log('received a message: ' + JSON.stringify(message)); ! }); ! } ! eb.onmessage = function(e) { console.log('message', e.data); }; ! eb.onclose = function() { console.log('close'); }; ! function ebSend() { var v = document.getElementById("form1").value; eb.publish('demo.orderMgr', v); } ! </script> <input id="form1" type="text" /> <input type="button" onclick="ebSend();" value="Send Message" /> </body> </html>
- 90. SockJS サーバーを作ってみる SockJSサーバー起動 # vertx run app.js
- 97. クラスタリング構成図 ブラウザ (SockJSクライアント) ブラウザ (SockJSクライアント) ブラウザ (SockJSクライアント) Vert.x サーバー (SockJSサーバー) Vert.x サーバー (SockJSサーバー) Vert.x サーバー (SockJSサーバー) ローカルスイッチ
- 98. /root/vert.x-2.1M2/conf/cluster.xmlを編集 <hazelcast xsi:schemaLocation="http://www.hazelcast.com/schema/config hazelcast-basic.xsd" xmlns="http://www.hazelcast.com/schema/config" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <properties> <property name="hazelcast.mancenter.enabled">false</property> <property name="hazelcast.memcache.enabled">false</property> <property name="hazelcast.rest.enabled">false</property> <property name="hazelcast.wait.seconds.before.join">0</property> <property name="hazelcast.logging.type">jdk</property> </properties> <group> <name>dev</name> <password>dev-pass</password> </group> <network> <port auto-increment="true">5701</port> <join> <multicast enabled="false"> <multicast-group>224.2.2.3</multicast-group> <multicast-port>54327</multicast-port> </multicast> <tcp-ip enabled="true"> <interface>192.168.0.2</interface> <interface>192.168.0.3</interface> <interface>192.168.0.4</interface> </tcp-ip> <aws enabled=“false"> … クラスタリングしたいサーバーを 追加すればOK
- 99. クラスタ起動 vertx run app.js -cluster
- 101. デモ Vert.x サーバー１へ接続するHTML http://133.242.50.31/server1.html みんなで、つないで みよう!! Vert.x サーバー2へ接続するHTML 自粛 http://133.242.50.31/server2.html つながんなかったりし たら、すまん！！ Vert.x サーバー3へ接続するHTML http://133.242.50.31/server3.html 当日のデモ中のみ有効
- 102. まとめ
- 105. まとめ
- 108. まとめ
- 112. ご清聴ありがとうございました!