Fix: support cluster proxy setup for graphql API

The websocket connection to the graphql API needs to go directly to the
BBB server (bbb-html5) and it the middleware needs to accept requests
with a different origin.

bbb-graphql-middleware/bbb-graphql-middleware-config.env

@@ -1 +1,4 @@
 BBB_GRAPHQL_MIDDLEWARE_LISTEN_PORT=8378
+# If you are running a cluster proxy setup, you need to configure the Origin of
+# the frontend. See https://docs.bigbluebutton.org/administration/cluster-proxy
+# BBB_GRAPHQL_MIDDLEWARE_ORIGIN=bbb-proxy.example.com

bbb-graphql-middleware/internal/websrv/connhandler.go

@@ -11,6 +11,7 @@ import (
 	log "github.com/sirupsen/logrus"
 	"net/http"
 	"nhooyr.io/websocket"
+	"os"
 	"sync"
 	"time"
 )
@@ -41,6 +42,10 @@ func ConnectionHandler(w http.ResponseWriter, r *http.Request) {
 	// Add sub-protocol
 	var acceptOptions websocket.AcceptOptions
 	acceptOptions.Subprotocols = append(acceptOptions.Subprotocols, "graphql-ws")
+	bbbOrigin := os.Getenv("BBB_GRAPHQL_MIDDLEWARE_ORIGIN")
+	if bbbOrigin != "" {
+		acceptOptions.OriginPatterns = append(acceptOptions.OriginPatterns, bbbOrigin)
+	}
 
 	c, err := websocket.Accept(w, r, &acceptOptions)
 	if err != nil {

bigbluebutton-html5/imports/ui/components/graphql-provider/component.tsx

@@ -6,6 +6,7 @@ import { WebSocketLink } from '@apollo/client/link/ws';
 import { SubscriptionClient } from 'subscriptions-transport-ws';
 import React, { useEffect } from 'react';
 import Auth from '/imports/ui/services/auth';
+import { Meteor } from 'meteor/meteor';
 
 interface Props {
   children: React.ReactNode;
@@ -15,8 +16,14 @@ const GraphqlProvider = ({ children }: Props): React.ReactNode => {
   // const [link, setLink] = React.useState<WebSocketLink | null>(null);
   const [apolloClient, setApolloClient] = React.useState<ApolloClient<NormalizedCacheObject> | null>(null);
   useEffect(() => {
+    let GRAPHQL_URL = null;
+    if ('graphqlUrl' in Meteor.settings.public.app) {
+      GRAPHQL_URL = Meteor.settings.public.app.graphqlUrl;
+    } else {
+      GRAPHQL_URL = `wss://${window.location.hostname}/v1/graphql`;
+    }
     const wsLink = new WebSocketLink(
-      new SubscriptionClient(`wss://${window.location.hostname}/v1/graphql`, {
+      new SubscriptionClient(GRAPHQL_URL, {
         reconnect: true,
         timeout: 30000,
         connectionParams: {

docs/docs/administration/cluster-proxy.md

@@ -108,6 +108,7 @@ public:
     basename: '/bbb-01/html5client'
     bbbWebBase: 'https://bbb-01.example.com/bigbluebutton'
     learningDashboardBase: 'https://bbb-01.example.com/learning-dashboard'
+    graphqlUrl: wss://bbb-01.example.com/v1/graphql
   media:
     stunTurnServersFetchAddress: 'https://bbb-01.example.com/bigbluebutton/api/stuns'
     sip_ws_host: 'bbb-01.example.com'
@@ -185,6 +186,17 @@ Adjust the CORS settings in `/etc/default/bbb-web`:
 JDK_JAVA_OPTIONS="-Dgrails.cors.enabled=true -Dgrails.cors.allowCredentials=true -Dgrails.cors.allowedOrigins=https://bbb-proxy.example.org,https://https://bbb-01.example.com"
 ```
 
+Adjust the CORS setting in `/etc/default/bbb-graphql-middleware`:
+
+```shell
+BBB_GRAPHQL_MIDDLEWARE_LISTEN_PORT=8378
+# If you are running a cluster proxy setup, you need to configure the Origin of
+# the frontend. See https://docs.bigbluebutton.org/administration/cluster-proxy
+BBB_GRAPHQL_MIDDLEWARE_ORIGIN=bbb-proxy.example.org
+```
+
+Pay attention that this one is without protocol, just the hostname.
+
 
 Restart BigBlueButton: