add SSE for receiving failsafe status

api/index.js

@@ -2,19 +2,49 @@ var express = require("express");
 var app = express();
 const WebSocket = require("ws");
 
+//# TODO SSE https://www.digitalocean.com/community/tutorials/nodejs-server-sent-events-build-realtime-app
+
 var last_status = {};
 var last_image;
 var received_picture = false;
 var received_error = false;
 
+let sse_clients = [];
+
 app.use(express.static("public"));
 app.use(express.json());
 
 var ws;
 var api_connected = false;
 
+function send_events_to_clients(data) {
+    sse_clients.forEach(client => client.response.write(`data: ${JSON.stringify(data)}\n\n`));
+}
+
+function handle_sse_client(request, response, next) {
+  const headers = {
+    "Content-Type": "text/event-stream",
+    'Connection': "keep-alive",
+    "Cache-Control": "no-cache",
+  };
+    // response.writeHead(200, headers);
+    // response.write("yeet\n\n");
+    const clientID = Date.now();
+    const newClient = {
+        id: clientID,
+        response
+    };
+
+    sse_clients.push(newClient);
+
+    request.on("close", () => {
+        console.log(`${clientID} Connection closed`);
+        sse_clients = sse_clients.filter(client => client.id !== clientID);
+    });
+}
+
 var connect_to_api = function () {
-    console.log("Connecting to API")
+  console.log("Connecting to API");
   ws = new WebSocket("ws://10.100.0.40:9001/");
 
   ws.on("open", function open() {
@@ -27,6 +57,7 @@ var connect_to_api = function () {
       var msg = JSON.parse(message);
       if (msg.type == "STATUS") {
           last_status = msg.data;
+          send_events_to_clients(message);
       } else if (msg.type == "IMAGE") {
         console.log("got picture");
         // console.log(msg.image);
@@ -34,18 +65,16 @@ var connect_to_api = function () {
         received_picture = true;
       }
     } catch (error) {
-            console.log("could not parse as json")
+      console.log("could not parse as json");
-
     }
   });
 
   ws.on("error", function error(err) {
-        console.log("there was an error")
+    console.log("there was an error");
     console.error("error: " + err);
     received_error = true;
   });
-}
+};
-
 
 // set the view engine to ejs
 app.set("view engine", "ejs");
@@ -61,12 +90,14 @@ app.get("/status", function (req, res) {
   res.status(200).json(last_status);
 });
 
+app.get("/events", handle_sse_client);
+
 app.get("/image", function (req, res) {
   console.log("got picture request");
   var request = JSON.stringify({
-    command: 5
+    command: 5,
   });
-  console.log("sending picture request")
+  console.log("sending picture request");
   ws.send(request);
   res.status(200).send(last_image);
 });
@@ -78,7 +109,7 @@ app.post("/move", function (req, res) {
     up_down: req.body.up_down,
     left_right: req.body.left_right,
     forward_backward: req.body.forward_backward,
-    yaw: req.body.turn_left_right
+    yaw: req.body.turn_left_right,
   });
   ws.send(request);
 });
@@ -94,7 +125,6 @@ app.get("/connect", function (req, res) {
       res.status(400).json({ connected: false });
     }
   }, 1000);
-    
 });
 
 app.listen(8080);

api/views/index.ejs

@@ -60,6 +60,12 @@
 <script>
     var update_status = setInterval(update_status, 1000);
     assign_button_callbacks();
+    const events = new EventSource("/events");
+    events.onmessage = (event) => {
+        const parsedData = JSON.parse(event.data);
+        console.log("RECEIVED EVENT");
+        console.log(parsedData);
+    }
 
     function assign_button_callbacks() {
         var buttons = document.getElementsByClassName("movebutton");

src/api_communication/api_communication/api_listener.py

@@ -16,6 +16,8 @@ import base64
 # communication: client always sends commands that have a command id.
 # server always sends messages back that have a message type
 
+# TODO send video https://github.com/Jatin1o1/Python-Javascript-Websocket-Video-Streaming-/tree/main
+
 
 class RequestCommand(Enum):
     GET_COMMANDS_TYPES = -1  # to get the available commands and types