Ana içeriğe geç

Giriş

🎯 Bu modül ne yapar?​

WS (WebSocket) modülü, gerçek zamanlı bildirimler almanızı sağlar - içerik güncellemeleri, sipariş değişiklikleri, kullanıcı eylemleri - anlık güncellemeler almak için sürekli bağlantılar kurarak, anket yapmadan canlı özellikler (bildirimler, canlı sohbet ve gerçek zamanlı panolar gibi) sunar.

Bunu gerçek zamanlı bildirim sisteminiz olarak düşünün - "yeni bir şey var mı?" (anket) diye sürekli sormak yerine, WebSocket bağlantıyı açık tutar ve sunucu olaylar gerçekleştiğinde güncellemeleri anında size iletir.

📖 Basit Açıklama​

Her modern uygulama gerçek zamanlı güncellemeler gerektirir:

  • 🔔 Canlı Bildirimler - Bir şey olduğunda anlık uyarılar
  • 💬 Canlı Sohbet - Kullanıcılar arasında gerçek zamanlı mesajlaşma
  • 📊 Canlı Panolar - Otomatik güncellenen istatistikler ve metrikler
  • 🛒 Sipariş Güncellemeleri - Anlık sipariş durumu değişiklikleri
  • 📝 İçerik Güncellemeleri - Canlı içerik değişiklikleri ve yayınlama
  • 👥 Kullanıcı Aktivitesi - Gerçek zamanlı kullanıcı varlığı ve eylemleri
  • 🔄 Veri Senkronizasyonu - Cihazlar arasında otomatik senkronizasyon

Anketin (tekrarlanan isteklerin) sorunu:

// ❌ Kötü - Her 5 saniyede bir anket
setInterval(async () => {
  const orders = await Orders.getOrders();
  // Bir şey değişti mi kontrol et
  // Bant genişliğini boşa harcar, güncellemeleri geciktirir, sunucu yükü
}, 5000);

Sorunlar:

  • 🔋 Pil tüketimi - Sürekli istekler güç tüketir
  • 📡 Ağ israfı - Çoğu istek "değişiklik yok" döner
  • ⏱️ Gecikmeli güncellemeler - 5 saniyeye kadar gecikme
  • 🖥️ Sunucu yükü - Her birkaç saniyede bir gereksiz istekler

WebSocket çözümü:

// ✅ İyi - Gerçek zamanlı WebSocket bağlantısı
const { WS } = defineOneEntry('https://your-site.oneentry.cloud', {
  token: 'your-app-token'
});

// Olaylara abone ol
WS.subscribe('order.created', (order) => {
  console.log('Yeni sipariş alındı!', order);
  // Anlık bildirim, anket yok!
});

WS.subscribe('content.updated', (content) => {
  console.log('İçerik güncellendi!', content);
  // UI'yi hemen güncelle
});

Faydalar:

  • 🔋 Verimli - Tek sürekli bağlantı
  • 📡 Gerçek zamanlı - Anlık güncellemeler, gecikme yok
  • ⏱️ Düşük gecikme - Alt saniye bildirim teslimatı
  • 🖥️ Azaltılmış yük - Sunucu yalnızca gerektiğinde güncellemeleri gönderir

✨ Temel Kavramlar​

WebSocket Nedir?​

WebSocket, istemci ve sunucu arasında sürekli iki yönlü bir bağlantıdır:

  • Sürekli Bağlantı - Açık kalır, tekrarlanan el sıkışmaları yok
  • İki Yönlü - Hem istemci hem de sunucu mesaj gönderebilir
  • Gerçek Zamanlı - Anlık mesaj teslimatı
  • Olay Tabanlı - Belirli olaylara abone ol
  • Verimli - HTTP anketine kıyasla düşük yük

WebSocket vs HTTP Anketi​

ÖzellikWebSocketHTTP Anketi
BağlantıSürekli (açık kalır)Tekrarlanan bağlantılar
GecikmeAlt saniyeAralığa bağlı (2-30s)
VerimlilikÇok verimliİsraf (birçok boş yanıt)
Sunucu YüküDüşük (sadece olaylar)Yüksek (sürekli istekler)
Pil KullanımıDüşükYüksek (mobil cihazlar)
Kullanım DurumuGerçek zamanlı güncellemelerKritik olmayan güncellemeler için kabul edilebilir

WebSocket Bağlantı Yaşam Döngüsü​

1. İstemci WebSocket sunucusuna bağlanır
   (WS.connect())
   ↓
2. Bağlantı kurulur
   (onOpen olayı tetiklenir)
   ↓
3. İstemci olaylara abone olur
   (WS.subscribe('event.name', callback))
   ↓
4. Sunucu olaylar gerçekleştiğinde gönderir
   (Anlık teslimat)
   ↓
