typescriptsignalraspnetboilerplate.net-core-3.1asp.net-boilerplate

SignalR integration with ABP Angular version


I'm trying to use SignalR library with ABP Application (.NET Core 3.1 with Angular version) but when I came to the last step that is mentioned in the official documentation, I didn't know where I should put the code:

var chatHub = null;

abp.signalr.startConnection(abp.appPath + 'signalr-myChatHub', function (connection) {
    chatHub = connection; // Save a reference to the hub

    connection.on('getMessage', function (message) { // Register for incoming messages
        console.log('received message: ' + message);
    });
}).then(function (connection) {
    abp.log.debug('Connected to myChatHub server!');
    abp.event.trigger('myChatHub.connected');
});

abp.event.on('myChatHub.connected', function() { // Register for connect event
    chatHub.invoke('sendMessage', "Hi everybody, I'm connected to the chat!"); // Send a message to the server
});

I don't know, where should I put the above code?


Solution

  • You can do it in ngOnInit of AppComponent in app.component.ts:

    export class AppComponent extends AppComponentBase implements OnInit {
        ...
    
        ngOnInit(): void {
            ...
    
            // SignalRAspNetCoreHelper.initSignalR(); // Replace this line with the block below
            SignalRAspNetCoreHelper.initSignalR(() => {
                var chatHub = null;
    
                abp.signalr.startConnection(abp.appPath + 'signalr-myChatHub', function (connection) {
                    chatHub = connection; // Save a reference to the hub
    
                    connection.on('getMessage', function (message) { // Register for incoming messages
                        console.log('received message: ' + message);
                    });
                }).then(function (connection) {
                    abp.log.debug('Connected to myChatHub server!');
                    abp.event.trigger('myChatHub.connected');
                });
    
                abp.event.on('myChatHub.connected', function() { // Register for connect event
                    chatHub.invoke('sendMessage', "Hi everybody, I'm connected to the chat!"); // Send a message to the server
                });
            });
    
            ...
        }
    
        ...
    }