Broadcasting Message From ASP.NET Core To Angular Client Using SignalR

Building Angular Client App

Now, let’s create Angular client app using angular CLI. To create a simple angular application type ng new <PROJECT-NAME> in node.js command prompt window. This will create a basic Angular app. Once the project is created successfully, type npm install to install the dependencies.

To use, signalR on client, we need to install the signalr-client npm module first using the following command:

After successful installation, your package.json looks like this-

Then, open the Angular app in VS code and let’s try to consume signalR. In this we are trying to do couple of things-

1. We will try to connect HubConnection and on successful connection, we will write a console log saying MessageHub Connected.
2. On Every message received from client, we are going to display that message in the client’s console.
   
   In Angular client app, open the app.component.ts file and add the below code in it.
   
   1. import { Component, OnInit } from '@angular/core';
   2. import { HubConnection } from '@aspnet/signalr-client';
   4. @Component({
   5. selector: 'app-root',
   6. templateUrl: './app.component.html',
   7. styleUrls: ['./app.component.css']
   8. })
   9. export class AppComponent implements OnInit {
   10. title = 'app';
   12. ngOnInit() : void {
   14. let connection = new HubConnection('http://localhost:5000/message');
   16. connection.on('send', data => {
   17. console.log(data);
   18. });
   20. connection.start()
   21. .then(() => {
   22. console.log('MessageHub Connected');
   23. });
   25. }
   26. }

Test our sample

As both our applications are ready, it is time to take the functionality. To test, we are going to follow the below steps-

1. In command prompt, type dotnet run to run our ASP.NET Core application.
2. In node.js command prompt, type ng serve to run our Angular application.
3. Open browser and its console and type http://localhost:4200
4. Open Postman app, send POST request to http://localhost:5000/api/message
5. You will get the result status 200 OK in postman
6. On browser console, you will see a message as “Hello from the hub server at 08-10-2017 00:41:12”.

In my testing, I have used 3 different browsers (as 3 different clients) and all 3 have received a message from hub. Below are the screenshots of my tests.


Screenshot1: Postman showing Status 200 OK.


Screenshot2: Chrome browser showing console messages


Screenshot 3: Edge browser showing console messages


Screenshot 4: Opera browser showing console messages

References