useSignalRHub
An easy to use React hook for @microsoft/signalr
Please use Microsoft's Documentation and API Reference as guidance.
Getting started
Install using your preferred package manager
$ npm install use-signalr-hub @microsoft/signalr
$ yarn add use-signalr-hub @microsoft/signalrImport into your project
import signalR from "use-signalr-hub"Use in your React component
const signalRHub = signalR.useHub("https://www.example.com/hub", {
onConnected: (hub) => {
// Connected to hub
hub.on("ReceiveMessage", (user, message) => {
// Listen to "ReceiveMessage" on hub
})
},
onDisconnected: (error) => {
// Disconnected from hub
},
onError: (error) => {
// Failed to connect to hub
}
})
const handleSubmit = (user, message) => {
signalRHub.invoke("SendMessage", user, message)
.catch((error) => {
// Failed to invoke "SendMessage" on hub
})
}Configure defaults
signalR.setDefaults({
httpTransportTypeOrOptions: {
accessTokenFactory: () => user.userData.token
},
automaticReconnect: false
})Api
const signalRHub = signalR.useHub(hubUrl, {
onConnected,
onDisconnected,
onReconnecting,
onReconnected,
onError,
enabled,
automaticReconnect,
httpTransportTypeOrOptions,
hubProtocol,
logging
})Options
onConnected?: (hub: HubConnection) => void
onDisconnected?: (error?: Error) => void
onReconnecting?: (error?: Error) => void
onReconnected?: (connectionId?: string) => void
onError?: (error?: Error) => void
enabled?: boolean
automaticReconnect?: number[] | IRetryPolicy | boolean
httpTransportTypeOrOptions?: IHttpConnectionOptions | HttpTransportType
hubProtocol?: IHubProtocol
logging?: LogLevel | string | ILoggerHubConnection | IRetryPolicy | IHttpConnectionOptions | HttpTransportType | IHubProtocol | LogLevel | ILogger
Returns
signalRHub: HubConnection | null