introduce ack message to prune message history

nicegui/air.py

@@ -179,6 +179,14 @@ def _handle_javascript_response(data: Dict[str, Any]) -> None:
             client = Client.instances[client_id]
             client.handle_javascript_response(data['msg'])
 
+        @self.relay.on('ack')
+        def _handle_ack(data: Dict[str, Any]) -> None:
+            client_id = data['client_id']
+            if client_id not in Client.instances:
+                return
+            client = Client.instances[client_id]
+            client.outbox.prune_history(data['next_message_id'])
+
         @self.relay.on('out_of_time')
         async def _handle_out_of_time() -> None:
             print('Sorry, you have reached the time limit of this NiceGUI On Air preview.', flush=True)

nicegui/nicegui.py

@@ -205,3 +205,11 @@ def _on_javascript_response(_: str, msg: Dict) -> None:
     if not client:
         return
     client.handle_javascript_response(msg)
+
+
+@sio.on('ack')
+def _on_ack(_: str, msg: Dict) -> None:
+    client = Client.instances.get(msg['client_id'])
+    if not client:
+        return
+    client.outbox.prune_history(msg['next_message_id'])

nicegui/outbox.py

@@ -143,6 +143,11 @@ def try_rewind(self, target_message_id: MessageId) -> None:
         if not self.client.shared:
             self.client.run_javascript('window.location.reload()')
 
+    def prune_history(self, next_message_id: MessageId) -> None:
+        """Prune the message history up to the given message ID."""
+        while self.message_history and self.message_history[0][0] < next_message_id:
+            self.message_history.popleft()
+
     def stop(self) -> None:
         """Stop the outbox loop."""
         self._should_stop = True

nicegui/static/nicegui.js

@@ -265,6 +265,15 @@ function download(src, filename, mediaType, prefix) {
   }
 }
 
+function ack() {
+  if (window.ackedMessageId >= window.nextMessageId) return;
+  window.socket.emit("ack", {
+    client_id: window.clientId,
+    next_message_id: window.nextMessageId,
+  });
+  window.ackedMessageId = window.nextMessageId;
+}
+
 async function loadDependencies(element, prefix, version) {
   if (element.component) {
     const { name, key, tag } = element.component;
@@ -306,6 +315,7 @@ window.onbeforeunload = function () {
 
 function createApp(elements, options) {
   replaceUndefinedAttributes(elements, 0);
+  setInterval(() => ack(), 3000);
   return (app = Vue.createApp({
     data() {
       return {
@@ -321,6 +331,7 @@ function createApp(elements, options) {
       const url = window.location.protocol === "https:" ? "wss://" : "ws://" + window.location.host;
       window.path_prefix = options.prefix;
       window.nextMessageId = options.query.next_message_id;
+      window.ackedMessageId = -1;
       window.socket = io(url, {
         path: `${options.prefix}/_nicegui_ws/socket.io`,
         query: options.query,