Only send messages the client hasn't seen before

We also only keep 200 messages in memory on the server.

debugging_tool/server.py

@@ -4,10 +4,18 @@ from time import sleep
 from dataclasses import dataclass
 from datetime import datetime
 import serial
+import uuid
+from collections import deque
 
 app = Flask(__name__)
-shared_message_log = []
 
+last_message_index = -1
+# Keep this the same as max_messages on the client!
+max_message_cache = 200
+shared_message_log = deque(maxlen=max_message_cache)
+
+server_id = uuid.uuid4()
+print("Server ID: ", server_id)
 
 @dataclass
 class Message:
@@ -80,7 +88,8 @@ class Message:
         }
 
 
-def serial_reader(messagelog):
+def serial_reader(messagelog, message_index):
+    global last_message_index
     with serial.Serial('/dev/ttyACM0', 115200, timeout=10) as ser:
         while True:
             line = ser.readline()
@@ -93,18 +102,26 @@ def serial_reader(messagelog):
                 message = bytes(int(p) for p in parts[2:])
                 received = Message(message, sender, datetime.now(), len(messagelog))
                 messagelog.append(received.serialize())
-                print(len(messagelog))
+                last_message_index += 1
+                print(last_message_index)
 
 @app.route('/')
 def index():
     return send_file('static/index.html')
 
-@app.route('/api.json')
+@app.route('/<last_received>/api.json')
-def api():
+def api(last_received):
-    return jsonify(shared_message_log)
+    last_received = int(last_received)
+    if last_received < last_message_index - max_message_cache:
+        return jsonify({"server_id": server_id, "newest_msg": last_message_index, "messages": list(shared_message_log)})
+    else:
+        return jsonify({"server_id": server_id, "newest_msg": last_message_index, "messages": list(shared_message_log)[max_message_cache - (last_message_index - last_received):]})
 
+@app.route('/max_messages.json')
+def get_max_messages():
+    return jsonify([max_message_cache])
 
 if __name__ == '__main__':
-    thread = Thread(target=serial_reader, args=(shared_message_log, ))
+    thread = Thread(target=serial_reader, args=(shared_message_log, last_message_index,))
     thread.start()
     app.run(debug=False, host='0.0.0.0')

debugging_tool/static/index.html

@@ -9,6 +9,9 @@
 			font-family: sans-serif;
 		}
 
+		button {
+			margin-bottom: 8px;
+		}
 		.parsed {
 			background: lightgreen;
 		}
@@ -93,7 +96,7 @@
 		<label for="show_raw">Show raw address and payload</label>
 
 	<table id="message_table">
-		<tr>
+		<tr id="table_header">
 			<th>Human-readable type</th>
 			<th>Sender ID</th>
 			<th>Parsed payload</th>

debugging_tool/static/script.js

@@ -1,7 +1,14 @@
-let maxseen = 0;
+// Keep this the same as on the server!
+let max_messages = 200;
+
 let paused = true;
 let updaterID = null;
 
+let serverID = "";
+let newest_message_index = -1;
+let messageTable = document.getElementById('message_table');
+let header = document.getElementById("table_header").cloneNode(true);
+
 let color_classes = {
 	"RESERVED TYPE": "error",
 	"controller": "controller",
@@ -14,7 +21,7 @@ function updateShow() {
 }
 
 function updateMessages() {
-	fetch('/api.json')
+	fetch(`/${newest_message_index}/api.json`)
 	.then(
 		function(response) {
 			if (response.status !== 200) {
@@ -22,13 +29,19 @@ function updateMessages() {
 				return;
 			}
 			response.json().then(function(data) {
-				if (data.length > maxseen) {
+				if (serverID !== data.server_id) {
-					let messageTable = document.getElementById('message_table');
+					messageTable.textContent = '';
+					messageTable.append(header);
+					serverID = data.server_id;
+					newest_message_index = -1;
+				}
 
-					for (let i = maxseen; i < data.length; i++) {
+				let new_messages = data.newest_msg - newest_message_index;
+				if (new_messages > 0) {
+					for (let message of data.messages) {
 						let row = messageTable.insertRow(1);
 						row.classList.add("fade");
-						let current = data[i];
+						let current = message;
 
 						let human_readable_type = row.insertCell(0)
 						let colorblock = document.createElement("div");
@@ -64,8 +77,15 @@ function updateMessages() {
 						raw_id.classList.add("raw");
 						raw_id.classList.add("raw_id");
 					}
-					maxseen = data.length;
 				}
+
+				// delete children if there are too many :O
+				// -1 so we don't delete the header :)
+				for (let i = 0; i < messageTable.children.length - max_messages - 1; i++) {
+					messageTable.removeChild(messageTable.lastChild);
+				}
+				newest_message_index = data.newest_msg;
+
 			});
 		}
 	)