SignalR mit C# und Angular verbinden

In diesem Artikel zeige ich dir, wie du SignalR in einem ASP.NET Core Backend in Verbindung mit einem Angular Frontend verwenden kannst. SignalR ermöglicht es dir, Echtzeit-Funktionalitäten wie Chat-Anwendungen, Benachrichtigungen und Live-Updates in deinen Webanwendungen zu implementieren.

Voraussetzungen

• .NET SDK (mindestens .NET Core 6 oder höher)
• Node.js und Angular CLI
• Visual Studio oder Visual Studio Code

1. Erstellen eines ASP.NET Core Projekts mit SignalR

Schritt 1: Neues ASP.NET Core Projekt erstellen

Erstelle ein neues ASP.NET Core Projekt mit dem Befehl:

dotnet new webapi -n SignalRBackend

Wechsel in das Verzeichnis des Projekts:

cd SignalRBackend

Schritt 2: SignalR-Paket hinzufügen

Installiere das SignalR Paket:

dotnet add package Microsoft.AspNetCore.SignalR
dotnet add package Microsoft.AspNetCore.SignalR.Core

Schritt 3: SignalR Hub erstellen

Erstelle eine neue Datei im Ordner Hubs mit dem Namen ChatHub.cs:

using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;

namespace SignalRBackend.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

Hier wird eine Methode SendMessage erstellt, die Nachrichten von einem Benutzer an alle verbundenen Clients sendet.

Schritt 4: SignalR im Startup konfigurieren

Öffne die Datei Program.cs und füge die SignalR-Konfiguration hinzu:

using SignalRBackend.Hubs;

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

app.UseCors(builder => builder
    .WithOrigins("http://localhost:4200") // Angular Frontend URL
    .AllowAnyHeader()
    .AllowAnyMethod()
    .AllowCredentials());

app.MapHub<ChatHub>("/chathub");
app.MapControllers();

app.Run();

In dieser Konfiguration wird CORS aktiviert, um Verbindungen von localhost:4200 (Angular Standardport) zu erlauben.

2. Erstellen des Angular Frontend Projekts

Schritt 1: Neues Angular Projekt erstellen

Erstelle ein neues Angular Projekt:

ng new signalr-angular

Wechsel in das Verzeichnis des Projekts:

cd signalr-angular

Schritt 2: SignalR Client-Bibliothek installieren

Installiere die SignalR Client-Bibliothek:

npm install @microsoft/signalr

Schritt 3: SignalR Service erstellen

Erstelle einen neuen Service signalr.service.ts:

ng generate service services/signalr

Bearbeite den Service signalr.service.ts wie folgt:

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')
      .withAutomaticReconnect()
      .build();

    this.hubConnection
      .start()
      .then(() => console.log('SignalR Connection started'))
      .catch((err) => console.error('Error while starting connection: ' + err));
  }

  public addReceiveMessageListener(callback: (user: string, message: string) => void) {
    this.hubConnection.on('ReceiveMessage', callback);
  }

  public sendMessage(user: string, message: string) {
    this.hubConnection.invoke('SendMessage', user, message).catch((err) => console.error(err));
  }
}

Hier wird eine SignalR-Verbindung aufgebaut, eine Listener-Methode hinzugefügt und eine Methode zum Senden von Nachrichten definiert.

Schritt 4: Angular Komponente erstellen

Erstelle eine Komponente chat:

ng generate component chat

Bearbeite die chat.component.ts wie folgt:

import { Component, OnInit } from '@angular/core';
import { SignalRService } from '../services/signalr.service';

@Component({
  selector: 'app-chat',
  templateUrl: './chat.component.html',
  styleUrls: ['./chat.component.css'],
})
export class ChatComponent implements OnInit {
  public user: string = '';
  public message: string = '';
  public messages: string[] = [];

  constructor(private signalRService: SignalRService) {}

  ngOnInit() {
    this.signalRService.startConnection();
    this.signalRService.addReceiveMessageListener((user, message) => {
      this.messages.push(`${user}: ${message}`);
    });
  }

  sendMessage() {
    if (this.user && this.message) {
      this.signalRService.sendMessage(this.user, this.message);
      this.message = '';
    }
  }

Bearbeite die chat.component.html Datei:

<div>
  <h2>SignalR Chat</h2>
  <input [(ngModel)]="user" placeholder="Benutzername" />
  <br />
  <input [(ngModel)]="message" placeholder="Nachricht" (keydown.enter)="sendMessage()" />
  <button (click)="sendMessage()">Senden</button>
  <ul>
    <li *ngFor="let msg of messages">{{ msg }}</li>
  </ul>
</div>

Schritt 5: Angular Module aktualisieren

Stelle sicher, dass in app.module.ts FormsModule importiert wird:

import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [AppComponent, ChatComponent],
  imports: [BrowserModule, FormsModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

3. Anwendung starten

Schritt 1: ASP.NET Core Backend starten

Starte das Backend:

dotnet run

Schritt 2: Angular Frontend starten

Starte das Angular Frontend:

ng serve

Öffne deinen Browser und navigiere zu localhost:4200, um die Anwendung zu testen.

Fazit

Du hast jetzt eine einfache SignalR-Anwendung mit ASP.NET Core und Angular erstellt. Diese Architektur ermöglicht es dir, Echtzeit-Kommunikation zwischen Backend und Frontend in deiner Webanwendung zu implementieren. SignalR kümmert sich um die Details der Verbindung und wechselt automatisch zu WebSockets, Long Polling oder Server-Sent Events, je nachdem, was am besten unterstützt wird.