Change: Change websocket lib to graphql-ws (#20282)

2024-05-22 15:51:12 -03:00 · 2024-05-22 15:51:12 -03:00 · 1aab2f5f29
commit 1aab2f5f29
parent df363ea32c
13 changed files with 35 additions and 73 deletions
--- a/bbb-graphql-middleware/demo/client/main.js
+++ b/bbb-graphql-middleware/demo/client/main.js
@ -31,7 +31,7 @@ ws.onopen = (event) => {
      
      const payload = { variables:{}, extensions: {}, query: query };
    //   console.log(`Sending: ${JSON.stringify(payload)}`);
-      ws.send(JSON.stringify({id:"1", type: "start", payload }));
+      ws.send(JSON.stringify({id:"1", type: "subscribe", payload }));
      
 }

--- a/bbb-graphql-middleware/internal/gql_actions/client.go
+++ b/bbb-graphql-middleware/internal/gql_actions/client.go
@ -49,7 +49,7 @@ RangeLoop:

 				var fromBrowserMessageAsMap = fromBrowserMessage.(map[string]interface{})

-				if fromBrowserMessageAsMap["type"] == "start" {
+				if fromBrowserMessageAsMap["type"] == "subscribe" {
 					queryId := fromBrowserMessageAsMap["id"].(string)
 					payload := fromBrowserMessageAsMap["payload"].(map[string]interface{})

@ -91,7 +91,7 @@ RangeLoop:
 						//Action sent successfully, return data msg to client
 						browserResponseData := map[string]interface{}{
 							"id":   queryId,
-							"type": "data",
+							"type": "next",
 							"payload": map[string]interface{}{
 								"data": map[string]interface{}{
 									mutationFuncName: true,
--- a/bbb-graphql-middleware/internal/hasura/client.go
+++ b/bbb-graphql-middleware/internal/hasura/client.go
@ -46,7 +46,7 @@ func HasuraClient(browserConnection *common.BrowserConnection, cookies []*http.C

 	// Add sub-protocol
 	var dialOptions websocket.DialOptions
-	dialOptions.Subprotocols = append(dialOptions.Subprotocols, "graphql-ws")
+	dialOptions.Subprotocols = append(dialOptions.Subprotocols, "graphql-transport-ws")

 	// Create cookie jar
 	jar, err := cookiejar.New(nil)
--- a/bbb-graphql-middleware/internal/hasura/conn/reader/reader.go
+++ b/bbb-graphql-middleware/internal/hasura/conn/reader/reader.go
@ -66,11 +66,11 @@ func handleMessageReceivedFromHasura(hc *common.HasuraConnection, fromHasuraToBr
 				common.ActivitiesOverviewCompleted("_Sum-" + string(subscription.Type))
 			}

-			if messageType == "data" {
+			if messageType == "next" {
 				common.ActivitiesOverviewDataReceived(string(subscription.Type) + "-" + subscription.OperationName)
 			}

-			if messageType == "data" &&
+			if messageType == "next" &&
 				subscription.Type == common.Subscription {
 				hasNoPreviousOccurrence := handleSubscriptionMessage(hc, messageMap, subscription, queryId)

--- a/bbb-graphql-middleware/internal/hasura/conn/writer/writer.go
+++ b/bbb-graphql-middleware/internal/hasura/conn/writer/writer.go
@ -55,7 +55,7 @@ RangeLoop:

 				var fromBrowserMessageAsMap = fromBrowserMessage.(map[string]interface{})

-				if fromBrowserMessageAsMap["type"] == "start" {
+				if fromBrowserMessageAsMap["type"] == "subscribe" {
 					var queryId = fromBrowserMessageAsMap["id"].(string)

 					//Identify type based on query string
@ -154,7 +154,7 @@ RangeLoop:
 					//saveItToFile(fmt.Sprintf("%s-%s-%02s", string(messageType), operationName, queryId), fromBrowserMessageAsMap)
 				}

-				if fromBrowserMessageAsMap["type"] == "stop" {
+				if fromBrowserMessageAsMap["type"] == "complete" {
 					var queryId = fromBrowserMessageAsMap["id"].(string)
 					browserConnection.ActiveSubscriptionsMutex.RLock()
 					jsonPatchSupported := browserConnection.ActiveSubscriptions[queryId].JsonPatchSupported
--- a/bbb-graphql-middleware/internal/websrv/connhandler.go
+++ b/bbb-graphql-middleware/internal/websrv/connhandler.go
@ -44,7 +44,7 @@ func ConnectionHandler(w http.ResponseWriter, r *http.Request) {

 	// Add sub-protocol
 	var acceptOptions websocket.AcceptOptions
-	acceptOptions.Subprotocols = append(acceptOptions.Subprotocols, "graphql-ws")
+	acceptOptions.Subprotocols = append(acceptOptions.Subprotocols, "graphql-transport-ws")
 	bbbOrigin := os.Getenv("BBB_GRAPHQL_MIDDLEWARE_ORIGIN")
 	if bbbOrigin != "" {
 		acceptOptions.OriginPatterns = append(acceptOptions.OriginPatterns, bbbOrigin)
--- a/bigbluebutton-html5/imports/ui/components/connection-manager/component.tsx
+++ b/bigbluebutton-html5/imports/ui/components/connection-manager/component.tsx
@ -1,8 +1,8 @@
 import {
  ApolloClient, ApolloProvider, InMemoryCache, NormalizedCacheObject, ApolloLink,
 } from '@apollo/client';
-import { WebSocketLink } from '@apollo/client/link/ws';
-import { SubscriptionClient } from 'subscriptions-transport-ws';
+import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
+import { createClient } from 'graphql-ws';
 import React, { useContext, useEffect } from 'react';
 import { LoadingContext } from '/imports/ui/components/common/loading-screen/loading-screen-HOC/component';
 import logger from '/imports/startup/client/logger';
@ -82,24 +82,24 @@ const ConnectionManager: React.FC<ConnectionManagerProps> = ({ children }): Reac

      let wsLink;
      try {
-        const subscription = new SubscriptionClient(graphqlUrl, {
-          reconnect: true,
-          timeout: 30000,
-          minTimeout: 30000,
+        const subscription = createClient({
+          url: graphqlUrl,
          connectionParams: {
            headers: {
              'X-Session-Token': sessionToken,
            },
          },
-        });
-        subscription.onError(() => {
+          on: {
+            error: (error) => {
              loadingContextInfo.setLoading(false, '');
-          throw new Error('Error: on subscription to server');
+              throw new Error(`Error: on subscription to server: ${JSON.stringify(error)}`);
+            },
+          },
        });
-        wsLink = new WebSocketLink(
+        const graphWsLink = new GraphQLWsLink(
          subscription,
        );
-        wsLink = ApolloLink.from([payloadSizeCheckLink, wsLink]);
+        wsLink = ApolloLink.from([payloadSizeCheckLink, graphWsLink]);
        wsLink.setOnError((error) => {
          loadingContextInfo.setLoading(false, '');
          throw new Error('Error: on apollo connection'.concat(JSON.stringify(error) || ''));
--- a/bigbluebutton-html5/imports/ui/components/meeting-ended/component.tsx
+++ b/bigbluebutton-html5/imports/ui/components/meeting-ended/component.tsx
@ -381,7 +381,7 @@ const MeetingEnded: React.FC<MeetingEndedProps> = ({
        // if not new connection is made
        apolloClient.setLink(ApolloLink.empty());
        // closes the connection
-        ws.close();
+        ws.terminate();
      }, 5000);
    }
  }, []);
--- a/bigbluebutton-html5/imports/ui/core/graphql/apolloContextHolder/apolloContextHolder.ts
+++ b/bigbluebutton-html5/imports/ui/core/graphql/apolloContextHolder/apolloContextHolder.ts
@ -1,10 +1,10 @@
 import { ApolloClient, NormalizedCacheObject } from '@apollo/client';
-import { SubscriptionClient } from 'subscriptions-transport-ws';
+import { Client } from 'graphql-ws';

 class ApolloContextHolder {
  private client: ApolloClient<NormalizedCacheObject> | null = null;

-  private link: SubscriptionClient | null = null;
+  private link: Client | null = null;

  public setClient(client: ApolloClient<NormalizedCacheObject>): void {
    this.client = client;
@ -17,11 +17,11 @@ class ApolloContextHolder {
    return this.client;
  }

-  public setLink(link: SubscriptionClient): void {
+  public setLink(link: Client): void {
    this.link = link;
  }

-  public getLink(): SubscriptionClient {
+  public getLink(): Client {
    if (!this.link) {
      throw new Error('SubscriptionClient has not been initialized yet');
    }
--- a/bigbluebutton-html5/imports/ui/core/graphql/queries/currentUserSubscription.ts
+++ b/bigbluebutton-html5/imports/ui/core/graphql/queries/currentUserSubscription.ts
@ -100,10 +100,6 @@ subscription userCurrentSubscription {
      pageId
      presentationId
    } 
-    welcomeMsgs {
-      welcomeMsg
-      welcomeMsgForModerators
-    }
  }
 }
 `;
--- a/bigbluebutton-html5/package-lock.json
+++ b/bigbluebutton-html5/package-lock.json
@ -3385,11 +3385,6 @@
        }
      }
    },
-    "backo2": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
-      "integrity": "sha512-zj6Z6M7Eq+PBZ7PQxl5NT665MvJdAkzp0f60nAJ+sLaSCBPMwVak5ZegFbgVCzFcCJTKFoMizvM5Ld7+JrRJHA=="
-    },
    "bail": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
@ -5114,6 +5109,11 @@
        "tslib": "^2.1.0"
      }
    },
+    "graphql-ws": {
+      "version": "5.16.0",
+      "resolved": "https://registry.npmjs.org/graphql-ws/-/graphql-ws-5.16.0.tgz",
+      "integrity": "sha512-Ju2RCU2dQMgSKtArPbEtsK5gNLnsQyTNIo/T7cZNp96niC1x0KdJNZV0TIoilceBPQwfb5itrGl8pkFeOUMl4A=="
+    },
    "hark": {
      "version": "1.2.3",
      "resolved": "https://registry.npmjs.org/hark/-/hark-1.2.3.tgz",
@ -5627,11 +5627,6 @@
      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
      "dev": true
    },
-    "iterall": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/iterall/-/iterall-1.3.0.tgz",
-      "integrity": "sha512-QZ9qOMdF+QLHxy1QIpUHUU1D5pS2CG2P69LF6L6CPjPYA/XMOmKV3PZpawHoAjHNyB0swdVTRxdYT4tbBbxqwg=="
-    },
    "js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@ -8763,30 +8758,6 @@
      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
    },
-    "subscriptions-transport-ws": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/subscriptions-transport-ws/-/subscriptions-transport-ws-0.11.0.tgz",
-      "integrity": "sha512-8D4C6DIH5tGiAIpp5I0wD/xRlNiZAPGHygzCe7VzyzUoxHtawzjNAY9SUTXU05/EY2NMY9/9GF0ycizkXr1CWQ==",
-      "requires": {
-        "backo2": "^1.0.2",
-        "eventemitter3": "^3.1.0",
-        "iterall": "^1.2.1",
-        "symbol-observable": "^1.0.4",
-        "ws": "^5.2.0 || ^6.0.0 || ^7.0.0"
-      },
-      "dependencies": {
-        "eventemitter3": {
-          "version": "3.1.2",
-          "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.2.tgz",
-          "integrity": "sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q=="
-        },
-        "symbol-observable": {
-          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
-          "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
-        }
-      }
-    },
    "supports-color": {
      "version": "5.5.0",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@ -9397,11 +9368,6 @@
      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
      "dev": true
    },
-    "ws": {
-      "version": "7.5.9",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q=="
-    },
    "xtend": {
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
--- a/bigbluebutton-html5/package.json
+++ b/bigbluebutton-html5/package.json
@ -60,6 +60,7 @@
    "flat": "^5.0.2",
    "focus-trap-react": "^10.2.1",
    "graphql": "^16.8.1",
+    "graphql-ws": "^5.16.0",
    "hark": "^1.2.3",
    "html-to-image": "^1.9.0",
    "immutability-helper": "~2.8.1",
@ -101,7 +102,6 @@
    "smile2emoji": "^3.8.3",
    "string-hash": "~1.1.3",
    "styled-components": "^5.3.3",
-    "subscriptions-transport-ws": "^0.11.0",
    "tippy.js": "^6.3.7",
    "use-context-selector": "^1.3.7",
    "uuid": "^9.0.0",
--- a/build/packages-template/bbb-graphql-middleware/graphql.nginx
+++ b/build/packages-template/bbb-graphql-middleware/graphql.nginx
@ -11,7 +11,7 @@ location /graphql {
 	proxy_set_header Upgrade $http_upgrade;
 	proxy_set_header Connection "Upgrade";
 	proxy_set_header Host $host;
-	#proxy_pass         http://127.0.0.1:8085; #Hasura
+	#proxy_pass         http://127.0.0.1:8085; #Hasura (it requires to change the location to /v1/graphql)
 	proxy_pass         http://127.0.0.1:8378; #Graphql Middleware
 }