WebSocket Nedir? 25 Dakikada Gerçek Zamanlı Uygulama

Meta Description

WebSocket nedir ve neden kullanılır? Node.js ile 25 dakikada gerçek zamanlı bildirim/chat kurun. Adım adım, örnekli.

Giriş (Introduction)

WebSocket ile “sayfayı yenilemeden” anlık veri akışı sağlayabilirsiniz: canlı bildirim, chat, fiyat güncellemesi, teslimat takibi, çok oyunculu oyun… Hepsinin ortak ihtiyacı düşük gecikme ve sürekli bağlantı.

Birçok ekip hâlâ “polling” (sık sık API çağırma) ya da uzun beklemeli istekler ile idare etmeye çalışıyor. Sonuç: gereksiz trafik, daha yüksek maliyet, mobilde pil tüketimi ve geç gelen güncellemeler.

Bu yazıda WebSocket nedir sorusunu netleştirip, Node.js ile 25 dakikada çalışan bir gerçek zamanlı altyapıyı kuracağız. Üstelik “Bunu neden yapmalıyım?” sorusunu ürün ve maliyet açısından da cevaplayacağız.

WebSocket Nedir? (Kısa ve Net)

WebSocket, istemci (tarayıcı/uygulama) ile sunucu arasında tek bir TCP bağlantısı üzerinden çift yönlü (bidirectional), kalıcı (persistent) iletişim kuran bir protokoldür.

• HTTP gibi istek–cevap döngüsüne mahkûm değildir.
• Bağlantı bir kez açılır, sonra iki taraf da istediği an mesaj gönderebilir.
• Gerçek zamanlı deneyim sağlar (ms seviyesinde güncellemeler).

Hedef anahtar kelime: WebSocket nedir — bu yazıda pratik kurulum ve doğru kullanım senaryolarını göreceksiniz.

Polling vs WebSocket: Neden Geçmeliyim?

Aşağıdaki tablo çoğu ürün ekibinin yaşadığı farkı özetler:

Bunu neden yapmalıyım?

• Maliyet: 10.000 kullanıcı polling yapıyorsa, sunucu sürekli istek yanıtlar. WebSocket’te bağlantı kalıcıdır; gereksiz HTTP overhead azalır.
• Ürün hissi: Bildirimlerin 5–10 saniye gecikmesi bile dönüşümü düşürebilir.
• Ölçeklenebilirlik: Doğru tasarımla (pub/sub, sticky session, mesaj kuyruğu) büyümeye daha hazır olursunuz.

Mimari: Basit Bir Gerçek Zamanlı Bildirim Akışı

Aşağıdaki senaryoyu kuracağız:

1. Kullanıcı siteye girer ve WebSocket bağlantısı açar.
2. Sunucu kullanıcıyı bir “kanala/oda”ya alır (ör. user:123).
3. Sunucu bir olay olduğunda (sipariş durumu değişti, yeni mesaj geldi) ilgili kullanıcıya push eder.

Gerçek hayat örneği:

• E-ticaret: “Kargonuz dağıtıma çıktı” bildirimini anlık gönderirsiniz.
• SaaS: “Build başarıyla tamamlandı” gibi durum değişikliklerini canlı akıtırsınız.

25 Dakikada Kurulum: Node.js + ws ile WebSocket Server

Bu bölümde minimal ama çalışan bir kurulum yapacağız.

1) Projeyi oluşturun

mkdir websocket-demo
cd websocket-demo
npm init -y
npm i ws

2) Basit WebSocket sunucusu

server.js:

const http = require("http");
const WebSocket = require("ws");

const server = http.createServer();
const wss = new WebSocket.Server({ server });

// Kullanıcı bazlı bağlantıları tutmak için basit bir map
// (Production'da daha sağlam bir yaklaşım gerekir)
const clientsByUserId = new Map();

wss.on("connection", (ws, req) => {
  // Örnek: ws://localhost:8080?userId=123
  const url = new URL(req.url, "http://localhost");
  const userId = url.searchParams.get("userId") || "anonymous";

  clientsByUserId.set(userId, ws);

  ws.send(JSON.stringify({
    type: "welcome",
    message: `Bağlandı: ${userId}`
  }));

  ws.on("message", (data) => {
    // İstemciden gelen mesaj
    let msg;
    try {
      msg = JSON.parse(data.toString());
    } catch {
      ws.send(JSON.stringify({ type: "error", message: "Geçersiz JSON" }));
      return;
    }

    // Basit echo + örnek broadcast
    if (msg.type === "ping") {
      ws.send(JSON.stringify({ type: "pong", at: Date.now() }));
    }

    if (msg.type === "broadcast") {
      for (const [, client] of clientsByUserId) {
        if (client.readyState === WebSocket.OPEN) {
          client.send(JSON.stringify({
            type: "broadcast",
            from: userId,
            text: msg.text || ""
          }));
        }
      }
    }
  });

  ws.on("close", () => {
    clientsByUserId.delete(userId);
  });
});

server.listen(8080, () => {
  console.log("WebSocket server running on ws://localhost:8080");
});

Çalıştırın:

node server.js

Frontend: Tarayıcıdan Bağlanma + Mesaj Gönderme

Aşağıdaki HTML dosyasıyla test edeceğiz.

index.html:

