Added Uptime example combining WebSocket and BrowserUI

lf-lang · Feb 25, 2024 · 11f134b · 11f134b
1 parent b5b3a18
commit 11f134b
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 0 deletions.
diff --git a/examples/C/src/browser-ui/Uptime.lf b/examples/C/src/browser-ui/Uptime.lf
@@ -0,0 +1,53 @@
+/**
+ * FIXME.
+ * http://localhost:8080
+ *
+ * @author Edward A. Lee
+ */
+target C {
+  build-type: debug,
+  keepalive: true
+}
+
+import ServerUI from "../lib/ServerUI.lf"
+import WebSocketServer from "../lib/WebSocketServer.lf"
+
+main reactor {
+  timer seconds(0, 1s)
+
+  state count: int = 0
+
+  s = new ServerUI(hostport = 8080, initial_file = "Uptime.html")
+  w = new WebSocketServer()
+
+  reaction(startup) {=
+    lf_print("Point your browser to http://localhost:8080");
+  =}
+
+  reaction(s.initialized) {=
+    self->count++; // Count the number of connections.
+  =}
+
+  reaction(seconds) -> w.send {=
+    instant_t uptime = lf_time_logical_elapsed();
+    // Truncate to the nearest second.
+    uptime = (uptime / SEC(1)) * SEC(1);
+    char* message = (char*)malloc(LF_TIME_BUFFER_LENGTH * sizeof(char));
+    size_t length = lf_readable_time(message, uptime);
+
+    // Broadcast to all connected sockets.  This is accomplished by providing a NULL wsi.
+    web_socket_message_t* to_send = (web_socket_message_t*)malloc(sizeof(web_socket_message_t));
+    to_send->wsi = NULL;
+    to_send->length = length;
+    to_send->message = message;
+    lf_set(w.send, to_send);
+  =}
+
+  reaction(w.connected) {=
+    if (w.connected->value.connected) {
+      lf_print("======== Connected a new client: %p", w.connected->value.wsi);
+    } else {
+      lf_print("======== Disconnected client: %p", w.connected->value.wsi);
+    }
+  =}
+}
diff --git a/examples/C/src/browser-ui/uptime.html b/examples/C/src/browser-ui/uptime.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <head><title>Uptime Lingua Franca</title></head>
+  <body>
+    <h1>The Uptime Lingua Franca program has been running for:</h1>
+    <h1 id="uptime">No data yet</h1>
+    This page connects to a Lingua Franca program that feeds it time data through a web socket.
+    <p id="status">Not connected</p>
+    <script>
+window.onload = function() {
+
+  // Change the address here to that of the hosting machine.
+  const socket = new WebSocket('ws://localhost:8000', 'ws');
+
+  // Get references to elements on the page.
+  var uptime = document.getElementById('uptime');
+  var status = document.getElementById('status');
+
+  socket.addEventListener('open', (event) => {
+    console.log('WebSocket connection established');
+    status.innerHTML = 'Connected to: ' + event.currentTarget.url;
+  });
+
+  socket.onerror = function(error) {
+    console.log('WebSocket Error: ' + error);
+    status.innerHTML = 'Not connected';
+  };
+
+  // Handle messages sent by the server.
+  socket.onmessage = function(event) {
+    uptime.innerHTML = event.data;
+  };
+
+  // Show a disconnected message when the WebSocket is closed.
+  socket.onclose = function(event) {
+    event.preventDefault();
+    status.innerHTML = 'Not connected';
+  };
+};
+    </script>
+  </body>
+</html>