From 7be161a74cc093c09200061c639c05d4ba4eb62d Mon Sep 17 00:00:00 2001
From: Nikolaus Krismer <niko@krismer.de>
Date: Fri, 7 Feb 2014 14:41:11 +0100
Subject: [PATCH] using html5 websockets (also on client side) to replace
cometd
---
src/main/webapp/css_new/geosearch.css | 4 +-
src/main/webapp/css_new/isoga.css | 4 +-
src/main/webapp/index_new.html | 9 ++-
src/main/webapp/js_new/websocket.js | 104 ++++++++++++++++++++++++++
src/main/webapp/websocket.html | 60 +++++++++++++++
5 files changed, 176 insertions(+), 5 deletions(-)
create mode 100644 src/main/webapp/js_new/websocket.js
create mode 100644 src/main/webapp/websocket.html
diff --git a/src/main/webapp/css_new/geosearch.css b/src/main/webapp/css_new/geosearch.css
index b492ff0c..f9154532 100644
--- 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;
diff --git a/src/main/webapp/css_new/isoga.css b/src/main/webapp/css_new/isoga.css
index c3622f93..7373fff4 100644
--- 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;
}
diff --git a/src/main/webapp/index_new.html b/src/main/webapp/index_new.html
index b25b8185..ded08147 100644
--- 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">
diff --git a/src/main/webapp/js_new/websocket.js b/src/main/webapp/js_new/websocket.js
new file mode 100644
index 00000000..85ffaa50
--- /dev/null
+++ b/src/main/webapp/js_new/websocket.js
@@ -0,0 +1,104 @@
+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;
+};
diff --git a/src/main/webapp/websocket.html b/src/main/webapp/websocket.html
new file mode 100644
index 00000000..533069e5
--- /dev/null
+++ b/src/main/webapp/websocket.html
@@ -0,0 +1,60 @@
+<!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
--
GitLab