Merge pull request #20171 from gustavotrott/client-settings-cache-system

enhancement: Speed up the client loading (by implementing a cache system to obtain ClientSettings)

bbb-graphql-middleware/graphql.nginx

@@ -1,24 +0,0 @@
-location /graphql-test {
-  proxy_pass http://127.0.0.1:3000;
-  proxy_http_version 1.1;
-  proxy_set_header Upgrade $http_upgrade;
-  proxy_set_header Connection "Upgrade";
-}
-
-# Websocket connection
-location /v1/graphql {
-	proxy_http_version 1.1;
-	proxy_set_header Upgrade $http_upgrade;
-	proxy_set_header Connection "Upgrade";
-	proxy_set_header Host $host;
-	#proxy_pass         http://127.0.0.1:8080; #Hasura
-	proxy_pass         http://127.0.0.1:8378; #Graphql Middleware
-}
-
-location /api/rest {
-	proxy_http_version 1.1;
-	proxy_set_header Upgrade $http_upgrade;
-	proxy_set_header Connection "Upgrade";
-	proxy_set_header Host $host;
-	proxy_pass http://127.0.0.1:8080; #Hasura
-}

bbb-graphql-server/graphql.nginx

@@ -1,23 +0,0 @@
-location /graphql-test {
-  proxy_pass http://127.0.0.1:3000;
-  proxy_http_version 1.1;
-  proxy_set_header Upgrade $http_upgrade;
-  proxy_set_header Connection "Upgrade";
-}
-
-# Websocket connection
-location /v1/graphql {
-	proxy_http_version 1.1;
-	proxy_set_header Upgrade $http_upgrade;
-	proxy_set_header Connection "Upgrade";
-	proxy_set_header Host $host;
-	proxy_pass         http://127.0.0.1:8080; #Hasura
-}
-
-location /api/rest {
-	proxy_http_version 1.1;
-	proxy_set_header Upgrade $http_upgrade;
-	proxy_set_header Connection "Upgrade";
-	proxy_set_header Host $host;
-	proxy_pass         http://127.0.0.1:8080; #Hasura
-}

bbb-graphql-server/metadata/actions.graphql

@@ -59,6 +59,13 @@ type Mutation {
   ): Boolean
 }
 
+type Mutation {
+  captionSetOwner(
+    locale: String!
+    ownerUserId: String!
+  ): Boolean
+}
+
 type Mutation {
   captionSubmitText(
     transcriptId: String!
@@ -562,11 +569,3 @@ input GuestUserApprovalStatus {
   status: String!
 }
 
-type Mutation {
-  captionSetOwner(
-    locale: String!
-    ownerUserId: String!
-  ): Boolean
-}
-
-

bbb-graphql-server/metadata/actions.yaml

@@ -59,6 +59,12 @@ actions:
       handler: '{{HASURA_BBB_GRAPHQL_ACTIONS_ADAPTER_URL}}'
     permissions:
       - role: bbb_client
+  - name: captionSetOwner
+    definition:
+      kind: synchronous
+      handler: '{{HASURA_BBB_GRAPHQL_ACTIONS_ADAPTER_URL}}'
+    permissions:
+      - role: bbb_client
   - name: captionSubmitText
     definition:
       kind: synchronous
@@ -493,12 +499,6 @@ actions:
       handler: '{{HASURA_BBB_GRAPHQL_ACTIONS_ADAPTER_URL}}'
     permissions:
       - role: bbb_client
-  - name: captionSetOwner
-    definition:
-      kind: synchronous
-      handler: '{{HASURA_BBB_GRAPHQL_ACTIONS_ADAPTER_URL}}'
-    permissions:
-      - role: bbb_client
 custom_types:
   enums: []
   input_objects:

bbb-graphql-server/metadata/query_collections.yaml

@@ -32,3 +32,10 @@
               clientLog: clientSettingsJson(path: "$.public.clientLog")
             }
           }
+      - name: clientSettings
+        query: |
+          query clientStartupSettings {
+            meeting_clientSettings {
+              clientSettingsJson
+            }
+          }

bbb-graphql-server/metadata/rest_endpoints.yaml

@@ -1,3 +1,12 @@
+- comment: ""
+  definition:
+    query:
+      collection_name: allowed-queries
+      query_name: clientSettings
+  methods:
+    - GET
+  name: clientSettings
+  url: clientSettings
 - comment: ""
   definition:
     query:

