Client test code for new rtt calc

bbb-graphql-client-test/src/Auth.js

@@ -139,11 +139,11 @@ export default function Auth() {
                     <span>You are online, welcome {curr.name} ({curr.userId})</span>
                     <button onClick={() => handleDispatchUserLeave()}>Leave Now!</button>
 
-                    {/*<MyInfo userAuthToken={curr.authToken} />*/}
-                    {/*<br />*/}
+                    <MyInfo userAuthToken={curr.authToken} />
+                    <br />
 
-                    {/*<MeetingInfo />*/}
-                    {/*<br />*/}
+                    <MeetingInfo />
+                    <br />
 
                     <TotalOfUsers />
                     <TotalOfModerators />

bbb-graphql-client-test/src/UserConnectionStatus.js

@@ -1,8 +1,10 @@
 import {gql, useMutation, useSubscription} from '@apollo/client';
-import React, {useEffect} from "react";
+import React, {useEffect, useState, useRef } from "react";
 import {applyPatch} from "fast-json-patch";
 
 export default function UserConnectionStatus() {
+    const networkRttInMs = useRef(null); // Ref to store the current timeout
+    const lastStatusUpdatedAtReceived = useRef(null); // Ref to store the current timeout
 
     //example specifying where and time (new Date().toISOString())
     //but its not necessary
@@ -18,13 +20,20 @@ export default function UserConnectionStatus() {
     // `);
 
 
+    const timeoutRef = useRef(null); // Ref to store the current timeout
+
+
+
     //where is not necessary once user can update only its own status
     //Hasura accepts "now()" as value to timestamp fields
     const [updateUserClientResponseAtToMeAsNow] = useMutation(gql`
-      mutation UpdateConnectionAliveAt($userId: String, $userClientResponseAt: timestamp) {
+      mutation UpdateConnectionClientResponse($networkRttInMs: numeric) {
         update_user_connectionStatus(
             where: {userClientResponseAt: {_is_null: true}}
-            _set: { userClientResponseAt: "now()" }
+            _set: { 
+                userClientResponseAt: "now()",
+                networkRttInMs: $networkRttInMs
+             }
           ) {
             affected_rows
           }
@@ -32,7 +41,11 @@ export default function UserConnectionStatus() {
     `);
 
     const handleUpdateUserClientResponseAt = () => {
-        updateUserClientResponseAtToMeAsNow();
+        updateUserClientResponseAtToMeAsNow({
+            variables: {
+                networkRttInMs: networkRttInMs.current
+            },
+        });
     };
 
 
@@ -48,11 +61,25 @@ export default function UserConnectionStatus() {
     `);
 
     const handleUpdateConnectionAliveAt = () => {
-        updateConnectionAliveAtToMeAsNow();
+        const startTime = performance.now();
 
-        setTimeout(() => {
+        try {
+            updateConnectionAliveAtToMeAsNow().then(result => {
+                const endTime = performance.now();
+                networkRttInMs.current = endTime - startTime;
+
+            });
+        } catch (error) {
+            console.error('Error performing mutation:', error);
+        }
+
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+
+        timeoutRef.current = setTimeout(() => {
             handleUpdateConnectionAliveAt();
-        }, 25000);
+        }, 5000);
     };
 
     useEffect(() => {
@@ -66,7 +93,8 @@ export default function UserConnectionStatus() {
       user_connectionStatus {
         connectionAliveAt
         userClientResponseAt
-        rttInMs
+        applicationRttInMs
+        networkRttInMs
         status
         statusUpdatedAt
       }
@@ -83,7 +111,8 @@ export default function UserConnectionStatus() {
             {/*<th>Id</th>*/}
             <th>connectionAliveAt</th>
             <th>userClientResponseAt</th>
-            <th>rttInMs</th>
+            <th>applicationRttInMs</th>
+            <th>networkRttInMs</th>
             <th>status</th>
             <th>statusUpdatedAt</th>
         </tr>
@@ -92,12 +121,17 @@ export default function UserConnectionStatus() {
         {data.user_connectionStatus.map((curr) => {
             // console.log('user_connectionStatus', curr);
 
-            if(curr.userClientResponseAt == null) {
-                // handleUpdateUserClientResponseAt();
-                const delay = 500;
-                setTimeout(() => {
+            console.log('curr.statusUpdatedAt',curr.statusUpdatedAt);
+            console.log('lastStatusUpdatedAtReceived.current',lastStatusUpdatedAtReceived.current);
+
+            if(curr.userClientResponseAt == null
+                && (curr.statusUpdatedAt == null || curr.statusUpdatedAt !== lastStatusUpdatedAtReceived.current)) {
+
+
+
+                lastStatusUpdatedAtReceived.current = curr.statusUpdatedAt;
+                // setLastStatusUpdatedAtReceived(curr.statusUpdatedAt);
                 handleUpdateUserClientResponseAt();
-                },delay);
             }
 
           return (
@@ -106,7 +140,8 @@ export default function UserConnectionStatus() {
                       <button onClick={() => handleUpdateConnectionAliveAt()}>Update now!</button>
                   </td>
                   <td>{curr.userClientResponseAt}</td>
-                  <td>{curr.rttInMs}</td>
+                  <td>{curr.applicationRttInMs}</td>
+                  <td>{curr.networkRttInMs}</td>
                   <td>{curr.status}</td>
                   <td>{curr.statusUpdatedAt}</td>
               </tr>

bbb-graphql-client-test/src/UserConnectionStatusReport.js

@@ -33,7 +33,7 @@ export default function UserConnectionStatusReport() {
       </thead>
       <tbody>
         {data.user_connectionStatusReport.map((curr) => {
-            console.log('user_connectionStatusReport', curr);
+            //console.log('user_connectionStatusReport', curr);
           return (
               <tr key={curr.user.userId}>
                   <td>{curr.user.name}</td>