using html5 websockets (also on client side) to replace cometd

7be161a7 · Nikolaus Krismer · b600e8d7 · 7be161a7 · 7be161a7 · 7be161a7
Commit 7be161a7 authored 11 years ago by Nikolaus Krismer
--- a/src/main/webapp/css_new/geosearch.css
+++ b/src/main/webapp/css_new/geosearch.css
@@ -26,7 +26,7 @@
 }
 .icon-isochrone:before {
-	background: url('/isochrones/img_new/icon-isochrone.png') no-repeat scroll center center transparent;
+	background: url('/isochrone/img_new/icon-isochrone.png') no-repeat scroll center center transparent;
 	background-size: 100% 100%;
 	content: " ";
 	display: block;
@@ -87,7 +87,7 @@
 }
 .leaflet-control-geosearch-btn {
-    background: url('/isochrones/img_new/geosearch.png') no-repeat scroll center center #00CC44;
+    background: url('/isochrone/img_new/geosearch.png') no-repeat scroll center center #00CC44;
    background-size: auto 100%;
 	border: 0px none;
    border-radius: 0px 4px 4px 0px;

--- a/src/main/webapp/css_new/isoga.css
+++ b/src/main/webapp/css_new/isoga.css
@@ -31,11 +31,11 @@ div.page-wrapper {
 fieldset { padding:0; border:0; margin-top:25px; }
 .help-control-div {
-	background: url('/isochrones/img_new/help_filled.png') no-repeat scroll 0px 0px transparent;
+	background: url('/isochrone/img_new/help_filled.png') no-repeat scroll 0px 0px transparent;
 }
 .settings-control-div {
-    background: url('/isochrones/img_new/settings.png') no-repeat scroll 0px 0px transparent;
+    background: url('/isochrone/img_new/settings.png') no-repeat scroll 0px 0px transparent;
    clear: none;
 }

--- a/src/main/webapp/index_new.html
+++ b/src/main/webapp/index_new.html
@@ -28,8 +28,15 @@
 	<script type="text/javascript" src="js_new/controls.js"></script>
 	<script type="text/javascript" src="js_new/bing.js"></script>
 	<script type="text/javascript" src="js_new/google.js"></script>
+	<script type="text/javascript" src="js_new/websocket.js"></script>
 	<script type="text/javascript" src="js_new/map.js"></script>
 	<script type="text/javascript">
+		function init() {
+			var ws = createWebsocket();
+			getConfiguration(ws);
+			createMap();
+		}
 		$(function() {
 			$('#help-dialog').dialog({
 	    		autoOpen: false,
@@ -59,7 +66,7 @@
 	</script>
 </head>
-<body onload="javascript:createMap();">
+<body onload="javascript:init();">
 	<div class="page-wrapper">
 		<div id="map" class="map"></div>
 		<div id='help-dialog' title="Hilfe">

--- a/src/main/webapp/js_new/websocket.js
+++ b/src/main/webapp/js_new/websocket.js
+function createWebsocket() {
+	var wsUri = "ws://localhost:8090/isochrone/websocket";
+	var websocket = new WebSocket(wsUri);
+    websocket.onopen = function(evt) { onOpen(evt); };
+    websocket.onclose = function(evt) { onClose(evt); };
+    websocket.onmessage = function(evt) { onMessage(evt); };
+    websocket.onerror = function(evt) { onError(evt); };
+    return websocket;
+}
+function getConfiguration(websocket) {
+	sendWsMessage(websocket, "{\"action\": \"getConfiguration\";}");
+}
+function sendWsMessage(ws, msg){
+    // Wait until the state of the socket is not ready and send the message when it is...
+    waitForSocketConnection(ws, function() {
+        ws.send(msg);
+    });
+}
+function waitForSocketConnection(socket, callback) {
+	var sendWsMessage = function(socket, callback) {
+		if (socket.readyState === socket.OPEN) {
+			if (callback != null){
+	    	   callback();
+			}
+			return true;
+		}
+		return false;
+	};
+	if (sendWsMessage(socket, callback)) {
+		return;
+	}
+    setTimeout(function() {
+        if (!sendWsMessage(socket, callback)) {
+            console.log("Waiting for websocket connection...");
+            waitForSocketConnection(socket);
+        }
+    }, 100);
+}
+function onOpen(evt) {
+    console.debug("Opening connection to websocket");
+}
+function onClose(evt) {
+    console.debug("Closing connection to websocket");
+}
+function onMessage(evt) {
+	var jsonString = evt.data;
+	console.debug('Configuration returned by server: ', jsonString);
+	var jsonData = jQuery.parseJSON(jsonString);
+	if (!jsonData.action) {
+		console.warn("Invalid server response. No action attribute set");
+		return;
+	}
+	if (jsonData.action === "getConfiguration") {
+		readConfiguration(jsonData);
+	}
+}
+function onError(evt) {
+    console.error('Could not get data from configuration websocket');
+    console.warn('Error data: ' + evt.data);
+}
+function readConfiguration(data) {
+	// reads the enabled datasets and stores them in a client side config
+	// hashtable
+	// each dataset contains:
+	// - pointQ the a 2D-coordinate of the query point
+	// - timeQ the arrival or departure time of the query point
+	// - bbox the spatial extent of the specified area
+	var datasets = data.defaultDatasets;
+	for ( var i = 0; i < datasets.length; i++) {
+		var dataset = datasets[i];
+		var cfgData = {
+			queryPoint : new L.LatLng(dataset.queryPoint.x, dataset.queryPoint.y),
+			bbox : new L.Bounds(dataset.bbox[0], dataset.bbox[1], dataset.bbox[2], dataset.bbox[3]),
+			date : dataset.date,
+			time : dataset.time,
+			isoEdgeLayer : dataset.isoEdgeLayer,
+			isoVertexLayer : dataset.isoVertexLayer,
+			isoCoverageLayer : dataset.isoCoverageLayer,
+			prefix : dataset.prefix
+		};
+		if (dataset.totalInhabitants) {
+			cfgData.totalInhabitants = dataset.totalInhabitants;
+		}
+		datasetCfgs[dataset.name] = cfgData;
+	}
+//	config.contextPath = data.contextPath;
+};
--- a/src/main/webapp/websocket.html
+++ b/src/main/webapp/websocket.html
+<!DOCTYPE html>
+<html>
+<head>
+	<title>WebSocket Test</title>
+    <meta charset="UTF-8" />
+    <script type="text/javascript">
+        var wsUri = "ws://localhost:8090/isochrone/websocket/getConfiguration";
+        var output;
+        function init() {
+            output = document.getElementById("output");
+            testWebSocket();
+        }
+        function testWebSocket() {
+            websocket = new WebSocket(wsUri);
+            websocket.onopen = function(evt) { onOpen(evt) };
+            websocket.onclose = function(evt) { onClose(evt) };
+            websocket.onmessage = function(evt) { onMessage(evt) };
+            websocket.onerror = function(evt) { onError(evt) };
+        }
+        function onOpen(evt) {
+            writeToScreen("CONNECTED");
+            doSend("{\"message\": \"WebSocket rocks\"}");
+        }
+        function onClose(evt) {
+            writeToScreen("DISCONNECTED");
+        }
+        function onMessage(evt) {
+            writeToScreen('<span style="color: blue;">RESPONSE: ' + evt.data + '</span>');
+            //websocket.close();
+        }
+        function onError(evt) {
+            writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
+        }
+        function doSend(message) {
+            writeToScreen("SENT: " + message);
+            websocket.send(message);
+        }
+        function writeToScreen(message) {
+            var pre = document.createElement("p");
+            pre.style.wordWrap = "break-word";
+            pre.innerHTML = message;
+            output.appendChild(pre);
+        }
+        window.addEventListener("load", init, false);
+    </script>
+</head>
+<body>
+    <h2>WebSocket Test</h2>
+    <div id="output"></div>
+</body>
+</html>
\ No newline at end of file