https://github.com/known-as-bmf/react-signalr
A react hook to interact with SignalR hubs.
https://github.com/known-as-bmf/react-signalr
javascript react react-hook reactjs rxjs signalr websocket
Last synced: 7 months ago
JSON representation
A react hook to interact with SignalR hubs.
- Host: GitHub
- URL: https://github.com/known-as-bmf/react-signalr
- Owner: known-as-bmf
- License: mit
- Created: 2020-02-22T12:40:12.000Z (over 5 years ago)
- Default Branch: develop
- Last Pushed: 2024-09-06T09:17:22.000Z (about 1 year ago)
- Last Synced: 2025-03-18T03:59:01.828Z (7 months ago)
- Topics: javascript, react, react-hook, reactjs, rxjs, signalr, websocket
- Language: TypeScript
- Homepage:
- Size: 2.55 MB
- Stars: 27
- Watchers: 3
- Forks: 8
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
This hook is designed to be a proxy to the main [HubConnection](https://docs.microsoft.com/fr-fr/javascript/api/@aspnet/signalr/hubconnection?view=signalr-js-latest) capabilities.
- [invoke](https://docs.microsoft.com/fr-fr/javascript/api/@aspnet/signalr/hubconnection?view=signalr-js-latest#invoke)
- [send](https://docs.microsoft.com/fr-fr/javascript/api/@aspnet/signalr/hubconnection?view=signalr-js-latest#send)
- [on](https://docs.microsoft.com/fr-fr/javascript/api/@aspnet/signalr/hubconnection?view=signalr-js-latest#on) / [off](https://docs.microsoft.com/fr-fr/javascript/api/@aspnet/signalr/hubconnection?view=signalr-js-latest#off)
[](https://travis-ci.org/known-as-bmf/react-signalr)
[](https://snyk.io//test/github/known-as-bmf/react-signalr?targetFile=package.json)
## Installation
`npm install --save @known-as-bmf/react-signalr`
You also need react (>= 16.8) and rxjs (>= 6) installed in your project.
## Usage
```ts
const signalrEndpoint = 'https://...';
const MyComponent = () => {
const [value, set] = useState();
const { send, on } = useSignalr(signalrEndpoint);
useEffect(() => {
const sub = on('myMethod').pipe(debounceTime(200)).subscribe(set);
return () => sub.unsubscribe();
}, [on]);
const notify = useCallback(() => {
send('remoteMethod', { foo: 'bar' });
}, []);
};
```
Connections are cached, it means that if you open a connection to an url, further calls to `useSignalr` with the same url will use the same connection.
When the last hook using a specific connection is unmounted, this connection is closed.
## API
### useSignalr
```ts
/**
* Hook used to interact with a signalr connection.
* Parameter changes (`hubUrl`, `options`) are not taken into account and will not rerender.
* @param hubUrl - The URL of the signalr hub endpoint to connect to.
* @param options - Options object to pass to connection builder.
* @returns An object containing methods to interact with the hub connection.
*/
function useSignalr(
hubUrl: string,
options?: IHttpConnectionOptions
): UseSignalrHookResult;
```
```ts
interface UseSignalrHookResult {
/**
* Proxy to `HubConnection.invoke`.
*
* @typeparam TResponse - The expected response type.
* @param methodName - The name of the server method to invoke.
* @param arg - The argument used to invoke the server method.
*
* @returns A promise that resolves what `HubConnection.invoke` would have resolved.
*
* @see https://docs.microsoft.com/fr-fr/javascript/api/%40aspnet/signalr/hubconnection?view=signalr-js-latest#invoke
*/
invoke: InvokeFunction;
/**
* Utility method used to subscribe to realtime events (`HubConnection.on`, `HubConnection.off`).
*
* @typeparam TMessage - The expected message type.
* @param methodName - The name of the server method to subscribe to.
*
* @returns An observable that emits every time a realtime message is recieved.
*
* @see https://docs.microsoft.com/fr-fr/javascript/api/%40aspnet/signalr/hubconnection?view=signalr-js-latest#on
* @see https://docs.microsoft.com/fr-fr/javascript/api/%40aspnet/signalr/hubconnection?view=signalr-js-latest#off
*/
on: OnFunction;
/**
* Proxy to `HubConnection.send`
*
* @param methodName - The name of the server method to invoke.
* @param arg - The argument used to invoke the server method.
*
* @returns A promise that resolves when `HubConnection.send` would have resolved.
*
* @see https://docs.microsoft.com/fr-fr/javascript/api/%40aspnet/signalr/hubconnection?view=signalr-js-latest#send
*/
send: SendFunction;
}
```
### SendFunction
```ts
type SendFunction = (methodName: string, arg?: unknown) => Promise;
```
### InvokeFunction
```ts
type InvokeFunction = (
methodName: string,
arg?: unknown
) => Promise;
```
### OnFunction
```ts
type OnFunction = (
methodName: string
) => Observable;
```