new: [app] Added keepalive messages

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
 
 

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>

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) {