Sigger-Client

Abstract

Generates SignalR client from Sigger-Definition file. See https://github.com/voggue/sigger

Install

npm i @microsoft/signalr --save
npm i sigger-gen --save

Usage

Add script

Extend the script section in your package.json

 "scripts": {
    ...
    "sigger": "sigger-gen https://localhost:7291/sigger/sigger.json ./src/hubs -v -f angular"
  },

where https://localhost:7291/sigger/sigger.json is the url of your sigger endpoint. and ./src/hubs is the destinition directory of the signalR client stub

-f angular is optional because this is the default value

Generate Client stub

Now you are able to call

# for npm 
npm run sigger

# for yarn
yarn sigger

This will generate the client stub files in the destination folder

Configure the generated client stub in your app

In your app.module.ts add the generated hub (replace ChatHub with your gnerated Hub Module(s)).

import { ChatHubModule } from 'src/hubs/ChatHub';

@NgModule({
    imports: [
        ChatHubModule.forRoot({
            siggerUrl: 'https://localhost:7291/hubs/v1/chat' // Endpoint of SignalR Hub
        }),
    ]
})
export class AppModule { }

Use the generated hub service

Create a new component e.g. HomeComponent

home.component.ts

private readonly _messages$ = new BehaviorSubject<Message[]>([]);
readonly messages$ = this._messages$.asObservable();

constructor(private _chatHub: ChatHub) {
    this._chatHub.onMessageReceived$.subscribe(msg => this.addMessage(msg));
}

private addMessage(args: { user: User | null, type: MessageType, message: string | null }) {
    if (!args.message) return;
    this._messages$.value.push(args)
    this._messages$.next(this._messages$.value);
}