<!doctype html>
<html lang="tr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>WebSocket Demo</title>
    <style>
      body { font-family: system-ui, Arial; max-width: 720px; margin: 40px auto; }
      input, button { padding: 10px; }
      pre { background: #0b1020; color: #d7e1ff; padding: 12px; overflow: auto; }
    </style>
  </head>
  <body>
    <h1>WebSocket Demo</h1>

    <label>
      userId:
      <input id="userId" value="123" />
    </label>
    <button id="connect">Bağlan</button>

    <hr />

    <input id="text" placeholder="Broadcast mesajı" />
    <button id="send">Gönder</button>

    <h3>Log</h3>
    <pre id="log"></pre>

    <script>
      const log = document.getElementById('log');
      const userIdEl = document.getElementById('userId');
      const textEl = document.getElementById('text');
      const connectBtn = document.getElementById('connect');
      const sendBtn = document.getElementById('send');

      let ws;

      const write = (obj) => {
        log.textContent += JSON.stringify(obj) + "\n";
      };

      connectBtn.onclick = () => {
        const userId = userIdEl.value.trim();
        ws = new WebSocket(`ws://localhost:8080?userId=${encodeURIComponent(userId)}`);

        ws.onopen = () => write({ event: 'open' });
        ws.onmessage = (e) => {
          try { write(JSON.parse(e.data)); } catch { write({ raw: e.data }); }
        };
        ws.onclose = () => write({ event: 'close' });
      };

      sendBtn.onclick = () => {
        if (!ws || ws.readyState !== WebSocket.OPEN) {
          return write({ error: 'Bağlı değil' });
        }
        ws.send(JSON.stringify({ type: 'broadcast', text: textEl.value }));
      };
    </script>
  </body>
</html>

Test:

• index.html dosyasını tarayıcıda açın.
• Farklı sekmelerde farklı userId ile bağlanın.
• “Gönder” dediğinizde broadcast mesajının herkese gittiğini görün.

Kanal/Oda Mantığı: Mesajı Doğru Kişiye Gönderme

Broadcast herkes için iyidir ama ürünler genelde hedefli bildirim ister.

Basit hedefli gönderim örneği:

function notifyUser(userId, payload) {
  const ws = clientsByUserId.get(userId);
  if (ws && ws.readyState === WebSocket.OPEN) {
    ws.send(JSON.stringify(payload));
  }
}

// Örnek kullanım:
notifyUser("123", { type: "order_status", orderId: "A-100", status: "shipped" });

Bunu neden yapmalıyım?

• Gizlilik: Her mesaj herkese gitmez.
• Performans: Gereksiz veri göndermezsiniz.
• Ürün doğruluğu: Doğru kullanıcı doğru olayı görür.

Production Notları: Güvenlik, Ölçekleme, Dayanıklılık

WebSocket’i canlıya alırken en çok sorun çıkaran yerler burasıdır.

Güvenlik (Mutlaka)

• wss:// kullanın: TLS olmadan (ws://) production’a çıkmayın.
• Kimlik doğrulama: Querystring ile userId vermek sadece demo içindi. Gerçekte:
  • Cookie + session
  • JWT (handshake sırasında doğrulama)
  • Reverse proxy (Nginx) üzerinden auth
• Origin kontrolü: Tarayıcıdan gelen bağlantılarda Origin doğrulayın.

Ölçekleme

Tek sunucuda her şey kolay; çoklu instance’ta mesajı doğru node’a ulaştırmanız gerekir.

Yaygın yaklaşımlar:

• Redis Pub/Sub ile node’lar arası mesajlaşma
• Load balancer’da sticky session (her kullanıcı aynı instance’a düşsün)
• Alternatif: socket.io gibi daha yüksek seviye çözümler (fallback, room yönetimi)

Dayanıklılık

• Heartbeat (ping/pong) ekleyin: kopan bağlantıları tespit edin.
• Reconnect stratejisi: istemci otomatik tekrar bağlansın.
• Mesaj formatı standardı belirleyin: {type, payload, id, ts} gibi.

Sık Sorulan Sorular (FAQ)

1) WebSocket nedir, HTTP’den temel farkı ne?

WebSocket kalıcı ve çift yönlü bağlantı kurar; HTTP ise çoğunlukla istek–cevap modelindedir. WebSocket anlık veri push için daha uygundur.

2) WebSocket her projede kullanılmalı mı?

Hayır. Veri güncellemeleri seyrekse basit HTTP yeterli olabilir. WebSocket, gerçek zamanlı ihtiyaç olduğunda anlamlıdır.

3) WebSocket ile kaç kullanıcıya çıkabilirim?

Sunucu kaynaklarına, mesaj sıklığına ve mimariye bağlıdır. Doğru ölçekleme (ör. Redis Pub/Sub + yatay ölçek) ile çok yüksek sayılara çıkabilirsiniz.

4) WebSocket güvenli mi?

Evet, wss:// ve sağlam kimlik doğrulama ile güvenli hale gelir. En büyük risk genelde yetkilendirme (kimin hangi kanala erişeceği) tarafındadır.

5) Socket.io mu, ws mi?

ws daha düşük seviye ve hafiftir. Socket.io daha “batteries-included” (room, reconnect, fallback) gelir. İhtiyaca göre seçin.

Sonuç

Bu yazıda WebSocket nedir sorusunu netleştirdik ve Node.js + ws ile gerçek zamanlı bir bağlantıyı adım adım kurduk: bağlantı açma, mesajlaşma, broadcast ve kullanıcıya özel bildirim.

Şimdi siz de şu adımı atın: Kendi projenizde bir senaryo seçin (ör. “sipariş durum güncellemesi” veya “admin panel canlı log”) ve bu demo üzerine ekleyin. Takıldığınız yerde yoruma yazın; kullandığınız stack’i (Node, Go, .NET, vs.) söyleyin, aynı yaklaşımı ona göre uyarlayalım.