“ WebSocket Nedir? Web Uygulamalarında Gerçek Zamanlı İletişim

Giriş: Web uygulamaları günümüzde giderek daha fazla gerçek zamanlı iletişim ihtiyacı duyuyor. Bu ihtiyacı karşılayan teknolojilerden biri de WebSocket’tir. WebSocket, web tarayıcılarıyla sunucu arasında tam çift yönlü iletişim sağlayan bir iletişim protokolüdür. Bu makalede, WebSocket’in ne olduğunu, nasıl çalıştığını ve gerçek zamanlı iletişimde nasıl kullanıldığını detaylarıyla inceleyeceğiz.

İçindekiler:

1-) WebSocket Nedir

• WebSocket’in temel tanımı ve amacı
• HTTP ile WebSocket arasındaki farklar

2-) WebSocket Nasıl Çalışır?

• Bağlantı kurma ve sonlandırma mekanizması
• WebSocket Handshake adımları
• İletişim akışı: İstemci ve sunucu tarafındaki işleyiş

3-) WebSocket Avantajları

• Gerçek zamanlı iletişimin önemi
• Veri yolu üzerinde düşük gecikme süresi
• Sunucu yükünün azaltılması

4-) WebSocket Kullanım Alanları

• Anlık sohbet uygulamaları
• Çevrimiçi oyunlar ve çok oyunculu platformlar
• Fiyat takip sistemleri ve canlı güncellemeler
• Uzaktan kontrol ve izleme uygulamaları

5-) WebSocket Kullanımı için Adımlar

• İstemci tarafında WebSocket bağlantısının oluşturulması
• Sunucu tarafında WebSocket desteğinin sağlanması

6-) WebSocket Güvenliği

• WebSocket üzerinde güvenli iletişim (WebSocket Secure — WSS)
• WebSocket güvenliği için SSL sertifikası gerekliliği

7-) WebSocket ile Hata Yönetimi

• Bağlantı kopmalarına karşı yeniden bağlantı mekanizması
• Sunucu veya istemci taraflı hata durumları ve nasıl ele alınabileceği

8-) Alternatif Teknolojiler

• Server-Sent Events (SSE) ile karşılaştırma
• Long Polling ve Polling yöntemleri

9-) WebSocket İpuçları ve Püf Noktaları

• Oturum yönetimi ve kullanıcı tanımlaması
• Veri sıkıştırma ve protokol verimliliği

WebSocket Nedir ?

WebSocket, web tarayıcıları ve sunucular arasında tam çift yönlü iletişim sağlayan bir iletişim protokolüdür. Geleneksel HTTP istek-cevap modelinin aksine, WebSocket sürekli bir bağlantı üzerinden veri akışı sağlar. Bu sayede anlık güncellemeler ve gerçek zamanlı etkileşimler kolayca yapılabilir.

HTTP ile WebSocket arasındaki farklar

1. İletişim Türü:

• HTTP (Hypertext Transfer Protocol): HTTP, istemci-sunucu arasında istek-cevap temelli iletişim sağlar. İstemci, sunucuya bir istek gönderir ve sunucu bu isteği işler ve cevap olarak bir yanıt döner. İletişim tek yönlüdür; istemci istek gönderir, sunucu cevap verir.
• WebSocket: WebSocket ise tam çift yönlü iletişim sağlar. İstemci ve sunucu arasında sürekli bir bağlantı kurulur ve her iki taraf da istediği zaman veri gönderebilir. İletişim iki yönlüdür; her iki taraf da bağımsız olarak veri gönderebilir.

2. Bağlantı Süresi:

• HTTP: HTTP, her istekte ayrı bir bağlantı kurar ve sonlandırır. Her istek için sunucu ile yeni bir TCP bağlantısı oluşturulması gerekmektedir. Bu durumda gereksiz bağlantı açma-kapama süreçleri ve ek yük ortaya çıkar.
• WebSocket: WebSocket, tek bir bağlantı üzerinden sürekli iletişim sağladığı için yeni bağlantı kurma gereksinimi olmaz. Bu, gereksiz yükü azaltır ve iletişim süresini hızlandırır.

3. Veri Akışı:

