Ağ & Gerçek Zamanlı7 dk

Gerçek Zamanlı Mobil Uygulamalarda WebSocket ve TCP Anatomisi

Canlı konum, sohbet ve bildirim sistemlerinde düşük gecikme: TCP 3-Way Handshake, WebSocket yükseltme ve mobil pil optimizasyonu.

YazarŞakir Ortataş

Gerçek Zamanlı Mobil Uygulamalarda WebSocket ve TCP Anatomisi — İnteraktif Sistem Modeli

Socket & Network

İzometrik modeli inceleyin veya sekmeler arasında geçiş yaparak farklı mimarileri keşfedin.

Kurye takip uygulamaları, anlık mesajlaşma ve borsa panellerinde HTTP polling (sürekli istek atma) hem sunucu trafiğini tüketir hem de mobil cihazların bataryasını hızla bitirir. Gerçek zamanlı haberleşmenin temeli kalıcı TCP bağlantısı ve WebSocket protokolüdür.

TCP Handshake ve WebSocket Yükseltmesi

İstemci ile sunucu önce SYN, SYN-ACK, ACK adımlarıyla güvenli bir TCP oturumu kurar. Ardından standart bir HTTP GET isteği ile 'Connection: Upgrade' başlığı gönderilerek protokol WebSocket'e dönüştürülür. Artık tek bir açık soket üzerinden iki yönlü (full-duplex) veri akışı başlar.

Mobil Ağlarda Bağlantı Kopmaları ve Heartbeat

Mobil cihazlar baz istasyonu değiştirdiğinde veya tünele girdiğinde TCP soketi sessizce düşebilir. Gelişmiş ping/pong kalp atışı (heartbeat) paketleri ve akıllı yeniden bağlanma (reconnection) algoritmalarıyla bağlantı kesintileri kullanıcıya hissettirilmeden onarılır.

Oda (Room) Bazlı Yayın ve Ölçeklenme

Binlerce aktif soket bağlantısını yönetirken mesajları tüm kullanıcılara broadcast etmek yerine, Socket.io veya Redis Pub/Sub odaları üzerinden yalnızca ilgili alıcılara ileterek sunucu CPU tüketimi minimumda tutulur.

Gerçek Zamanlı Mobil Uygulamalarda WebSocket ve TCP Anatomisi · Canlı Kod BloğuAğ & Gerçek Zamanlı · TS 5.x
Gerçek Zamanlı Mobil Uygulamalarda WebSocket ve TCP Anatomisi · Canlı Kod Bloğu
60 FPS · TS 5.x · Running
1@WebSocketGateway({ cors: { origin: "*" }, namespace: "chat" })
2export class RealtimeChatGateway implements OnGatewayConnection, OnGatewayDisconnect {
3 @WebSocketServer()
4 server: Server;
5
6 handleConnection(client: Socket) {
7 const userId = client.handshake.auth?.userId;
8 if (!userId) return client.disconnect(true);
9 client.join(`room:${userId}`);
10 }
11
12 @SubscribeMessage("sendMessage")
13 async handleMessage(@ConnectedSocket() client: Socket, @MessageBody() data: ChatMessageDto) {
14 this.server.to(`room:${data.recipientId}`).emit("newMessage", {
15 ...data,
16 id: randomUUID(),
17 timestamp: Date.now(),
18 });
19 }
20
21 handleDisconnect(client: Socket) {}
22}
Blog

Diğer Teknik Makaleler

NestJS & Backend•</> İnteraktif
Şakir Ortataş

NestJS ve Node.js ile Ölçeklenebilir Mikroservis Mimarisi

Monolitik backend'den modüler mikroservislere geçiş: Bağımlılık enjeksiyonu, BullMQ kuyruk yönetimi ve hataya dayanıklı servis tasarımı.

NestJS & Backend7 dk
React Native•</> İnteraktif
Şakir Ortataş

React Native ile 60 FPS Mobil Uygulama Geliştirme Rehberi

JavaScript thread'ini rahatlatarak akıcı mobil arayüzler inşa etmek: Reanimated 3, Gesture Handler ve TurboModules ilkeleri.

React Native6 dk
Performans & Cache•</> İnteraktif
Şakir Ortataş

Redis ve LRU Cache ile Backend Performans Optimizasyonu

Veritabanı yükünü %80 azaltan çok katmanlı önbellek mimarisi: Memory-cache, Redis invalidation stratejileri ve Cache-Aside deseni.

Performans & Cache5 dk
React & Next.js•</> İnteraktif
Şakir Ortataş

Next.js ve React Uygulamalarında Modern Render Mimarisini Anlamak

Server Components, Client Components, Streaming SSR ve Suspense: Web sitelerinde sıfır JS istemci paketiyle maksimum hız.

React & Next.js6 dk
Veritabanı•</> İnteraktif
Şakir Ortataş

PostgreSQL B-Tree İndeksleme ve Veritabanı Sorgu Hızlandırma

Sorguları milisaniyeler seviyesine indiren indeks mimarisi: B-Tree ağaç yapısı, EXPLAIN ANALYZE kullanımı ve bileşik indeks stratejileri.

Veritabanı8 dk
İletişim

Teknik vizyonunuzu çalışan bir ürüne dönüştürelim

TypeScript · React Native · React · NestJS · Node.js