feat: add hubProtocol support to SignalR

src/signalr/context.ts

@@ -1,4 +1,4 @@
-import { HubConnectionState } from "@microsoft/signalr";
+import { HubConnectionState, IHubProtocol } from "@microsoft/signalr";
 import hermes from "hermes-channel";
 import { removeDuplicates, sendWithHermes } from "../utils";
 import { createUseSignalREffect } from "./hooks";
@@ -10,12 +10,14 @@ import { providerNativeFactory } from "./provider/providerNativeFactory";
 const SIGNAL_R_INVOKE = "SIGNAL_R_INVOKE";
 function createSignalRContext<T extends Hub>(options?: {
   shareConnectionBetweenTab?: boolean;
+  hubProtocol?: IHubProtocol;
 }) {
   const events: (keyof T["callbacks"])[] = [];
   const context: Context<T> = {
     connection: null,
     useSignalREffect: null as any, // Assigned after context
     shareConnectionBetweenTab: options?.shareConnectionBetweenTab || false,
+    hubProtocol: options?.hubProtocol,
     invoke(methodName, ...args: any[]): Promise<any> | undefined {
       if (!context.shareConnectionBetweenTab) {
         return context.connection?.invoke(methodName as string, ...args);

src/signalr/provider/index.ts

@@ -43,6 +43,7 @@ function providerFactory<T extends Hub>(Context: Context<T>) {
           ...rest,
         },
         automaticReconnect,
+        Context.hubProtocol,
       );
 
       connection.onreconnecting((error) => onErrorRef?.(error));

src/signalr/provider/providerNativeFactory.ts

@@ -36,6 +36,7 @@ function providerNativeFactory<T extends Hub>(Context: Context<T>) {
           ...rest,
         },
         automaticReconnect,
+        Context.hubProtocol,
       );
       connection.onreconnecting((error) => onErrorRef?.(error));
       connection.onreconnected(() => onReconnect?.(connection));

src/signalr/types.ts

@@ -1,11 +1,12 @@
-import { HubConnection } from "@microsoft/signalr";
+import { HubConnection, IHubProtocol } from "@microsoft/signalr";
 import { DependencyList } from "react";
 import { ProviderProps } from "./provider";
 
 export interface Context<T extends Hub> {
   Provider: (Props: ProviderProps) => JSX.Element;
   connection: HubConnection | null;
   shareConnectionBetweenTab: boolean;
+  hubProtocol?: IHubProtocol;
   invoke: <
     E extends keyof T["methods"],
     C extends Parameters<T["methods"][E]>,

src/signalr/utils.ts

@@ -3,6 +3,7 @@ import {
   HubConnectionBuilder,
   HubConnectionState,
   IHttpConnectionOptions,
+  IHubProtocol,
 } from "@microsoft/signalr";
 
 function isConnectionConnecting(connection: HubConnection) {
@@ -17,6 +18,7 @@ function createConnection(
   url: string,
   transportType: IHttpConnectionOptions,
   automaticReconnect: boolean | number[] = true,
+  hubProtocol: IHubProtocol | undefined,
 ) {
   let connectionBuilder = new HubConnectionBuilder().withUrl(
     url,
@@ -32,6 +34,10 @@ function createConnection(
     }
   }
 
+  if (hubProtocol) {
+    connectionBuilder = connectionBuilder.withHubProtocol(hubProtocol);
+  }
+
   if (transportType.logger) {
     connectionBuilder = connectionBuilder.configureLogging(
       transportType.logger,

src/socket/provider/index.ts

@@ -84,15 +84,15 @@ function providerFactory<T extends Hub>(Context: Context<T>) {
             return;
           }
 
-          shoutConnected(connection.id);
+          shoutConnected(connection.id || null);
         }
         if (
           (!lastConnectionSentState ||
             lastConnectionSentState < Date.now() - 5000) &&
           !isConnectionConnecting(connection)
         ) {
           try {
-            shoutConnected(connection.id);
+            shoutConnected(connection.id || null);
             connection.open();
 
             sentInterval = setInterval(syncWithTabs, 4000);