bigbluebutton-html5/imports/ui/components/connection-manager/startup-data-fetch/component.tsx

@@ -60,10 +60,9 @@ const StartupDataFetch: React.FC<StartupDataFetchProps> = ({
       setLoading(false);
       return;
     }
-    const clientStartupSettings = '/api/rest/clientStartupSettings/';
+    const clientStartupSettings = `/api/rest/clientStartupSettings/?sessionToken=${sessionToken}`;
     const url = new URL(`${window.location.origin}${clientStartupSettings}`);
-    const headers = new Headers({ 'X-Session-Token': sessionToken, 'Content-Type': 'application/json' });
+    fetch(url, { method: 'get' })
-    fetch(url, { method: 'get', headers })
       .then((resp) => resp.json())
       .then((data: Response) => {
         const settings = data.meeting_clientSettings[0];

bigbluebutton-html5/imports/ui/components/settings-loader/component.tsx

@@ -1,6 +1,4 @@
 import React, { useContext, useEffect } from 'react';
-import { useQuery } from '@apollo/client';
-import { getBigBlueButtonSettings, getBigBlueButtonSettingsResponse } from './queries';
 import { setMeetingSettings } from '../../core/local-states/useMeetingSettings';
 import MeetingClientSettings from '../../Types/meetingClientSettings';
 import ClientStartup from '/client/clientStartup';
@@ -8,6 +6,12 @@ import { LoadingContext } from '../common/loading-screen/loading-screen-HOC/comp
 import CustomUsersSettings from '../join-handler/custom-users-settings/component';
 import logger from '/imports/startup/client/logger';
 
+interface Response {
+  meeting_clientSettings: Array<{
+    clientSettingsJson: MeetingClientSettings,
+  }>
+}
+
 declare global {
   interface Window {
     meetingClientSettings: MeetingClientSettings;
@@ -15,7 +19,6 @@ declare global {
 }
 
 const SettingsLoader: React.FC = () => {
-  const { loading, error, data } = useQuery<getBigBlueButtonSettingsResponse>(getBigBlueButtonSettings);
   const [allowToRender, setAllowToRender] = React.useState(false);
   const loadingContextInfo = useContext(LoadingContext);
   useEffect(() => {
@@ -24,22 +27,26 @@ const SettingsLoader: React.FC = () => {
   }, []);
 
   useEffect(() => {
-    if (!loading && !error) {
+    const urlParams = new URLSearchParams(window.location.search);
-      const settings = data?.meeting[0].clientSettings.clientSettingsJson;
+    const sessionToken = urlParams.get('sessionToken');
-      if (settings && Object.keys(settings).length > 0) {
+    const clientStartupSettings = `/api/rest/clientSettings/?sessionToken=${sessionToken}`;
+    const url = new URL(`${window.location.origin}${clientStartupSettings}`);
+    fetch(url, { method: 'get' })
+      .then((resp) => resp.json())
+      .then((data: Response) => {
+        const settings = data?.meeting_clientSettings[0].clientSettingsJson;
+
         window.meetingClientSettings = JSON.parse(JSON.stringify(settings as unknown as MeetingClientSettings));
         const Meteor = { settings: {} };
         Meteor.settings = window.meetingClientSettings;
         setMeetingSettings(settings as unknown as MeetingClientSettings);
         setAllowToRender(true);
-      }
+      }).catch(() => {
-    }
+        loadingContextInfo.setLoading(false, '');
-  }, [loading]);
+        throw new Error('Error on requesting client settings data.');
-  if (loading) return null;
+      });
-  if (error) {
+    // }
-    loadingContextInfo.setLoading(false, '');
+  }, []);
-    throw new Error('Error on requesting meeting settings data: ', error);
-  }
   return (
     (allowToRender)
       ? (

bigbluebutton-html5/imports/ui/components/settings-loader/queries.ts

@@ -1,27 +0,0 @@
-import { gql } from '@apollo/client';
-
-export interface getBigBlueButtonSettingsResponse {
-  meeting: Meeting[]
-}
-
-interface ClientSettings {
-  clientSettingsJson: string; // You might need to adjust the type based on the actual JSON structure
-}
-
-interface Meeting {
-    clientSettings: ClientSettings;
-}
-
-export const getBigBlueButtonSettings = gql`
-  query getClientSettings {
-    meeting {
-      clientSettings {
-        clientSettingsJson
-      }
-    }
-  }
-`;
-
-export default {
-  getBigBlueButtonSettings,
-};

build/packages-template/bbb-graphql-middleware/bbb-graphql-client-settings-cache.conf

@@ -0,0 +1 @@
+proxy_cache_path /tmp/hasura-client-settings-cache levels=1:2 keys_zone=client_settings_cache:64m inactive=2880m use_temp_path=off;

build/packages-template/bbb-graphql-middleware/build.sh

@@ -28,12 +28,15 @@ echo "Build of bbb-graphql-middleware finished"
 
 cp bbb-graphql-middleware staging/usr/local/bin/bbb-graphql-middleware
 
+mkdir -p staging/etc/nginx/conf.d
+cp bbb-graphql-client-settings-cache.conf staging/etc/nginx/conf.d
+
 # Create service bbb-graphql-middleware
-cp ./bbb-graphql-middleware-config.env staging/etc/default/bbb-graphql-middleware
+cp bbb-graphql-middleware-config.env staging/etc/default/bbb-graphql-middleware
-cp ./bbb-graphql-middleware.service staging/lib/systemd/system/bbb-graphql-middleware.service
+cp bbb-graphql-middleware.service staging/lib/systemd/system/bbb-graphql-middleware.service
 
 # Set nginx location
-cp ./graphql.nginx staging/usr/share/bigbluebutton/nginx
+cp graphql.nginx staging/usr/share/bigbluebutton/nginx
 
 . ./opts-$DISTRO.sh
 

build/packages-template/bbb-graphql-middleware/graphql.nginx

@@ -0,0 +1,54 @@
+location /graphql-test {
+  proxy_pass http://127.0.0.1:3000;
+  proxy_http_version 1.1;
+  proxy_set_header Upgrade $http_upgrade;
+  proxy_set_header Connection "Upgrade";
+}
+
+# Websocket connection
+location /v1/graphql {
+	proxy_http_version 1.1;
+	proxy_set_header Upgrade $http_upgrade;
+	proxy_set_header Connection "Upgrade";
+	proxy_set_header Host $host;
+	#proxy_pass         http://127.0.0.1:8080; #Hasura
+	proxy_pass         http://127.0.0.1:8378; #Graphql Middleware
+}
+
+location /api/rest {
+	proxy_http_version 1.1;
+	proxy_set_header Upgrade $http_upgrade;
+	proxy_set_header Connection "Upgrade";
+	proxy_set_header Host $host;
+	proxy_pass http://127.0.0.1:8080; #Hasura
+}
+
+#Set cache system for client settings
+location ~ ^/api/rest/(clientStartupSettings|clientSettings)/ {
+    #Store URL sessionToken once it will be injected as a header X-Session-Token
+    set $session_token "";
+    if ($args ~* "(?:^|&)sessionToken=([^&]+)") {
+        set $session_token $1;
+    }
+    auth_request /bigbluebutton/connection/checkAuthorization;
+    auth_request_set $meeting_id $sent_http_meeting_id;
+
+    #Remove sessionToken from URL once Hasura doesn't expect to receive it
+    if ($args ~* "^(.*&)?sessionToken=[^&]*(.*)$") {
+        set $args $1$2;
+    }
+
+    proxy_set_header x-session-token $session_token;
+    proxy_cache client_settings_cache;
+    proxy_cache_key "$request_uri|$meeting_id";
+    proxy_cache_use_stale updating;
+    proxy_cache_valid 24h;
+    proxy_cache_lock on;
+    add_header X-Cached $upstream_cache_status;
+
+    proxy_http_version 1.1;
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection "Upgrade";
+    proxy_set_header Host $host;
+    proxy_pass http://127.0.0.1:8080; #Hasura
+}

build/packages-template/bbb-graphql-server/build.sh

@@ -31,7 +31,7 @@ cp -r hasura-graphql staging/usr/local/bin/hasura-graphql-engine
 cp -r hasura-config.env staging/etc/default/bbb-graphql-server
 cp -r bbb_schema.sql metadata config.yaml staging/usr/share/bbb-graphql-server
 
-cp ./bbb-graphql-server.service staging/lib/systemd/system/bbb-graphql-server.service
+cp bbb-graphql-server.service staging/lib/systemd/system/bbb-graphql-server.service
 
 mkdir -p hasura-cli
 cd hasura-cli