1 files changed, 46 insertions, 19 deletions
diff --git a/site/obu.hamlet b/site/obu.hamlet
index d96b96f..9aec4c0 100644
--- a/site/obu.hamlet
+++ b/site/obu.hamlet
@@ -12,6 +12,7 @@
 <section>
   <h2>Status
   <p id="status">_{MsgNone}
+  <p id>_{MsgError}: <span id="error">
 
 
 <script>
@@ -34,6 +35,46 @@
   }
 
   let counter = 0;
+  let ws;
+  let id;
+
+  async function geoError(error) {
+    document.getElementById("status").innerText = "error";
+    alert(`_{MsgPermissionFailed}: \n${error.message}`);
+    console.log(error);
+  }
+
+  async function wsError(error) {
+    // alert(`_{MsgWebsocketError}: \n${error.message === undefined ? error.reason : error.message}`);
+    console.log(error);
+    navigator.geolocation.clearWatch(id);
+  }
+
+  async function wsClose(error) {
+    console.log(error);
+    document.getElementById("error").innerText = `websocket closed (reason: ${error.reason}). reconnecting …`;
+    navigator.geolocation.clearWatch(id);
+    setTimeout(openWebsocket, 1000);
+  }
+
+
+  function initGeopos() {
+    document.getElementById("error").innerText = "";
+    id = navigator.geolocation.watchPosition(
+      geoPing,
+      geoError,
+      {enableHighAccuracy: true}
+    );
+  }
+
+
+  function openWebsocket () {
+    ws = new WebSocket((location.protocol == "http:" ? "ws" : "wss") + "://" + location.host + "/api/train/ping/ws");
+    ws.onerror = wsError;
+    ws.onclose = wsClose;
+    ws.onmessage = (msg) => console.log(msg.data); // TODO: display delays etc.
+    ws.onopen = (event) => initGeopos();
+  }
 
   async function geoPing(geoloc) {
     console.log("got position update " + counter);
@@ -41,26 +82,16 @@
     document.getElementById("long").innerText = geoloc.coords.longitude;
     document.getElementById("acc").innerText = geoloc.coords.accuracy;
 
-    fetch(`/api/train/ping`, {
-      method: "POST",
-      body: JSON.stringify({
+    ws.send(JSON.stringify({
         token: token,
         lat: geoloc.coords.latitude,
         long: geoloc.coords.longitude,
         timestamp: (new Date()).toISOString()
-      }),
-      headers: {"Content-Type": "application/json"}
-    }).then((resp) => {
-      counter = counter + 1;
-      document.getElementById("status").innerText = `${counter}: sent`;
-    }).catch((error) => document.getElementById("status").innerText = error);
+    }));
+    counter += 1;
+    document.getElementById("status").innerText = `sent ${counter} pings`;
   }
 
-  async function geoError(error) {
-    document.getElementById("status").innerText = "error";
-    alert(`_{MsgPermissionFailed}: \n${error.message}`);
-    console.log(error);
-  }
 
   async function main() {
     let trip = await (await fetch("/api/trip/#{tripId}")).json();
@@ -81,11 +112,7 @@
 
       document.getElementById("token").innerText = token;
 
-      navigator.geolocation.watchPosition(
-        geoPing,
-        geoError,
-        {enableHighAccuracy: true}
-      );
+      openWebsocket();
     }
   }