5. İstemci olay mesajlarını alır
   (Geri çağırma fonksiyonu çalıştırılır)
   ↓
6. Bağlantı açık kalır
   (Yeniden bağlantı gerekmez)
   ↓
7. İstemci iş tamamlandığında bağlantıyı keser
   (WS.disconnect())

Yaygın WebSocket Olayları​

Olay TürüAçıklamaÖrnek Kullanım Durumu
order.createdYeni sipariş verildi"Yeni Sipariş!" bildirimini göster
order.updatedSipariş durumu değiştiUI'de sipariş durumunu güncelle
content.publishedYeni içerik yayınlandıİçerik listesini yenile
content.updatedİçerik düzenlendiGösterilen içeriği güncelle
user.registeredYeni kullanıcı kaydolduYönetici panelinde yeni kullanıcıyı göster
payment.completedÖdeme işlendiSipariş durumunu "Ödendi" olarak güncelle
product.outOfStockÜrün stokta yok"Stokta Yok" rozeti göster

WebSocket Modülünü Neden Kullanmalıyım?​

FaydasıAçıklama
Gerçek Zamanlı GüncellemelerAnlık bildirimler, anket gecikmesi yok
VerimliTek bağlantı, düşük yük
Pil DostuMobilde sürekli anket yok
ÖlçeklenebilirSunucu yalnızca gerektiğinde gönderir
Olay TabanlıBelirli olaylara abone ol
Canlı ÖzelliklerSohbet, bildirimler, panoları etkinleştir

🚀 Hızlı Örnek​

📋 Bilmeniz Gerekenler​

WebSocket Bağlantı Yönetimi​

WebSocket bağlantıları dikkatlice yönetilmelidir:

En iyi uygulamalar:

  • Abone olmadan önce bağlantı durumunu kontrol edin
  • Yeniden bağlantı mantığını uygulayın
  • Bağlantı hatalarını nazikçe yönetin
  • Kullanıcı çıkış yaptığında bağlantıyı kesin

Olay Abonelik Yönetimi​

Bağlantı kurulduktan sonra olaylara abone olun

En iyi uygulamalar:

  • Daha kolay iptal için adlandırılmış geri çağırma fonksiyonları kullanın
  • Bağlantı açıldıktan sonra abone olun
  • Bileşen unmount olduğunda aboneliği iptal edin
  • Aynı olaya birden fazla kez abone olmayın

Olay İptali​

Her zaman iş tamamlandığında aboneliği iptal edin, böylece bellek sızıntılarını önleyin:

En iyi uygulamalar:

  • Temizlik fonksiyonlarında aboneliği iptal edin
  • Gerekmediğinde WebSocket'i kapatın
  • SPA'larda bellek sızıntılarını önleyin

Yeniden Bağlantı Stratejisi​

Otomatik yeniden bağlantıyı üstel geri sayım ile uygulayın:

En iyi uygulamalar:

  • Yeniden bağlantı için üstel geri sayım kullanın
  • Maksimum yeniden bağlantı denemelerini sınırlayın
  • Başarılı bağlantıda sayaçları sıfırlayın
  • Yeniden bağlantı olmadan manuel bağlantı kesmeye izin verin

Olay Yükü Yapısı​

Olay yükleri tutarlı bir yapıyı takip eder:

En iyi uygulamalar:

  • Olay yükü yapısını doğrulayın
  • Eksik alanları nazikçe yönetin
  • TypeScript'te yükü tür kontrolü yapın

Hata Yönetimi​

Kapsamlı hata yönetimi uygulayın:

En iyi uygulamalar:

  • Olay işleyicilerinde hataları yakalayın
  • Hataları hata ayıklama için kaydedin
  • Kullanıcı dostu hata mesajları gösterin
  • Hataların uygulamayı çökertmesine izin vermeyin

Performans Optimizasyonu​

WebSocket performansını optimize edin:

En iyi uygulamalar:

  • Yüksek frekanslı olayları yavaşlatın
  • Birden fazla güncellemeyi bir arada gruplandırın
  • UI güncellemelerini debounce edin
  • İşleyicilerde pahalı işlemlerden kaçının

💡 Önemli Notlar​

⚠️ Bağlantı Durumu Yönetimi​

Her zaman abone olmadan önce bağlantı durumunu kontrol edin

🔄 Yeniden Bağlantı Yönetimi​

