Initial sketch of the GUI web-socket mechanics.
Change-Id: I5f481886fd45ce058be4aaf07fba466e702ae7ad
diff --git a/web/gui/src/main/webapp/WEB-INF/web.xml b/web/gui/src/main/webapp/WEB-INF/web.xml
index c5c6e28..ab7a550 100644
--- a/web/gui/src/main/webapp/WEB-INF/web.xml
+++ b/web/gui/src/main/webapp/WEB-INF/web.xml
@@ -39,4 +39,16 @@
<url-pattern>/rs/*</url-pattern>
</servlet-mapping>
+ <servlet>
+ <servlet-name>Web Socket Service</servlet-name>
+ <servlet-class>org.onlab.onos.gui.GuiWebSocketServlet</servlet-class>
+ <load-on-startup>2</load-on-startup>
+ </servlet>
+
+ <servlet-mapping>
+ <servlet-name>Web Socket Service</servlet-name>
+ <url-pattern>/ws/*</url-pattern>
+ </servlet-mapping>
+
+
</web-app>
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/topo2.js b/web/gui/src/main/webapp/topo2.js
index d345fda..e7444c9 100644
--- a/web/gui/src/main/webapp/topo2.js
+++ b/web/gui/src/main/webapp/topo2.js
@@ -40,6 +40,7 @@
showBackground: true
},
backgroundUrl: 'img/us-map.png',
+ webSockUrl: 'ws/topology',
data: {
live: {
jsonUrl: 'rs/topology/graph',
@@ -130,6 +131,7 @@
links: [],
lookup: {}
},
+ webSock,
labelIdx = 0,
selected = {},
highlighted = null,
@@ -579,6 +581,52 @@
}
// ==============================
+ // Web-Socket for live data
+
+ function webSockUrl() {
+ return document.location.toString()
+ .replace(/\#.*/, '')
+ .replace('http://', 'ws://')
+ .replace('https://', 'wss://')
+ .replace('index2.html', config.webSockUrl);
+ }
+
+ webSock = {
+ ws : null,
+
+ connect : function() {
+ webSock.ws = new WebSocket(webSockUrl());
+
+ webSock.ws.onopen = function() {
+ webSock._send("Hi there!");
+ };
+
+ webSock.ws.onmessage = function(m) {
+ if (m.data) {
+ console.log(m.data);
+ }
+ };
+
+ webSock.ws.onclose = function(m) {
+ webSock.ws = null;
+ };
+ },
+
+ send : function(text) {
+ if (text != null && text.length > 0) {
+ webSock._send(text);
+ }
+ },
+
+ _send : function(message) {
+ if (webSock.ws) {
+ webSock.ws.send(message);
+ }
+ }
+
+ };
+
+ // ==============================
// View life-cycle callbacks
function preload(view, ctx) {
@@ -656,6 +704,7 @@
.on('tick', tick);
network.drag = d3u.createDragBehavior(network.force, selectCb, atDragEnd);
+ webSock.connect();
}
function load(view, ctx) {
diff --git a/web/gui/src/main/webapp/ws.html b/web/gui/src/main/webapp/ws.html
new file mode 100644
index 0000000..cac99b2
--- /dev/null
+++ b/web/gui/src/main/webapp/ws.html
@@ -0,0 +1,54 @@
+<html>
+<head>
+ <title>Web Sockets Demo</title>
+
+ <script src="libs/jquery-2.1.1.min.js"></script>
+
+ <script type='text/javascript'>
+ if (!window.WebSocket)
+ alert("WebSocket not supported by this browser");
+
+ var server = {
+ connect : function() {
+ var location = document.location.toString().replace('http://',
+ 'ws://').replace('https://', 'wss://').replace('ws.html','ws/topology');
+ this.ws = new WebSocket(location);
+
+ this.ws.onopen = function() {
+ server._send("Hi there!");
+ };
+
+ this.ws.onmessage = function(m) {
+ if (m.data) {
+ $('#log').append(m.data).append($('<br/>'));
+ }
+ };
+
+ this.ws.onclose = function(m) {
+ this.ws = null;
+ };
+ },
+
+ _send : function(message) {
+ if (this.ws) {
+ this.ws.send(message);
+ }
+ },
+
+ send : function(text) {
+ if (text != null && text.length > 0) {
+ server._send(text);
+ }
+ }
+ };
+ </script>
+</head>
+<body>
+<pre id='log'></pre>
+
+<script type='text/javascript'>
+ server.connect();
+</script>
+
+</body>
+</html>