Learn how to build a real-time messaging app using SignalR in .NET Core and Angular for seamless communication between clients.
Introduction
In this blog post, we’ll build a real-time chat application using SignalR in .NET Core and Angular. SignalR is a powerful library that allows you to add real-time web functionality to your applications. It helps manage server-client communications by pushing updates to the client whenever there’s a change, making it perfect for a messaging application.
In this post, we will walk through setting up SignalR in the backend (.NET Core) and integrate it with the Angular frontend to build a full-stack chat application. By the end, you'll have a working chat application that uses WebSockets for real-time updates between clients.
Prerequisites
- Basic knowledge of .NET Core, Angular, and JavaScript.
- Node.js and npm installed.
- Visual Studio or any IDE for .NET Core development.
- Postman or any API testing tool (optional, for testing endpoints).
If you are new to .NET Core or Angular, I suggest familiarizing yourself with the basics of both technologies. In this tutorial, we’ll focus more on integrating SignalR with Angular for real-time messaging functionality.
Setting Up the Backend with .NET Core and SignalR
Let's begin by creating the .NET Core Web API project and adding SignalR to the backend.
- Create a new Web API project:
dotnet new webapi -n SignalRChatApp
- Navigate into the project directory:
cd SignalRChatApp
- Install the SignalR NuGet package:
dotnet add package Microsoft.AspNetCore.SignalR
Next, let’s configure SignalR in the Startup.cs file:
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
services.AddSignalR();
services.AddControllers();
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapHub<ChatHub>("/chathub");
endpoints.MapControllers();
});
}
}
Here, we've registered SignalR in the ConfigureServices method and mapped the SignalR hub to the /chathub URL in the Configure method.
Now, let’s implement the SignalR chat hub in a new file called ChatHub.cs:
using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;
public class ChatHub : Hub
{
public async Task SendMessage(string user, string message)
{
await Clients.All.SendAsync("ReceiveMessage", user, message);
}
}
In this hub, we’ve defined a SendMessage method that sends a message to all connected clients using Clients.All.SendAsync.
Frontend Setup with Angular
Now, we’ll set up the Angular frontend to communicate with the SignalR backend. Let’s start by creating a new Angular application:
ng new chat-app
Navigate into the project directory:
cd chat-app
Install the SignalR client package for Angular:
npm install @microsoft/signalr
Let’s now update the app.module.ts file to configure the SignalR service:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
Now, in the app.component.ts file, let’s implement the logic to interact with the SignalR server:
import { Component, OnInit } from '@angular/core';
import { HubConnection, HubConnectionBuilder } from '@microsoft/signalr';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
connection: HubConnection;
messages: string[] = [];
userMessage: string = '';
constructor() {
this.connection = new HubConnectionBuilder()
.withUrl('https://localhost:5001/chathub')
.build();
}
ngOnInit(): void {
this.connection
.start()
.then(() => {
console.log('SignalR connection established.');
})
.catch((err) => console.error('Error establishing connection: ', err));
this.connection.on('ReceiveMessage', (user: string, message: string) => {
this.messages.push(`${user}: ${message}`);
});
}
sendMessage(): void {
if (this.userMessage.trim()) {
this.connection
.invoke('SendMessage', 'User', this.userMessage)
.catch((err) => console.error('Error sending message: ', err));
this.userMessage = '';
}
}
}
Here we initialize the SignalR connection and set up the client to listen for messages via the ReceiveMessage event. We also define a method sendMessage to send messages to the backend.
Now, update the app.component.html file to display the chat messages:
<div class="container">
<h2>Real-Time Chat</h2>
<div *ngFor="let msg of messages">
<p>{{ msg }}</p>
</div>
<input [(ngModel)]="userMessage" type="text" placeholder="Enter message" />
<button (click)="sendMessage()">Send</button>
</div>
This template will display all messages and provide an input box to type new messages. Upon clicking the "Send" button, the message will be sent to the SignalR server and broadcasted to all connected clients.
Running the Application
To run the application:
- Start the backend .NET Core Web API:
dotnet run
- Start the Angular frontend:
ng serve
Your real-time chat application is now running! Open the Angular app in the browser, and you'll see messages being updated in real time as they are sent and received.
Conclusion
In this post, we’ve built a real-time chat application using SignalR in .NET Core and Angular. SignalR simplifies real-time communication by handling the complexities of WebSockets, while Angular’s rich ecosystem makes it ideal for creating interactive UIs. We’ve covered setting up the SignalR backend, integrating it with an Angular frontend, and establishing real-time communication.
From here, you can enhance the chat app with additional features like user authentication, message storage in a database, and much more. This is just the foundation to build a highly interactive messaging app. Happy coding!