SignalR ve Angular Entegrasyonu Adım Adım Rehber

SignalR ve Angular Entegrasyonu Nedir?

Günümüzde gerçek zamanlı web uygulamalarının önemi giderek artıyor. SignalR ve Angular entegrasyonu, etkileşimli web uygulamalarında canlı bildirimler, sohbet sistemleri ve anlık veri güncellemeleri sunmak için tercih edilen güçlü bir yöntemdir. SignalR, sunucu ile istemci arasında çift yönlü ve düşük gecikmeli iletişim sağlarken, Angular ise modern ve ölçeklenebilir frontend geliştirme için vazgeçilmez bir JavaScript framework’üdür. Bu makalede SignalR ve Angular entegrasyonu nasıl yapılır adım adım ele alacağız.

SignalR ile Angular Uygulamasını Hazırlama

SignalR ve Angular entegrasyonu için öncelikle SignalR tabanlı bir .NET backend ve bir Angular frontend projesine ihtiyacınız vardır. SignalR hub’ını oluşturduktan sonra, Angular uygulamanızda @microsoft/signalr paketini kullanarak sunucu ile bağlantı kurabilirsiniz. Aşağıda hem sunucu tarafı hem de istemci tarafında temel bir entegrasyon örneği bulabilirsiniz.

SignalR Sunucu (Backend) Tarafı Kurulumu

// Startup.cs ’de SignalR’ı ekleyin
dotnet add package Microsoft.AspNetCore.SignalR

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

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapHub<ChatHub>("/chathub");
    });
}

// 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);
    }
}

Angular İstemcisi ile SignalR Bağlantısı

// Terminal: npm install @microsoft/signalr
import { Component, OnInit } from '@angular/core';
import * as signalR from '@microsoft/signalr';

@Component({
  selector: 'app-chat',
  template: `
    <div>
      <input [(ngModel)]="message" />
      <button (click)="send()">Gönder</button>
      <ul>
        <li *ngFor="let msg of messages">{{msg}}</li>
      </ul>
    </div>`
})
export class ChatComponent implements OnInit {
  private hubConnection: signalR.HubConnection;
  public messages: string[] = [];
  public message: string = '';
  ngOnInit() {
    this.hubConnection = new signalR.HubConnectionBuilder()
      .withUrl('https://localhost:5001/chathub')
      .build();
    this.hubConnection.start();
    this.hubConnection.on('ReceiveMessage', (user, message) => {
      this.messages.push(`${user}: ${message}`);
    });
  }
  send() {
    this.hubConnection.invoke('SendMessage', 'Kullanıcı', this.message);
    this.message = '';
  }
}

SignalR ve Angular ile Gerçek Zamanlı Uygulamalar

SignalR ve Angular entegrasyonu sayesinde, modern uygulamalarınızda anlık veri aktarımı, bildirim, canlı sohbet ve oyun gibi özellikleri kolayca ekleyebilirsiniz. İyi yapılandırılmış bir SignalR servisi ve Angular istemcisi ile minimum gecikmeyle güvenilir iletişim sağlanır. Katmanlı ve bakımı kolay bir kod altyapısı için SignalR servislerini Angular servisleri halinde soyutlamak en iyi uygulamalardan biridir.

Sonuç: SignalR ve Angular Entegrasyonunun Avantajları

Kısacası, SignalR ve Angular entegrasyonu web projelerine gerçek zamanlı kabiliyetler eklemek için oldukça pratiktir. Kod örneklerinde görüldüğü gibi, Angular istemciniz ile SignalR hub’ları üzerinden kolayca canlı veri alışverişi gerçekleştirebilirsiniz. Bu entegrasyon, kullanıcı deneyimini artırırken, modern ve interaktif web uygulamalarının geliştirilmesinde önemli bir rol oynar.