Real-time Applications with SignalR and Angular

Introduction

Building real-time applications with SignalR and Angular can create dynamic, responsive user experiences. SignalR, a library for ASP.NET, enables server-side code to push content to clients instantly as events occur. Angular, a powerful front-end framework, can be seamlessly integrated with SignalR to build modern, real-time applications.

Key Concepts

1. SignalR: Facilitates real-time communication between server and client.
2. Angular: A framework for building dynamic web applications.
3. WebSockets: The protocol primarily used by SignalR for real-time communication.

Setting up SignalR with Angular

Here’s a step-by-step guide to integrating SignalR with Angular.

Set up the Backend with ASP.NET Core

1. Create an ASP.NET Core Project

   dotnet new webapi -n RealTimeApp
   cd RealTimeApp
   

2. Install SignalR

   dotnet add package Microsoft.AspNetCore.SignalR
   

3. Create a Hub

   // Hubs/ChatHub.cs
   using Microsoft.AspNetCore.SignalR;
   public class ChatHub : Hub
   {
       public async Task SendMessage(string user, string message)
       {
           await Clients.All.SendAsync("ReceiveMessage", user, message);
       }
   }
   

4. Configure SignalR in Startup

   // Startup.cs
   public void ConfigureServices(IServiceCollection services)
   {
       services.AddControllers();
       services.AddSignalR();
   }
   public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
   {
       if (env.IsDevelopment())
       {
           app.UseDeveloperExceptionPage();
       }
       app.UseRouting();
       app.UseEndpoints(endpoints =>
       {
           endpoints.MapControllers();
           endpoints.MapHub<ChatHub>("/chathub");
       });
   }
   

5. Run the Application

   dotnet run
   

Set up the Angular Frontend

1. Create an Angular Project

   ng new real-time-app
   cd real-time-app
   

2. Install SignalR Client

   npm install @microsoft/signalr
   

3. Create a SignalR Service

   // src/app/services/signalr.service.ts
   import { Injectable } from '@angular/core';
   import * as signalR from '@microsoft/signalr';
   @Injectable({
     providedIn: 'root'
   })
   export class SignalRService {
     private hubConnection: signalR.HubConnection;
     public startConnection() {
       this.hubConnection = new signalR.HubConnectionBuilder()
         .withUrl('http://localhost:5000/chathub')
         .build();
       this.hubConnection
         .start()
         .then(() => console.log('Connection started'))
         .catch(err => console.log('Error while starting connection: ' + err));
     }
     public addTransferChartDataListener() {
       this.hubConnection.on('ReceiveMessage', (user, message) => {
         console.log(`User: ${user}, Message: ${message}`);
       });
     }
     public sendMessage(user: string, message: string) {
       this.hubConnection.invoke('SendMessage', user, message)
         .catch(err => console.error(err));
     }
   }
   

4. Integrate the Service in a Component

   // src/app/components/chat/chat.component.ts
   import { Component, OnInit } from '@angular/core';
   import { SignalRService } from 'src/app/services/signalr.service';
   @Component({
       selector: 'app-chat',
       templateUrl: './chat.component.html',
       styleUrls: ['./chat.component.css']
   })
   export class ChatComponent implements OnInit {
       user: string = '';
       message: string = '';
       constructor(public signalRService: SignalRService) {}
       ngOnInit() {
           this.signalRService.startConnection();
           this.signalRService.addTransferChartDataListener();
       }
       sendMessage() {
           this.signalRService.sendMessage(this.user, this.message);
           this.message = '';
       }
   }
   

5. Update the HTML Template

   <!-- src/app/components/chat/chat.component.html -->
   <div>
       <input [(ngModel)]="user" placeholder="User" />
       <input [(ngModel)]="message" placeholder="Message" />
       <button (click)="sendMessage()">Send</button>
   </div>
   <div id="messages"></div>
   

6. Ensure the Angular Forms Module is Imported

   // src/app/app.module.ts
   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { FormsModule } from '@angular/forms';
   import { AppComponent } from './app.component';
   import { ChatComponent } from './components/chat/chat.component';
   @NgModule({
     declarations: [
       AppComponent,
       ChatComponent
     ],
     imports: [
       BrowserModule,
       FormsModule
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

Running the Application

1. Run the ASP.NET Core Backend

   dotnet run
   

2. Run the Angular Frontend:

   ng serve
   

Navigate to http://localhost:4200, and you should see your chat application in action. You can now send messages that will be broadcast to all connected clients in real-time.

Conclusion

By following the above steps, you can create a real-time application using SignalR and Angular. This combination allows for seamless and efficient communication between the server and clients, providing a dynamic and responsive user experience.