From e16fc0c7cddb8b40eb38ae79e85f7e8a12c47941 Mon Sep 17 00:00:00 2001
From: Sami Mokaddem <mokaddem.sami@gmail.com>
Date: Wed, 3 Jul 2024 13:30:12 +0200
Subject: [PATCH] new: [app] Added keepalive messages

---
 server.py                                   | 15 +++++++++-
 src/components/TheSocketConnectionState.vue | 33 +++++++++++++++------
 src/socket.js                               |  8 ++++-
 3 files changed, 45 insertions(+), 11 deletions(-)

diff --git a/server.py b/server.py
index 0897359..5c5278d 100755
--- a/server.py
+++ b/server.py
@@ -18,6 +18,7 @@ import misp_api
 
 
 ZMQ_MESSAGE_COUNT = 0
+ZMQ_LAST_TIME = None
 
 
 def debounce(debounce_seconds: int = 1):
@@ -182,15 +183,26 @@ async def getDiagnostic() -> dict:
     return diagnostic
 
 
+async def keepalive():
+    global ZMQ_LAST_TIME
+    while True:
+        await sio.sleep(5)
+        payload = {
+            'zmq_last_time': ZMQ_LAST_TIME,
+        }
+        await sio.emit('keep_alive', payload)
+
+
 # Function to forward zmq messages to Socket.IO
 async def forward_zmq_to_socketio():
-    global ZMQ_MESSAGE_COUNT
+    global ZMQ_MESSAGE_COUNT, ZMQ_LAST_TIME
 
     while True:
         message = await zsocket.recv_string()
         topic, s, m = message.partition(" ")
         try:
             ZMQ_MESSAGE_COUNT += 1
+            ZMQ_LAST_TIME = time.time()
             await handleMessage(topic, s, m)
         except Exception as e:
             logger.error('Error handling message %s', e)
@@ -198,6 +210,7 @@ async def forward_zmq_to_socketio():
 
 async def init_app():
     sio.start_background_task(forward_zmq_to_socketio)
+    sio.start_background_task(keepalive)
     return app
 
 
diff --git a/src/components/TheSocketConnectionState.vue b/src/components/TheSocketConnectionState.vue
index b5c1dd8..8f53436 100644
--- a/src/components/TheSocketConnectionState.vue
+++ b/src/components/TheSocketConnectionState.vue
@@ -1,16 +1,31 @@
 <script setup>
-  import { socketConnected } from "@/socket";
+  import { computed } from "vue"
+  import { socketConnected, zmqLastTime } from "@/socket";
+
+  const zmqLastTimeSecond = computed(() => {
+    return parseInt(((new Date()).getTime() - zmqLastTime.value * 1000) / 1000)
+  })
 
 </script>
 
 <template>
-  <span :class="{
-    'px-2 py-1 rounded-md inline-block w-48': true,
-    'text-slate-900 dark:text-slate-400': socketConnected,
-    'text-slate-50 bg-red-600': !socketConnected,
-  }">
-    <span class="mr-1">Socket.IO:</span>
-    <span v-show="socketConnected" class="font-semibold text-green-600 dark:text-green-400">Connected</span>
-    <span v-show="!socketConnected" class="font-semibold text-slate-50">Disconnected</span>
+  <span class="flex flex-col justify-center mt-1">
+    <span :class="{
+      'px-2 rounded-md inline-block w-48 leading-4': true,
+      'text-slate-900 dark:text-slate-400': socketConnected,
+      'text-slate-50 bg-red-600': !socketConnected,
+    }">
+      <span class="mr-1">Socket.IO:</span>
+      <span v-show="socketConnected" class="font-semibold text-green-600 dark:text-green-400">Connected</span>
+      <span v-show="!socketConnected" class="font-semibold text-slate-50">Disconnected</span>
+    </span>
+    <span class="text-xs font-thin leading-3 inline-block text-center">
+      <template v-if="zmqLastTimeSecond == 0">
+        online
+      </template>
+      <template v-else>
+        {{ zmqLastTimeSecond }}s
+      </template>
+    </span>
   </span>
 </template>
\ No newline at end of file
diff --git a/src/socket.js b/src/socket.js
index 4050097..bfafc74 100644
--- a/src/socket.js
+++ b/src/socket.js
@@ -18,7 +18,8 @@ const initial_state = {
 
 const state = reactive({ ...initial_state });
 const connectionState = reactive({ 
-  connected: false
+  connected: false,
+  zmq_last_time: false,
 })
 
 
@@ -40,6 +41,7 @@ export const notificationAPICounter = computed(() => state.notificationAPICounte
 export const userCount = computed(() => Object.keys(state.progresses).length)
 export const diagnostic = computed(() => state.diagnostic)
 export const socketConnected = computed(() => connectionState.connected)
+export const zmqLastTime = computed(() => connectionState.zmq_last_time)
 
 export function resetState() {
   Object.assign(state, initial_state);
@@ -188,6 +190,10 @@ socket.on("refresh_score", (new_user) => {
   debouncedGetProgress()
 });
 
+socket.on("keep_alive", (keep_alive) => {
+  connectionState.zmq_last_time = keep_alive['zmq_last_time']
+});
+
 function addLimited(target, message, maxCount) {
   target.unshift(message)
   if (target.length > maxCount) {