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

Technologies 



Recently, .NET team has announced SignalR for ASP.NET Core. So, in this article, I am trying to show how we can use SignalR with ASP.NET Core for an Angular client.

Before we begin, below is my environment setup.

Tools/Technologies	Versions	How to verify version
Angular CLI	1.4.4	Type ‘ng –version’ in nodejs command prompt
NodeJs	6.10.2	Type ‘node -v’ in nodejs command prompt
NPM	3.10.5	Type ‘npm -v’ in nodejs command prompt
.NET Core SDK	2.0.0	Type ‘dotnet –version’ in command prompt
VS Code	1.17.0	In VS code, go to Help > About.
Angular	4.2.4	Angular CLI takes care of this.
ASP.NET Core	2.0.0	.NET CLI takes care of this.
SignalR	1.0.0-alpha1-final	NPM and NuGet takes care of this.

In this article, I am going to cover the scenario, where a client is built using Angular (which can be any JavaScript client). For the server side, I am using ASP.NET Core which will have POST API method. On POST method, I am going to send a message to all active clients using SignalR socket.



Building ASP.NET Core application (MessageHub and WebApi)

First, we are going to create an ASP.NET Core web application. For this, open the command prompt and type this command.

dotnet new web

This will create an empty web application folder. This will be very minimal ASP.NET Core application. Open this project using VS code.

In .csproj file, add signalR alpha release package.

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>netcoreapp2.0</TargetFramework>
  </PropertyGroup>

  <ItemGroup>
    <Folder Include="wwwroot\" />
  </ItemGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.0" />
    <PackageReference Include="Microsoft.AspNetCore.SignalR" Version="1.0.0-alpha1-final" />
  </ItemGroup>

</Project>

Save the .csproj file and go to command prompt. Type the following command which will add SignalR package into ASP.NET Core application. Sometimes, you need to restart the VS code to get the intelliSense of the newly added package.

dotnet restore

Now, add SignalR in startup.cs.

public void ConfigureServices(IServiceCollection services)
        {
            services.AddSignalR();
            services.AddMvc();
        }

Now, we are going to create Hub (e.g.MessageHub) This is the hub where clients are going to connect to and then receive the broadcast messages.

Create a new file named as MessageHub.cs. In this, we have "Send" method where we are going to pass message and this message will be broadcast to all the clients.

public class MessageHub : Hub
{
    public Task Send(string message)
    {
        return Clients.All.InvokeAsync("Send", message);
    }
}

Then, configure the ASP.NET Core route to our hub (i.e. MessageHub).

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            app.UseSignalR(routes =>
            {
                routes.MapHub<MessageHub>("message");
            });

            app.UseMvc();

        }

Now, we will create simple Controller with Post action. For demo purposes, we will call this POST action from postman and this will broadcast a message to all clients.

public class MessageController : Controller
    {
        private IHubContext<MessageHub> _messageHubContext;

        public MessageController(IHubContext<MessageHub> messageHubContext)
        {
            _messageHubContext = messageHubContext;
        }

        public IActionResult Post()
        {
            //Broadcast message to client
            _messageHubContext.Clients.All.InvokeAsync("send", "Hello from the hub server at " +
DateTime.Now.ToString("dd-MM-yyyy HH:mm:ss"));

            return Ok();
        }
    }

Since we are building a separate Angular client app which will be running on the separate port, we need to enable CORS in startup.

public class Startup
    {
        // This method gets called by the runtime. Use this method to add services to the container.
        // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddSignalR();
            services.AddCors(options => options.AddPolicy("AllowAny", x=> {
                    x.AllowAnyHeader().AllowAnyMethod().AllowAnyOrigin();
                }));
            services.AddMvc();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            app.UseCors("AllowAny");

            app.UseSignalR(routes =>
            {
                routes.MapHub<MessageHub>("message");
            });

            app.UseMvc();

        }
    }

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: 

npm install @aspnet/signalr-client –save

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

{
  "name": "signal-r-angular4",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "@aspnet/signalr-client": "^1.0.0-alpha1-final",
    "core-js": "^2.4.1",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.4.4",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.3.3"
  }
}

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.
   

   import { Component, OnInit } from '@angular/core';
   import { HubConnection } from '@aspnet/signalr-client';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent implements OnInit {
     title = 'app';
   
     ngOnInit() : void {
   
       let connection = new HubConnection('http://localhost:5000/message');
   
       connection.on('send', data => {
           console.log(data);
       });
   
       connection.start()
       .then(() => {
         console.log('MessageHub Connected');
       });
   
     }
   }

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

• Announcing SignalR (alpha) for ASP.NET Core 2.0
• .NET Core CLI
• Angular CLI