• HTTP: HTTP’de istemci tarafından sunucuya bir istek gönderildiğinde, sunucu cevap olarak veriyi gönderir. İstemci tarafı veri isteğine cevap vermez.
• WebSocket: WebSocket’te bağlantı kurulduğunda her iki taraf da istediği zaman veri gönderebilir. İstemci ve sunucu, bağlantı üzerinden bağımsız olarak veri gönderebilir ve bu veriler anlık olarak karşı tarafa iletilir.

4. Kullanım Senaryoları:

• HTTP: Genellikle web sayfaları ve kaynakları indirmek için kullanılır. Sayfa yükleme, resim, stil dosyaları gibi istek-cevap temelli işlemlerde kullanılır.
• WebSocket: Gerçek zamanlı güncellemeler gerektiren uygulamalarda (örneğin, anlık sohbet, canlı güncellemeler, oyunlar) kullanılır. Sürekli iletişim gerektiren durumlarda tercih edilir.

5. Veri İletimi ve Formatı:

• HTTP: HTTP ile genellikle metin tabanlı veriler (HTML, JSON, XML) iletilir. Veri formatı istemci ve sunucu arasında önceden belirlenir.
• WebSocket: WebSocket’te genellikle metin veya binary verileri iletebilirsiniz. Bu, daha çeşitli veri tiplerini iletebilme esnekliği sağlar.

6. Bağlantı ve Sunucu Yükü:

• HTTP: Her istek için yeni bir bağlantı kurulduğu için sunucu üzerinde daha fazla yük oluşabilir. Sunucu, her istek için ayrı ayrı işlem yapar.
• WebSocket: Tek bir bağlantı üzerinden sürekli iletişim sağlandığı için sunucu üzerinde daha düşük yük oluşur. Tek bir bağlantı, birden çok istek-cevap işleminde kullanılabilir.

WebSocket Nasıl Çalışır?

• Bağlantı Kurma ve Sonlandırma Mekanizması: WebSocket, sunucuyla istemci arasında bir bağlantı oluşturarak çalışır. Bu bağlantı, istemci veya sunucu tarafından kapatılmadıkça devam eder.
• WebSocket Handshake Adımları: Bağlantı kurma aşamasında istemci ve sunucu arasında bazı bilgiler değiş tokuş edilir. Bu, HTTP üzerinden gerçekleşen bir anlaşma sürecidir.
• İletişim Akışı: İstemci veya sunucu, mesajları bağlantı üzerinden gönderir. Karşı taraftan gelen mesajlar anlık olarak alınabilir. Bu sayede sürekli bir iletişim akışı sağlanır.

WebSocket Avantajları

• Gerçek Zamanlı İletişimin Önemi: Anlık güncellemeler gerektiren uygulamalarda, WebSocket sayesinde gecikme olmadan veri akışı sağlanır.
• Veri Yolu Üzerinde Düşük Gecikme Süresi: WebSocket, tek bir bağlantı üzerinden veri iletimi yapar ve gereksiz yeniden bağlanma süreçlerini ortadan kaldırır, bu da gecikmeyi azaltır.
• Sunucu Yükünün Azaltılması: HTTP’de olduğu gibi her istek için yeni bir bağlantı kurma gereksinimi olmadığı için sunucu yükü azalır.

WebSocket Kullanım Alanları

• Anlık Sohbet Uygulamaları: WhatsApp ve Messenger gibi anlık sohbet uygulamaları, WebSocket sayesinde kullanıcıların anlık mesajlarını gerçek zamanlı olarak iletebilir.
• Çevrimiçi Oyunlar ve Çok Oyunculu Platformlar: Çok oyunculu oyunlar, oyuncular arası etkileşimi gerçek zamanlı olarak sağlayarak daha iyi bir deneyim sunabilir.
• Fiyat Takip Sistemleri ve Canlı Güncellemeler: Finansal platformlar, piyasa fiyatlarını anlık olarak takip etmek için WebSocket’i kullanabilir.
• Uzaktan Kontrol ve İzleme Uygulamaları: Endüstriyel sistemler veya akıllı ev uygulamaları, uzaktan izleme ve kontrol için WebSocket’i tercih edebilir.

WebSocket Kullanımı için Adımlar

• İstemci Tarafında WebSocket Bağlantısının Oluşturulması: JavaScript kullanarak, istemci tarafında WebSocket bağlantısı oluşturulabilir. Bu bağlantı üzerinden mesajlar gönderilip alınabilir.
• Sunucu Tarafında WebSocket Desteğinin Sağlanması: Sunucu tarafında, WebSocket istemcilerinden gelen bağlantıları kabul edip yönetecek bir yapı kurulmalıdır.

