How to use the @microsoft/signalr-protocol-msgpack.MessagePackHubProtocol function in @microsoft/signalr-protocol-msgpack

it("skips Server-Sent Events when negotiating for MessagePack protocol", async (done) => {
        const hubConnection = getConnectionBuilder(undefined, TESTHUB_NOWEBSOCKETS_ENDPOINT_URL)
            .withHubProtocol(new MessagePackHubProtocol())
            .build();

        try {
            await hubConnection.start();

            // Check what transport was used by asking the server to tell us.
            expect(await hubConnection.invoke("GetActiveTransportName")).toEqual("LongPolling");

            await hubConnection.stop();
            done();
        } catch (e) {
            fail(e);
        }
    });

export function eachTransportAndProtocol(action: (transport: HttpTransportType, protocol: IHubProtocol) => void) {
    const protocols: IHubProtocol[] = [new JsonHubProtocol()];
    // Run messagepack tests in Node and Browsers that support binary content (indicated by the presence of responseType property)
    if (typeof XMLHttpRequest === "undefined" || typeof new XMLHttpRequest().responseType === "string") {
        // Because of TypeScript stuff, we can't get "ambient" or "global" declarations to work with the MessagePackHubProtocol module
        // This is only a limitation of the .d.ts file.
        // Everything works fine in the module
        protocols.push(new MessagePackHubProtocol());
    }
    getHttpTransportTypes().forEach((t) => {
        return protocols.forEach((p) => {
            if (t !== HttpTransportType.ServerSentEvents || !(p instanceof MessagePackHubProtocol)) {
                return action(t, p);
            }
        });
    });
}

async function initializeConnection(options: CircuitStartOptions, logger: Logger, circuit: CircuitDescriptor): Promise {
  const hubProtocol = new MessagePackHubProtocol();
  (hubProtocol as unknown as { name: string }).name = 'blazorpack';

  const connectionBuilder = new signalR.HubConnectionBuilder()
    .withUrl('_blazor')
    .withHubProtocol(hubProtocol);

  options.configureSignalR(connectionBuilder);

  const connection = connectionBuilder.build();

  setEventDispatcher((descriptor, args) => {
    connection.send('DispatchBrowserEvent', JSON.stringify(descriptor), JSON.stringify(args));
  });

  // Configure navigation via SignalR
  window['Blazor']._internal.navigationManager.listenForNavigationEvents((uri: string, intercepted: boolean): Promise => {

showPathClientIds: [],
            followingClientId: null,
            moreInfoClientIds: [],
            flightPlanClientId: null,
            isDark: pref ? pref.isDark : false,
            map3D: pref ? pref.map3D : false,
            mapTileType: pref ? pref.mapTileType : MapTileType.OpenStreetMap,
            movingPosition: null
        }

        this.map = !this.state.map3D ? new LeafletMap() : new MaptalksMap();

        this.hub = new signalr.HubConnectionBuilder()
            .withUrl('/FlightEventHub?clientType=Web')
            .withAutomaticReconnect()
            .withHubProtocol(new protocol.MessagePackHubProtocol())
            .build();

        this.handleControllerClick = this.handleControllerClick.bind(this);
        this.handleAircraftClick = this.handleAircraftClick.bind(this);

        this.handleIsDarkChanged = this.handleIsDarkChanged.bind(this);
        this.handleMapDimensionChanged = this.handleMapDimensionChanged.bind(this);
        this.handleTileTypeChanged = this.handleTileTypeChanged.bind(this);

        this.handleMeChanged = this.handleMeChanged.bind(this);
        this.handleShowPathChanged = this.handleShowPathChanged.bind(this);
        this.handleFollowingChanged = this.handleFollowingChanged.bind(this);
        this.handleMoreInfoChanged = this.handleMoreInfoChanged.bind(this);
        this.handleFlightPlanChanged = this.handleFlightPlanChanged.bind(this);

        this.handleAirportsLoaded = this.handleAirportsLoaded.bind(this);

constructor(props: IGameProps) {
        super(props);

        const location = document.location || new Location();
        const connection = new signalR.HubConnectionBuilder()
            .withUrl(`${location.origin}/gameHub`,
                { transport: signalR.HttpTransportType.WebSockets, skipNegotiation: true })
            .configureLogging(signalR.LogLevel.Information)
            .withAutomaticReconnect()
            .withHubProtocol(new MessagePackHubProtocol())
            .build();

        connection.onclose = e => {
            if (e) {
              this.addError(`Connection closed with error: "${(e || '')}"`);
            } else {
                this.addMessage(MessageType.Info, 'Disconnected');
            }
        };

        connection.onreconnecting((e) => {
          this.addMessage(MessageType.Info, `Connection lost ("${e}"). Reconnecting.`);
        });

        connection.onreconnected(() => {
          this.addMessage(MessageType.Info, 'Connection reestablished.');

resolve(token);
          } else {
            reject();
          }
        })
      }
    }

    if (this._hubConnections[connectionId]) return;

    let connectionBuilder = new signalR.HubConnectionBuilder()
      .withUrl(url, options);

    if (httpConnectionOptions.invokeMethod('get_EnableMessagePack')) {
      connectionBuilder
        .withHubProtocol(new sianglRMessagePack.MessagePackHubProtocol());
    }

    this._hubConnections.set(connectionId, connectionBuilder.build());
  }