Modern web uygulamalar\u0131nda kullan\u0131c\u0131 deneyimini zirveye ta\u015f\u0131mak i\u00e7in anl\u0131k veri ak\u0131\u015f\u0131 hayati \u00f6nem ta\u015f\u0131r. Peki, .NET Core ve Angular gibi g\u00fc\u00e7l\u00fc teknolojileri SignalR ile birle\u015ftirerek ger\u00e7ek zamanl\u0131 g\u00fcncellemeleri nas\u0131l sa\u011flayabiliriz? Bu makale, sunucudan istemciye sorunsuz veri ak\u0131\u015f\u0131 sa\u011flama s\u00fcrecini ad\u0131m ad\u0131m a\u00e7\u0131kl\u0131yor.<\/p>\n
G\u00fcn\u00fcm\u00fcz\u00fcn dinamik d\u00fcnyas\u0131nda, kullan\u0131c\u0131lar\u0131n uygulamalarla etkile\u015fim beklentileri hi\u00e7 olmad\u0131\u011f\u0131 kadar y\u00fcksek. Geleneksel web uygulamalar\u0131, kullan\u0131c\u0131n\u0131n bir eylemde bulunmas\u0131n\u0131 (sayfay\u0131 yenileme, bir butona t\u0131klama) bekleyerek sunucudan veri \u00e7eker. Bu y\u00f6ntem, statik i\u00e7erikler veya nadiren g\u00fcncellenen veriler i\u00e7in yeterli olsa da, anl\u0131k de\u011fi\u015fimlerin oldu\u011fu senaryolarda yetersiz kal\u0131r. \u00d6rne\u011fin, bir \u00e7evrimi\u00e7i sohbet uygulamas\u0131nda her mesaj i\u00e7in sayfay\u0131 yenilemek veya bir hisse senedi takip uygulamas\u0131nda her fiyat de\u011fi\u015fimi i\u00e7in manuel g\u00fcncelleme yapmak hem kullan\u0131c\u0131 deneyimini k\u00f6t\u00fcle\u015ftirir hem de gereksiz sunucu y\u00fck\u00fc olu\u015fturur.<\/p>\n
\u0130\u015fte tam da bu noktada, ger\u00e7ek zamanl\u0131 veri ak\u0131\u015f\u0131 \u00e7\u00f6z\u00fcmleri devreye giriyor. Anl\u0131k bildirimler, canl\u0131 sohbetler, borsa takibi, spor m\u00fcsabakas\u0131 skorlar\u0131, \u00e7ok kullan\u0131c\u0131l\u0131 oyunlar veya interaktif dashboard’lar gibi uygulamalar, sunucudan istemciye an\u0131nda ve otomatik veri iletimine ihtiya\u00e7 duyar. Bu sayede kullan\u0131c\u0131lar, en g\u00fcncel bilgilere an\u0131nda eri\u015febilir, karar alma s\u00fcre\u00e7lerini h\u0131zland\u0131rabilir ve \u00e7ok daha ak\u0131c\u0131 bir deneyim ya\u015fayabilirler. Bu t\u00fcr bir ileti\u015fim modeli, uygulaman\u0131z\u0131n etkile\u015fimini ve yan\u0131t verme h\u0131z\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. Geleneksel HTTP request-response modelinin aksine, ger\u00e7ek zamanl\u0131 sistemler, sunucunun istemcilere proaktif olarak bilgi g\u00f6ndermesini sa\u011flar. Bu, \u00f6zellikle veri hacminin y\u00fcksek oldu\u011fu ve g\u00fcncellemelerin s\u0131k oldu\u011fu durumlarda performans\u0131 ve verimlili\u011fi art\u0131r\u0131r.<\/p>\n
Bu gereksinimleri kar\u015f\u0131lamak i\u00e7in geli\u015ftirilen teknolojilerden biri de SignalR<\/strong>‘d\u0131r. SignalR, .NET ekosisteminde ger\u00e7ek zamanl\u0131 web i\u015flevselli\u011fi eklemek i\u00e7in g\u00fc\u00e7l\u00fc ve kullan\u0131m\u0131 kolay bir k\u00fct\u00fcphanedir. WebSockets, Server-Sent Events ve Long Polling gibi farkl\u0131 transport mekanizmalar\u0131n\u0131 otomatik olarak y\u00f6neterek, geli\u015ftiricilerin taray\u0131c\u0131lar ve sunucular aras\u0131nda kesintisiz, iki y\u00f6nl\u00fc ileti\u015fimi kolayca kurmas\u0131n\u0131 sa\u011flar. .NET Core’un mod\u00fcler yap\u0131s\u0131yla birle\u015fti\u011finde, SignalR modern, y\u00fcksek performansl\u0131 ve \u00f6l\u00e7eklenebilir ger\u00e7ek zamanl\u0131 uygulamalar geli\u015ftirmek i\u00e7in ideal bir \u00e7\u00f6z\u00fcm haline gelir. Bu makalede, .NET Core backend’i ve Angular frontend’i kullanarak SignalR ile nas\u0131l ger\u00e7ek zamanl\u0131 veri g\u00fcncellemeleri yapaca\u011f\u0131m\u0131z\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz. B\u00f6ylece, kullan\u0131c\u0131lar\u0131n\u0131za sadece bilgi de\u011fil, ayn\u0131 zamanda anl\u0131k, dinamik ve s\u00fcr\u00fckleyici bir deneyim sunabileceksiniz.<\/p>\n SignalR, Microsoft taraf\u0131ndan geli\u015ftirilen ve ASP.NET Core uygulamalar\u0131n\u0131za ger\u00e7ek zamanl\u0131 web i\u015flevselli\u011fi eklemenizi sa\u011flayan a\u00e7\u0131k kaynakl\u0131 bir k\u00fct\u00fcphanedir. Peki, bu tam olarak ne anlama geliyor ve nas\u0131l \u00e7al\u0131\u015f\u0131yor? Temel olarak, SignalR sunucunuzun ba\u011fl\u0131 istemcilere (web taray\u0131c\u0131lar\u0131, mobil uygulamalar vb.) an\u0131nda veri g\u00f6ndermesini m\u00fcmk\u00fcn k\u0131lar. Geleneksel HTTP istek-yan\u0131t modeli, istemcinin bir istek g\u00f6ndermesini ve sunucunun buna yan\u0131t vermesini gerektirirken, SignalR sunucunun istemcilere aktif olarak “push” yapmas\u0131na olanak tan\u0131r.<\/p>\n SignalR’\u0131n en b\u00fcy\u00fck avantajlar\u0131ndan biri, farkl\u0131 transport mekanizmalar\u0131n\u0131 otomatik olarak y\u00f6netmesidir. Yani geli\u015ftiricilerin WebSockets, Server-Sent Events veya Long Polling gibi teknolojilerle u\u011fra\u015fmas\u0131na gerek kalmaz. SignalR, ba\u011flant\u0131 kurmaya \u00e7al\u0131\u015f\u0131rken istemci ve sunucunun yeteneklerine g\u00f6re en iyi transport y\u00f6ntemini otomatik olarak se\u00e7er. E\u011fer WebSockets destekleniyorsa, bu en verimli y\u00f6ntem tercih edilir; aksi takdirde, daha eski taray\u0131c\u0131lar i\u00e7in Server-Sent Events veya Long Polling kullan\u0131l\u0131r. Bu “d\u00fc\u015fme” (fall-back) mekanizmas\u0131, uygulaman\u0131z\u0131n geni\u015f bir yelpazedeki cihaz ve taray\u0131c\u0131da \u00e7al\u0131\u015fmas\u0131n\u0131 garanti eder.<\/p>\n SignalR’\u0131n temel bile\u015fenleri \u015funlard\u0131r:<\/p>\n SignalR’\u0131n \u00e7al\u0131\u015fma prensibi olduk\u00e7a basittir: \u0130stemci bir SignalR Hub’\u0131na ba\u011flan\u0131r. Ba\u011flant\u0131 kurulduktan sonra, istemci sunucudaki Hub metodlar\u0131n\u0131 \u00e7a\u011f\u0131rabilir. Ayn\u0131 \u015fekilde, sunucu da Hub arac\u0131l\u0131\u011f\u0131yla belirli bir istemciye, bir istemci grubuna veya t\u00fcm ba\u011fl\u0131 istemcilere veri g\u00f6nderebilir. Bu i\u015flem genellikle istemcide tan\u0131mlanm\u0131\u015f JavaScript fonksiyonlar\u0131n\u0131 veya di\u011fer dildeki metodlar\u0131 \u00e7a\u011f\u0131rarak ger\u00e7ekle\u015ftirilir. Bu iki y\u00f6nl\u00fc ileti\u015fim yetene\u011fi, anl\u0131k bildirimler, sohbet odalar\u0131, canl\u0131 veri tablolar\u0131 ve \u00e7ok kullan\u0131c\u0131l\u0131 etkile\u015fimli uygulamalar gibi senaryolar i\u00e7in SignalR’\u0131 m\u00fckemmel bir se\u00e7im haline getirir.<\/p>\n \u015eimdi teoriden prati\u011fe ge\u00e7elim ve .NET Core backend’inizde bir SignalR sunucusunu nas\u0131l yap\u0131land\u0131raca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m inceleyelim. Bu b\u00f6l\u00fcmde, projenizi olu\u015fturmaktan bir Hub tan\u0131mlamaya ve bunu yap\u0131land\u0131rmaya kadar t\u00fcm s\u00fcreci ele alaca\u011f\u0131z. Amac\u0131m\u0131z, Angular istemcilerimizin ba\u011flanabilece\u011fi ve ger\u00e7ek zamanl\u0131 veri al\u0131\u015fveri\u015fi yapabilece\u011fi basit bir API olu\u015fturmak.<\/p>\n \u00d6ncelikle, Visual Studio veya .NET CLI kullanarak yeni bir ASP.NET Core Web API projesi olu\u015ftural\u0131m. Bu, SignalR Hub’\u0131m\u0131z\u0131 bar\u0131nd\u0131racak temel yap\u0131m\u0131z olacak.<\/p>\n <\/code><\/p>\n Bu komutlar, SignalR i\u015flevselli\u011fini projenize eklemek i\u00e7in gerekli NuGet paketini y\u00fcklemeniz gerekiyor. Genellikle ASP.NET Core projelerinde <\/code><\/p>\n \u015eimdi istemcilerimizle ileti\u015fim kuracak Hub s\u0131n\u0131f\u0131n\u0131 olu\u015ftural\u0131m. Proje k\u00f6k dizininde veya uygun bir klas\u00f6rde (\u00f6rn. <\/code><\/p>\n Yukar\u0131daki \u00f6rnekte, .NET 6 ve sonraki s\u00fcr\u00fcmlerde <\/code><\/p>\n Bu yap\u0131land\u0131rma ile, SignalR Hub'\u0131n\u0131za sadece istemcilerden de\u011fil, ayn\u0131 zamanda backend'inizdeki di\u011fer servislerden veya controller'lardan da mesaj g\u00f6nderebilirsiniz. Bu, bir API iste\u011fi i\u015flendikten sonra istemcilere bildirim g\u00f6ndermek istedi\u011finiz durumlarda kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n <\/code><\/p>\n Bu \u00f6rnekte, .NET Core backend'imizi yap\u0131land\u0131rd\u0131\u011f\u0131m\u0131za g\u00f6re, \u015fimdi Angular uygulamas\u0131nda SignalR istemcisini nas\u0131l kuraca\u011f\u0131m\u0131z\u0131 ve backend'imizle nas\u0131l ileti\u015fim kuraca\u011f\u0131m\u0131z\u0131 g\u00f6relim. Bu b\u00f6l\u00fcm, Angular CLI ile proje olu\u015fturmaktan SignalR hizmetini yap\u0131land\u0131rmaya ve bile\u015fenlerinizde kullanmaya kadar uzanacak.<\/p>\n E\u011fer hen\u00fcz bir Angular projeniz yoksa, Angular CLI kullanarak yeni bir proje olu\u015ftural\u0131m:<\/p>\n <\/code><\/p>\n Bu komutlar, yeni bir Angular projesi olu\u015fturacak ve gerekli ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fckleyecektir.<\/p>\n Angular uygulaman\u0131zda SignalR ile etkile\u015fim kurabilmek i\u00e7in Microsoft'un SignalR JavaScript istemci k\u00fct\u00fcphanesini kurman\u0131z gerekir:<\/p>\n <\/code><\/p>\n SignalR ba\u011flant\u0131 mant\u0131\u011f\u0131n\u0131 ayr\u0131 bir hizmet i\u00e7inde tutmak, uygulaman\u0131z\u0131n daha temiz ve y\u00f6netilebilir olmas\u0131n\u0131 sa\u011flar. Angular CLI kullanarak bir hizmet olu\u015ftural\u0131m:<\/p>\n <\/code><\/p>\n \u015eimdi <\/code><\/p>\n Yukar\u0131daki hizmet, SignalR ba\u011flant\u0131s\u0131n\u0131 y\u00f6netir. \u015eimdi <\/code><\/p>\n Ve SignalR Nedir ve Temelleri Nelerdir?<\/h2>\n
\n
Hub<\/code> s\u0131n\u0131f\u0131ndan miras al\u0131n\u0131r.\n <\/li>\nChatHub<\/code>, NotificationHub<\/code>, DataUpdateHub<\/code>).\n<\/div>\n.NET Core ile SignalR Sunucusu Nas\u0131l Kurulur?<\/h2>\n
Ad\u0131m 1: Yeni Bir .NET Core Web API Projesi Olu\u015fturma<\/h3>\n
\ndotnet new webapi -n SignalRDemo.Api\ncd SignalRDemo.Api\n<\/pre>\nSignalRDemo.Api<\/code> ad\u0131nda yeni bir Web API projesi olu\u015fturacak ve proje dizinine ge\u00e7i\u015f yapacakt\u0131r.<\/p>\nAd\u0131m 2: SignalR NuGet Paketlerini Kurma<\/h3>\n
Microsoft.AspNetCore.SignalR<\/code> paketi kullan\u0131l\u0131r.<\/p>\n\ndotnet add package Microsoft.AspNetCore.SignalR\n<\/pre>\nAd\u0131m 3: Bir SignalR Hub'\u0131 Olu\u015fturma<\/h3>\n
Hubs<\/code> klas\u00f6r\u00fc alt\u0131nda) yeni bir C# s\u0131n\u0131f\u0131 dosyas\u0131 (\u00f6rn. NotificationHub.cs<\/code>) olu\u015ftural\u0131m.<\/p>\n\n\/\/ Hubs\/NotificationHub.cs\nusing Microsoft.AspNetCore.SignalR;\nusing System.Threading.Tasks;\n\nnamespace SignalRDemo.Api.Hubs\n{\n public class NotificationHub : Hub\n {\n public async Task SendNotification(string user, string message)\n {\n \/\/ Ba\u011fl\u0131 t\u00fcm istemcilere \"ReceiveNotification\" metodunu \u00e7a\u011f\u0131r\u0131r.\n await Clients.All.SendAsync(\"ReceiveNotification\", user, message);\n }\n\n public async Task SendNotificationToCaller(string message)\n {\n \/\/ Yaln\u0131zca mesaj\u0131 g\u00f6nderen istemciye \"ReceiveNotification\" metodunu \u00e7a\u011f\u0131r\u0131r.\n await Clients.Caller.SendAsync(\"ReceiveNotification\", \"Server\", message);\n }\n\n public override async Task OnConnectedAsync()\n {\n \/\/ Yeni bir istemci ba\u011fland\u0131\u011f\u0131nda \u00e7al\u0131\u015f\u0131r.\n Console.WriteLine($\"Client connected: {Context.ConnectionId}\");\n await Clients.Caller.SendAsync(\"ReceiveNotification\", \"Server\", $\"Ho\u015f geldiniz, Ba\u011flant\u0131 Kimli\u011finiz: {Context.ConnectionId}\");\n await base.OnConnectedAsync();\n }\n\n public override async Task OnDisconnectedAsync(Exception? exception)\n {\n \/\/ Bir istemcinin ba\u011flant\u0131s\u0131 kesildi\u011finde \u00e7al\u0131\u015f\u0131r.\n Console.WriteLine($\"Client disconnected: {Context.ConnectionId}\");\n await base.OnDisconnectedAsync(exception);\n }\n }\n}\n<\/pre>\nNotificationHub<\/code> s\u0131n\u0131f\u0131 Hub<\/code> s\u0131n\u0131f\u0131ndan miras al\u0131r. SendNotification<\/code> metodu, Hub'a ba\u011fl\u0131 t\u00fcm istemcilere bir mesaj g\u00f6nderirken, SendNotificationToCaller<\/code> sadece \u00e7a\u011fr\u0131y\u0131 yapan istemciye mesaj g\u00f6nderir. OnConnectedAsync<\/code> ve OnDisconnectedAsync<\/code> metodlar\u0131, istemci ba\u011flant\u0131lar\u0131 durumunda tetiklenen ya\u015fam d\u00f6ng\u00fcs\u00fc metodlar\u0131d\u0131r.<\/p>\nAd\u0131m 4: Startup.cs (veya Program.cs) Dosyas\u0131n\u0131 Yap\u0131land\u0131rma<\/h3>\n
Program.cs<\/code> dosyas\u0131nda, \u00f6nceki s\u00fcr\u00fcmlerde ise Startup.cs<\/code> dosyas\u0131nda SignalR servislerini ve Hub'\u0131n\u0131z\u0131 uygulaman\u0131za eklemeniz gerekir. Bu, SignalR'\u0131n HTTP pipeline'\u0131na entegre olmas\u0131n\u0131 sa\u011flar.<\/p>\n.NET 6+ (Minimal API) i\u00e7in Program.cs<\/h4>\n
\n\/\/ Program.cs\nusing SignalRDemo.Api.Hubs;\nusing Microsoft.AspNetCore.Builder;\nusing Microsoft.Extensions.DependencyInjection;\n\nvar builder = WebApplication.CreateBuilder(args);\n\n\/\/ SignalR servislerini ekle\nbuilder.Services.AddSignalR();\nbuilder.Services.AddControllers(); \/\/ E\u011fer API Controller kullan\u0131yorsan\u0131z\nbuilder.Services.AddEndpointsApiExplorer();\nbuilder.Services.AddSwaggerGen();\n\n\/\/ CORS yap\u0131land\u0131rmas\u0131 - Angular uygulaman\u0131z\u0131n farkl\u0131 bir kaynaktan ba\u011flanabilmesi i\u00e7in \u00f6nemli\nbuilder.Services.AddCors(options =>\n{\n options.AddPolicy(\"CorsPolicy\",\n builder => builder\n .WithOrigins(\"http:\/\/localhost:4200\") \/\/ Angular uygulaman\u0131z\u0131n adresi\n .AllowAnyMethod()\n .AllowAnyHeader()\n .AllowCredentials()); \/\/ Kimlik do\u011frulama gerektiren ba\u011flant\u0131lar i\u00e7in\n});\n\nvar app = builder.Build();\n\nif (app.Environment.IsDevelopment())\n{\n app.UseSwagger();\n app.UseSwaggerUI();\n}\n\napp.UseHttpsRedirection();\n\napp.UseCors(\"CorsPolicy\"); \/\/ CORS politikas\u0131n\u0131 etkinle\u015ftir\n\napp.UseAuthorization();\n\napp.MapControllers(); \/\/ E\u011fer API Controller kullan\u0131yorsan\u0131z\n\n\/\/ SignalR Hub'\u0131n\u0131 HTTP pipeline'\u0131na map et\napp.MapHub\/notificationHub<\/code> adresine yap\u0131lan istekler NotificationHub<\/code> s\u0131n\u0131f\u0131n\u0131za y\u00f6nlendirilecektir. CORS ayarlar\u0131n\u0131n do\u011fru yap\u0131lmas\u0131 kritik \u00f6neme sahiptir<\/strong>, \u00e7\u00fcnk\u00fc Angular uygulaman\u0131z genellikle farkl\u0131 bir portta (\u00f6rn. 4200) \u00e7al\u0131\u015faca\u011f\u0131 i\u00e7in cross-origin iste\u011fi yapacakt\u0131r.<\/p>\nAd\u0131m 5: Bir Controller'dan veya Servisten Mesaj G\u00f6nderme (Opsiyonel)<\/h3>\n
\n\/\/ Controllers\/NotificationController.cs\nusing Microsoft.AspNetCore.Mvc;\nusing Microsoft.AspNetCore.SignalR;\nusing SignalRDemo.Api.Hubs;\nusing System.Threading.Tasks;\n\nnamespace SignalRDemo.Api.Controllers\n{\n [ApiController]\n [Route(\"[controller]\")]\n public class NotificationController : ControllerBase\n {\n private readonly IHubContextIHubContextAngular Uygulamas\u0131nda SignalR \u0130stemcisi Nas\u0131l Olu\u015fturulur?<\/h2>\n
Ad\u0131m 1: Yeni Bir Angular Projesi Olu\u015fturma<\/h3>\n
\nng new signalr-angular-client\ncd signalr-angular-client\n<\/pre>\nAd\u0131m 2: SignalR \u0130stemci Paketini Kurma<\/h3>\n
\nnpm install @microsoft\/signalr\n<\/pre>\nAd\u0131m 3: SignalR Ba\u011flant\u0131s\u0131n\u0131 Y\u00f6netecek Bir Hizmet Olu\u015fturma<\/h3>\n
\nng generate service signalr\n<\/pre>\nsrc\/app\/signalr.service.ts<\/code> dosyas\u0131n\u0131 a\u015fa\u011f\u0131daki gibi d\u00fczenleyelim:<\/p>\n\n\/\/ src\/app\/signalr.service.ts\nimport { Injectable } from '@angular\/core';\nimport * as signalR from '@microsoft\/signalr';\nimport { Subject } from 'rxjs';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class SignalrService {\n private hubConnection: signalR.HubConnection;\n public data: SubjectstartConnection<\/code> metodu sunucuya ba\u011flan\u0131r. addTransferDataListener<\/code>, sunucudan gelecek 'ReceiveNotification' metodunu dinler ve gelen veriyi data<\/code> Subject'i arac\u0131l\u0131\u011f\u0131yla di\u011fer bile\u015fenlere yayar. sendMessageToHub<\/code> ise istemciden Hub'a mesaj g\u00f6ndermek i\u00e7in kullan\u0131l\u0131r.<\/p>\nwithUrl<\/code> metodu i\u00e7erisinde skipNegotiation: true<\/code> ve transport: signalR.HttpTransportType.WebSockets<\/code> kullanmak, SignalR'\u0131n do\u011frudan WebSockets ile ba\u011flant\u0131 kurmaya \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar ve ba\u015flang\u0131\u00e7 ba\u011flant\u0131 s\u00fcresini k\u0131saltabilir. Ancak, eski taray\u0131c\u0131lar i\u00e7in fall-back mekanizmas\u0131n\u0131 devre d\u0131\u015f\u0131 b\u0131rak\u0131r.\n<\/div>\nAd\u0131m 4: Bile\u015fenlerde SignalR Hizmetini Kullanma<\/h3>\n
SignalrService<\/code>'imizi bir Angular bile\u015feninde nas\u0131l kullanaca\u011f\u0131m\u0131z\u0131 g\u00f6relim. \u00d6rne\u011fin, AppComponent<\/code> i\u00e7erisinde:<\/p>\n\n\/\/ src\/app\/app.component.ts\nimport { Component, OnInit, OnDestroy } from '@angular\/core';\nimport { SignalrService } from '.\/signalr.service';\nimport { Subscription } from 'rxjs';\n\ninterface NotificationMessage {\n user: string;\n message: string;\n}\n\n@Component({\n selector: 'app-root',\n templateUrl: '.\/app.component.html',\n styleUrls: ['.\/app.component.css']\n})\nexport class AppComponent implements OnInit, OnDestroy {\n title = 'SignalR Real-Time Demo';\n notifications: NotificationMessage[] = [];\n newMessage: string = '';\n userName: string = 'AngularClient';\n private dataSubscription: Subscription;\n private connectionSubscription: Subscription;\n\n constructor(public signalrService: SignalrService) { }\n\n ngOnInit() {\n this.signalrService.startConnection();\n this.connectionSubscription = this.signalrService.connectionEstablished.subscribe(connected => {\n if (connected) {\n this.signalrService.addTransferDataListener();\n this.dataSubscription = this.signalrService.data.subscribe((message: NotificationMessage) => {\n this.notifications.push(message);\n console.log('Al\u0131nan bildirim:', message);\n });\n }\n });\n }\n\n sendMessage() {\n if (this.newMessage.trim()) {\n this.signalrService.sendMessageToHub(this.userName, this.newMessage);\n this.newMessage = ''; \/\/ Mesaj\u0131 g\u00f6nderdikten sonra giri\u015f alan\u0131n\u0131 temizle\n }\n }\n\n ngOnDestroy() {\n this.dataSubscription?.unsubscribe();\n this.connectionSubscription?.unsubscribe();\n this.signalrService.stopConnection(); \/\/ Ba\u011flant\u0131y\u0131 temizlemeyi unutmay\u0131n\n }\n}\n<\/pre>\nsrc\/app\/app.component.html<\/code> dosyas\u0131n\u0131 da basit bir UI ile g\u00fcncelleyelim:<\/p>\n\n{{ title }}<\/h2>\n\n