// WebSocket bağlantısını oluşturma
const socket = new WebSocket("ws://localhost:8080"); // WebSocket sunucusunun adresi

// Bağlantı başarılı şekilde kurulduğunda
socket.onopen = (event) => {
  console.log("WebSocket bağlantısı başarılı şekilde kuruldu.");
  
  // Veri gönderme örneği
  const message = { type: "text", content: "Merhaba, WebSocket!" };
  socket.send(JSON.stringify(message));
};

// Sunucudan mesaj alındığında
socket.onmessage = (event) => {
  const receivedMessage = JSON.parse(event.data);
  console.log("Sunucudan gelen mesaj:", receivedMessage);
};

// Bağlantı kapandığında
socket.onclose = (event) => {
  if (event.wasClean) {
    console.log(`WebSocket bağlantısı temiz şekilde kapatıldı, kod: ${event.code}, neden: ${event.reason}`);
  } else {
    console.error("WebSocket bağlantısı beklenmedik şekilde kapatıldı.");
  }
};

// Bağlantı hatası durumunda
socket.onerror = (error) => {
  console.error("WebSocket bağlantısında hata oluştu:", error);
};

WebSocket Güvenliği

• WebSocket Üzerinde Güvenli İletişim: WebSocket Secure (WSS), verilerin şifrelenerek iletilmesini sağlar. Bu, güvenli iletişim için önemlidir.
• WebSocket Güvenliği için SSL Sertifikası Gerekliliği: WSS kullanımı için sunucunun SSL sertifikası gerekmektedir.

WebSocket ile Hata Yönetimi

• Bağlantı Kopmalarına Karşı Yeniden Bağlantı Mekanizması: İnternet bağlantısının kesilmesi veya beklenmedik bağlantı kopmalarına karşı, istemci veya sunucu tarafında yeniden bağlantı sağlama mekanizmaları kurulabilir.

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

const server = http.createServer((req, res) => {
  res.writeHead(200, { "Content-Type": "text/plain" });
  res.end("WebSocket sunucusuna hoş geldiniz!");
});

server.listen(8080, () => {
  console.log("HTTP sunucusu 8080 portunda dinleniyor.");
});

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

// Bağlantıları depolamak için bir set kullanalım
const clients = new Set();

function heartbeat() {
  // Bağlantıları kontrol et ve gerekirse bağlantıyı kapat
  clients.forEach((socket) => {
    if (!socket.isAlive) {
      return socket.terminate();
    }

    // Her bir bağlantının durumunu sıfırlayalım
    socket.isAlive = false;
    socket.ping();
  });
}

// Her 30 saniyede bir bağlantı durumunu kontrol et
const interval = setInterval(heartbeat, 30000);

wss.on("connection", (socket) => {
  console.log("Yeni bir WebSocket bağlantısı kuruldu.");

  // Bağlantının durumunu canlı olarak işaretleyelim
  socket.isAlive = true;

  // Mesaj alındığında
  socket.on("message", (message) => {
    console.log(`Client'dan gelen mesaj: ${message}`);
    socket.send(`Sunucudan gelen cevap: ${message}`);
  });

  // Bağlantı kapandığında
  socket.on("close", () => {
    console.log("WebSocket bağlantısı kapatıldı.");
    clients.delete(socket);
  });

  // Her bir bağlantının durumunu sıkça kontrol etmek için 'pong' mesajları gönderelim
  socket.on("pong", () => {
    socket.isAlive = true;
  });

  // Yeni bağlantıyı sete ekleyelim
  clients.add(socket);
});

// Sunucu kapanırken interval'i temizle
wss.on("close", () => {
  clearInterval(interval);
});

• Sunucu veya İstemci Taraflı Hata Durumları: Bağlantı sırasında veya işlem yaparken ortaya çıkabilecek hataların yönetimi için uygun hata durumları ele alınmalıdır.

Alternatif Teknolojiler

• Server-Sent Events (SSE) ile Karşılaştırma: SSE, sunucudan istemciye tek yönlü veri akışı sağlar. WebSocket’ten farklı olarak, sadece sunucudan istemciye veri iletimi yapılır.
• Long Polling ve Polling Yöntemleri: Eski yöntemlerden biri olan Long Polling, sürekli olarak sunucuya istek gönderip cevap almayı sağlar. Polling ise belirli aralıklarla sunucuya istek gönderip güncellemeleri takip eder.

