WebSockets
Angular’da WebSockets, istemci ile sunucu arasında çift yönlü ve gerçek zamanlı iletişim sağlamak için kullanılan güçlü bir teknolojidir. Geleneksel HTTP isteklerinin aksine, WebSockets sürekli açık bir bağlantı üzerinden veri akışı sağlar, bu sayede anlık bildirimler, canlı sohbetler, gerçek zamanlı paneller ve dinamik veri güncellemeleri gibi uygulamalarda büyük avantaj sağlar.
Angular projelerinde WebSockets kullanımı, bileşen tabanlı yaklaşım ve RxJS tabanlı reaktif veri akışı ile bütünleştiğinde çok daha verimli olur. WebSocketSubject gibi RxJS araçları sayesinde Angular, WebSocket bağlantılarını reaktif bir şekilde yönetmeye olanak tanır ve bileşenlerin yaşam döngüsü ile entegre çalışarak gereksiz yeniden render’ların önüne geçer.
Bu eğitimde, Angular’da WebSocket bağlantısı kurmayı, gelen ve giden mesajları yönetmeyi, uygulama durumunu takip etmeyi ve performansı optimize etmeyi öğreneceksiniz. Ayrıca, BehaviorSubject kullanarak paylaşılan durum yönetimi, güvenli abonelikler ve bileşen yaşam döngüsü boyunca kontrollü bağlantı kapatma gibi ileri teknikler de ele alınacaktır.
Öğrenciler, sadece WebSocket entegrasyonunu öğrenmekle kalmayacak, aynı zamanda modern Angular uygulamalarında ölçeklenebilir, sürdürülebilir ve temiz bir mimari oluşturmayı da öğreneceklerdir.
Temel Örnek
typescript// app/websocket.service.ts
import { Injectable } from '@angular/core';
import { webSocket, WebSocketSubject } from 'rxjs/webSocket';
import { BehaviorSubject, Observable } from 'rxjs';
@Injectable({ providedIn: 'root' })
export class WebSocketService {
private socket$: WebSocketSubject<any>;
private messagesSubject = new BehaviorSubject<string[]>([]);
public messages$ = this.messagesSubject.asObservable();
connect(url: string): void {
if (!this.socket$ || this.socket$.closed) {
this.socket$ = webSocket(url);
this.socket$.subscribe({
next: (msg) => {
const current = this.messagesSubject.value;
this.messagesSubject.next([...current, msg]);
},
error: (err) => console.error('WebSocket Hatası:', err),
complete: () => console.log('WebSocket Bağlantısı Kapandı')
});
}
}
sendMessage(message: string): void {
if (this.socket$) {
this.socket$.next(message);
}
}
close(): void {
this.socket$?.complete();
}
}
// app/chat.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { WebSocketService } from './websocket.service';
import { Subscription } from 'rxjs';
@Component({
selector: 'app-chat',
template: ` <div class="chat"> <div *ngFor="let msg of messages">{{ msg }}</div> <input [(ngModel)]="inputMessage" placeholder="Mesaj yazın..." /> <button (click)="send()">Gönder</button> </div>
`
})
export class ChatComponent implements OnInit, OnDestroy {
messages: string[] = [];
inputMessage = '';
private sub: Subscription;
constructor(private wsService: WebSocketService) {}
ngOnInit(): void {
this.wsService.connect('wss://echo.websocket.events');
this.sub = this.wsService.messages$.subscribe(msgs => this.messages = msgs);
}
send(): void {
if (this.inputMessage.trim()) {
this.wsService.sendMessage(this.inputMessage);
this.inputMessage = '';
}
}
ngOnDestroy(): void {
this.sub.unsubscribe();
this.wsService.close();
}
}Yukarıdaki örnekte, WebSocket bağlantısı bir servis üzerinden yönetilerek bileşenlerin yalnızca görselleştirme ve kullanıcı etkileşimine odaklanması sağlanmıştır. BehaviorSubject, mesajların reaktif bir şekilde yönetilmesine olanak tanır ve doğrudan durum mutasyonlarını önleyerek veri bütünlüğünü korur.
ChatComponent içinde, OnInit ve OnDestroy hook’ları kullanılarak güvenli bir şekilde bağlantı açma ve kapama işlemleri gerçekleştirilmiştir. Bu sayede bellek sızıntılarının önüne geçilir. Ayrıca Observable tabanlı veri akışı, Angular’ın reaktif paradigmasıyla uyumlu çalışır ve gereksiz yeniden render’ları engeller.
Bu örnek, WebSocket entegrasyonunun temellerini, bileşen durumu ve veri akışının yönetimini, performans ve sürdürülebilirlik odaklı olarak göstermektedir.
Pratik Örnek
typescript// app/real-time-dashboard.component.ts
import { Component, OnInit, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
import { WebSocketService } from './websocket.service';
import { Subscription } from 'rxjs';
@Component({
selector: 'app-real-time-dashboard',
template: ` <h2>Gerçek Zamanlı Veri Paneli</h2> <div *ngIf="serverData.length"> <div *ngFor="let item of serverData"> <strong>{{item.timestamp}}:</strong> {{item.value}} </div> </div>
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class RealTimeDashboardComponent implements OnInit, OnDestroy {
serverData: any[] = [];
private sub: Subscription;
constructor(private wsService: WebSocketService) {}
ngOnInit(): void {
this.wsService.connect('wss://echo.websocket.events');
this.sub = this.wsService.messages$.subscribe(data => {
this.serverData = data.map(msg => ({
timestamp: new Date().toLocaleTimeString(),
value: msg
}));
});
}
ngOnDestroy(): void {
this.sub.unsubscribe();
this.wsService.close();
}
}WebSockets ile çalışırken Angular’da bazı en iyi uygulamalar ve dikkat edilmesi gereken noktalar vardır:
• Bileşenleri hafif tutun: bağlantı ve hata yönetimi servislerde olmalıdır.
• Reaktif programlama kullanın: durum mutasyonlarından kaçının, RxJS operatörleri ile veri akışını dönüştürün.
• Prop drilling’den kaçının: durum paylaşımı servisler veya global store (NgRx) ile yapılmalıdır.
• ChangeDetectionStrategy.OnPush kullanarak performansı artırın ve gereksiz render’ları önleyin.
• Abonelikleri yönetin: takeUntil, async pipe veya manuel abonelik iptali ile bellek sızıntılarını engelleyin.
• Hata yönetimi ve otomatik yeniden bağlanmayı uygulayın.
• Güvenlik için wss:// kullanın ve hassas verileri doğrudan iletmekten kaçının.
Bu önlemler, WebSocket tabanlı Angular uygulamalarında sürdürülebilir, güvenli ve yüksek performanslı bir mimari sağlar.
📊 Referans Tablosu
| Angular Element/Concept | Description | Usage Example |
|---|---|---|
| WebSocketService | Bağlantı ve veri akışını yöneten servis | this.wsService.connect('wss://server') |
| BehaviorSubject | Durum yönetimi ve reaktif güncellemeler | this.messagesSubject.next([...value, msg]) |
| ChangeDetectionStrategy.OnPush | Performans optimizasyonu | @Component({changeDetection: OnPush}) |
| Lifecycle Hooks | Bileşen yaşam döngüsü yönetimi | ngOnInit(), ngOnDestroy() |
| RxJS Operators | Veri akışını dönüştürmek ve filtrelemek | messages$.pipe(map(...)) |
Özetle, Angular’da WebSockets, SPA uygulamalarında gerçek zamanlı iletişim sağlamak için güçlü bir yöntem sunar. Kullanıcı deneyimini kesintisiz ve dinamik hale getirirken, reaktif veri akışı ve bileşen tabanlı mimari ile sürdürülebilir uygulamalar oluşturmayı sağlar.
WebSockets konusunda uzmanlaşmak, Angular’ın reaktif mimarisini, veri akışını ve durum yönetimini anlamayı gerektirir. Bir sonraki adım olarak NgRx ile entegrasyon, özel interceptors ve RxJS backpressure teknikleri üzerinde çalışılması önerilir.
Kaynaklar: Angular Resmi Dokümantasyonu, RxJS Guide, Angular Real-Time Patterns, Angular Blog.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek