https://github.com/vforteli/dotnet-typescript-hub-generator
TypeScript client generator for SignalR Hubs
https://github.com/vforteli/dotnet-typescript-hub-generator
codegen dotnet signalr typescript websockets
Last synced: 3 months ago
JSON representation
TypeScript client generator for SignalR Hubs
- Host: GitHub
- URL: https://github.com/vforteli/dotnet-typescript-hub-generator
- Owner: vforteli
- Created: 2024-11-10T17:20:16.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-11-20T20:09:19.000Z (8 months ago)
- Last Synced: 2025-03-22T02:04:49.418Z (4 months ago)
- Topics: codegen, dotnet, signalr, typescript, websockets
- Language: C#
- Homepage:
- Size: 24.4 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# TypeScriptHubGenerator
Create TypeScript clients from SignalR hubs.
For React, a context and hook is created.
# Using the tool
```
# install globally (or locally)
dotnet tool install --global vforteli.TypeScriptHubGenerator
# run the tool
dotnet tshubgen \
--assembly-path "some/folder/assembly.dll" \
--output-folder "some/other/folder" \
--create-react-context
```
# Using the client
## React
Using the client requires installing @microsoft/signalr (tested with version 8.0.7)
```typescript jsx
// Configure hub in eg App.tsx
function App() {
const hubConnection = new HubConnectionBuilder()
.withAutomaticReconnect()
.withUrl("someurl")
.build();
return (
<>...>
);
}
```
```typescript jsx
// Use in some component
export const SomeComponent = () => {
const someHub = useSomeHubClient();
// Wrap in callback to be able to remove handler in useEffect
const handleSomethingHappened = useCallback((message: string | null) => {
console.debug("hub: " + message);
}, []);
// Add handler for a callback. The handler must be removed explicitly or duplicates will be added on re-renders
useEffect(() => {
someHub.hub.addSomethingHappenedHandler(handleSomethingHappened);
return () => {
someHub.hub.removeSomethingHappenedHandler(handleSomethingHappened);
};
}, [handleSomethingHappened, someHub.hub]);
// Invoke a hub method
const doSomething = () => {
someHub.hub.doSomething({ somePayload: "hello from component!" });
};
return <>...>;
};
```