WebSocket İpuçları ve Püf Noktaları

• Oturum Yönetimi ve Kullanıcı Tanımlaması: WebSocket bağlantısının güvenliği için oturum yönetimi ve kimlik doğrulama mekanizmaları önemlidir.

const http = require("http");
const WebSocket = require("ws");
const cookie = require("cookie");
const { v4: uuidv4 } = require("uuid");

const server = http.createServer((req, res) => {
  const cookies = cookie.parse(req.headers.cookie || "");
  const sessionId = cookies.sessionId;

  if (!sessionId) {
    const newSessionId = uuidv4();
    res.setHeader("Set-Cookie", `sessionId=${newSessionId}`);
  }

  res.writeHead(200, { "Content-Type": "text/plain" });
  res.end("WebSocket sunucusuna hoş geldiniz!");
});

server.listen(8080, () => {
  console.log("HTTP sunucusu 8080 portunda dinleniyor.");
});

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

const sessions = {};

wss.on("connection", (socket, req) => {
  const cookies = cookie.parse(req.headers.cookie || "");
  const sessionId = cookies.sessionId;

  if (!sessionId || !sessions[sessionId]) {
    console.log("Kimlik doğrulama hatası veya oturum bulunamadı.");
    socket.close();
    return;
  }

  const user = sessions[sessionId];
  console.log(`Oturumu açan kullanıcı: ${user.username}`);

  socket.on("message", (message) => {
    console.log(`Gelen mesaj: ${message} from ${user.username}`);
    // Mesaj işleme ve yanıtlama işlemleri burada yapılabilir
  });

  socket.on("close", () => {
    console.log(`${user.username} kullanıcısının WebSocket bağlantısı kapatıldı.`);
  });
});

// Kullanıcı oturumu başlatma örneği
app.post("/login", (req, res) => {
  const { username, password } = req.body;

  // Kullanıcı kimlik doğrulama işlemleri burada yapılır

  if (authenticated) {
    const sessionId = uuidv4();
    sessions[sessionId] = { username };
    res.setHeader("Set-Cookie", `sessionId=${sessionId}`);
    res.status(200).send("Giriş başarılı");
  } else {
    res.status(401).send("Giriş başarısız");
  }
});

// Kullanıcı oturumu kapatma örneği
app.post("/logout", (req, res) => {
  const cookies = cookie.parse(req.headers.cookie || "");
  const sessionId = cookies.sessionId;

  if (sessionId && sessions[sessionId]) {
    delete sessions[sessionId];
    res.setHeader("Set-Cookie", `sessionId=; expires=Thu, 01 Jan 1970 00:00:00 UTC;`);
    res.status(200).send("Oturum kapatıldı");
  } else {
    res.status(401).send("Oturum bulunamadı");
  }
});

• Veri Sıkıştırma ve Protokol Verimliliği: Veri sıkıştırma algoritmaları kullanarak veri akışını optimize etmek, bant genişliği ve performans açısından faydalı olabilir. Veri sıkıştırma algoritmalarını WebSocket bağlantısında kullanmak için pako adlı bir JavaScript kütüphanesi kullanabiliriz.

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

const server = http.createServer((req, res) => {
  res.writeHead(200, { "Content-Type": "text/plain" });
  res.end("WebSocket sunucusuna hoş geldiniz!");
});

server.listen(8080, () => {
  console.log("HTTP sunucusu 8080 portunda dinleniyor.");
});

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

wss.on("connection", (socket) => {
  console.log("Yeni bir WebSocket bağlantısı kuruldu.");

  socket.on("message", (message) => {
    console.log(`Client'dan gelen sıkıştırılmış mesaj: ${message}`);

    // Gelen sıkıştırılmış veriyi açalım
    const uncompressedData = pako.inflate(message, { to: "string" });
    console.log(`Açılmış veri: ${uncompressedData}`);

    // Veriyi geri gönderelim (isteğe bağlı)
    const compressedData = pako.deflate(uncompressedData, { to: "string" });
    socket.send(compressedData);
  });

  socket.on("close", () => {
    console.log("WebSocket bağlantısı kapatıldı.");
  });
});

Bu detaylı makale ile WebSocket konusunu kapsamlı bir şekilde anlamış olacaksınız.