WebSocket bağlantıları beklenmedik şekilde kopabilir:

  • Ağ değişiklikleri (WiFi'den hücresel ağa)
  • Sunucu yeniden başlatmaları
  • Boşta zaman aşımı

Her zaman yeniden bağlantı mantığını uygulayın

🧹 Bellek Sızıntılarını Önleme​

İş tamamlandığında aboneliği iptal edin, böylece bellek sızıntılarını önleyin

🔒 Güvenlik​

WebSocket bağlantıları kimlik doğrulamalıdır:

  • Token tabanlı kimlik doğrulama (REST API ile aynı)
  • Güvenli WebSocket (WSS) protokolü
  • Her mesajla token göndermeye gerek yok

En iyi uygulamalar:

  • Üretimde WSS (güvenli WebSocket) kullanın
  • Olay işleyicilerinde hassas verileri açığa çıkarmayın
  • İşlemden önce olay yüklerini doğrulayın

📱 Mobil Dikkat Edilmesi Gerekenler​

Mobil cihazlarda WebSocket:

  • Pil kullanımı (verimli, ancak sürekli bağlantı)
  • Arka plandaki bağlantılar sonlandırılabilir
  • Ağ değişiklikleri yeniden bağlantı gerektirir

En iyi uygulamalar:

  • Uygulama ön plana geldiğinde yeniden bağlanın
  • Ağ durumu değişikliklerini yönetin
  • Mobilde kritik olmayan güncellemeler için anket yapmayı düşünün

📊 Hızlı Referans Tablosu​

YöntemAçıklamaKullanım Durumu
connect()WebSocket sunucusuna bağlanBağlantıyı kurmak

❓ Sıkça Sorulan Sorular (SSS)​

WebSocket sunucusuna nasıl bağlanırım?​

Bağlantıyı kurmak için WS.connect() kullanın. Olaylara abone olmadan önce bağlantının açılmasını bekleyin ( onOpen olayını dinleyin). Bağlantı, defineOneEntry()'den aldığınız uygulama token'ı ile kimlik doğrulaması yapılır.

Hangi olaylara abone olabilirim?​

order.created, order.updated, content.published, payment.completed, user.registered gibi olaylara abone olun. Mevcut olaylar, OneEntry yapılandırmanıza ve yönetim panelindeki Events modülü ayarlarına bağlıdır.

Bağlantı kopmalarını nasıl yönetirim?​

Üstel geri sayım ile otomatik yeniden bağlantı uygulayın. onClose ve onError olaylarını dinleyin, ardından bir gecikmeden sonra yeniden bağlanmayı deneyin (örneğin, 1s, 2s, 4s, 8s, maksimum 30s). Başarılı bağlantıda gecikme sayacını sıfırlayın.

Uygulamam için WebSocket mi yoksa anket mi kullanmalıyım?​

Gerçek zamanlı özellikler (canlı sohbet, bildirimler, panolar) için WebSocket kullanın; anlık güncellemelerin önemli olduğu durumlarda. WebSocket bağlantılarının sorunlu olduğu (kısıtlayıcı güvenlik duvarları, mobil arka plan modu) durumlarda kritik olmayan güncellemeler için anket kullanın.

WebSocket abonelikleri ile bellek sızıntılarını nasıl önlerim?​

Bileşenler unmount olduğunda veya bağlantı artık gerekmediğinde her zaman olaylardan aboneliği iptal edin. React'te, useEffect içinde temizlik fonksiyonları kullanın. Vue'da, beforeUnmount yaşam döngüsü kancasını kullanın.

Mobil cihazlarda WebSocket kullanabilir miyim?​

Evet, ancak mobil işletim sistemlerinin arka planda WebSocket bağlantılarını sonlandırabileceğini unutmayın. Uygulama ön plana geldiğinde yeniden bağlanın. Mobil cihazlarda sürekli bağlantıların pil üzerindeki etkisini dikkate alın.

🎓 En İyi Uygulamalar​

  • Bağlantı durumunu kontrol edin - Bağlantı açıldıktan sonra yalnızca abone olun
  • Yeniden bağlantıyı uygulayın - Kopma durumunda otomatik yeniden bağlanma ile üstel geri sayım kullanın
  • Temizlikte aboneliği iptal edin - SPA'larda bellek sızıntılarını önleyin
  • Hataları nazikçe yönetin - Olay işleyicilerinde hataları yakalayın
  • Yüksek frekanslı olayları yavaşlatın - UI'yi güncellemelerle aşırı yüklenmekten kaçının
  • Olay yüklerini doğrulayın - İşlemden önce veri yapısını kontrol edin
  • Adlandırılmış geri çağırmaları kullanın - Aboneliği iptal etmek ve hata ayıklamak daha kolay
  • Bağlantı durumunu kaydedin - Hata ayıklama için açık/kapalı/hata olaylarını takip edin

Modülün kullanıcı arayüzü hakkında daha fazla bilgi https://doc.oneentry.cloud/docs/events/introduction

WS modülünün tanımı​

Bildirim almak için WebSocket aracılığıyla olaylara abone olabilirsiniz


const { WS } = defineOneEntry(
  "your-project-url", {
    "token": "your-app-token"
  }
);

🔗 İlgili Belgeler​