Vue Academy · Ders

Yeniden Bağlanma Özellikli useWebSocket Composable'ı

WebSocket'i bir composable içinde sarmalama, üstel geri çekilmeyle otomatik yeniden bağlanma ve durumu izleme.

4. ders / 413 adım

Yeniden Bağlanma Özellikli useWebSocket Composable'ı, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

WebSockets'leri Birleştirilebilir Bir Yapıyla Sarmalama

Bileşenlere dağılmış ham WebSocket işlemleri kısa sürede karmaşıklaşır. Bir useWebSocket birleştirilebilir yapısı bağlantı durumunu, yeniden bağlanmayı ve mesaj işlemlerini merkezileştirir; böylece bunu her yerde yeniden kullanabilirsiniz.

Bunu adım adım oluşturacağız.

Bir Ref ile Durumu İzleme

Arayüzün "Bağlanıyor", "Açık" veya "Kapalı" etiketlerini gösterebilmesi için bağlantı durumunu reaktif bir status ref'i olarak dışa açın.

import { ref } from "vue"

export function useWebSocket(url) {
  const status = ref("CLOSED") // CONNECTING | OPEN | CLOSED
  // ...
  return { status }
}

connect İşlevi

Soketi açma işlemini içteki bir connect işlevinde kapsülleyin; böylece yeniden bağlanmak için bu işlevi daha sonra tekrar çağırabilirsiniz. Her yaşam döngüsü olayında status değerini güncelleyin.

let ws
function connect() {
  status.value = "CONNECTING"
  ws = new WebSocket(url)
  ws.onopen = () => { status.value = "OPEN" }
  ws.onclose = () => { status.value = "CLOSED"; scheduleReconnect() }
}

Artan Gecikmeyle Yeniden Bağlanma

Sıkı bir döngü içinde anında yeniden bağlanmaya çalışmak sunucuyu aşırı yükler. Üstel bekleme kullanın: her başarısız denemeden sonra, bir üst sınıra kadar daha uzun bekleyin.

let attempts = 0
function scheduleReconnect() {
  attempts++
  const delay = Math.min(1000 * 2 ** attempts, 30000)
  setTimeout(connect, delay)
}

Başarıdan Sonra Bekleme Süresini Sıfırlama

Bağlantı başarıyla kurulduğunda deneme sayacını sıfırlayın. Böylece bir sonraki bağlantı kesintisinde bekleme, uzun bir gecikmeden değil, başlangıçtan başlar.

ws.onopen = () => {
  status.value = "OPEN"
  attempts = 0
  flushQueue()
}

Bağlantı Kesikken Mesaj Kuyruğu

Soket kapalıyken kullanıcı mesaj gönderirse mesajı kaybetmemelisiniz. Giden mesajları bir kuyrukta tamponlayın ve bağlantı açıldığında bunları boşaltın.

const queue = []
function send(data) {
  const payload = JSON.stringify(data)
  if (ws && ws.readyState === WebSocket.OPEN) {
    ws.send(payload)
  } else {
    queue.push(payload)
  }
}

Kuyruğu Boşaltma

Soket açıldığında biriken her şeyi boşaltın. Sıralamanın korunması için öğeleri kuyruğun önünden shift ile çıkarın.

function flushQueue() {
  while (queue.length && ws.readyState === WebSocket.OPEN) {
    ws.send(queue.shift())
  }
}

Türlendirilmiş Mesaj İşleyicileri

Tüketicilerin her mesaj type değeri için handlers kaydetmesine izin verin. Geri çağırmaları bir eşlemede saklayın ve gelen her çerçevede mesaj türüne göre dağıtın.

const handlers = {}
function on(type, cb) { handlers[type] = cb }

// inside connect:
ws.onmessage = (e) => {
  const msg = JSON.parse(e.data)
  if (handlers[msg.type]) handlers[msg.type](msg.payload)
}

onUnmounted İçinde Temizleme

Birleştirilebilir yapı zamanlayıcılara ve bir sokete sahiptir. Kullanan bileşen kaldırıldığında bunları kapatın; böylece görünüm ortadan kalktıktan sonra yeniden bağlanma işlemi çalışmayı sürdürmez.

import { onUnmounted } from "vue"

let reconnectTimer
onUnmounted(() => {
  clearTimeout(reconnectTimer)
  if (ws) ws.close(1000, "component unmounted")
})

Kasıtlı Kapatmadan Sonra Yeniden Bağlanmayı Önleme

Kendi temizleme işleminizden kaynaklanan düzgün bir kapatma (1000 kodu) yeniden bağlanmayı tetiklememelidir. Bir intentional bayrağını izleyin ve bu bayrak ayarlandığında zamanlamayı atlayın.

let intentional = false
function close() { intentional = true; ws.close(1000) }

ws.onclose = () => {
  status.value = "CLOSED"
  if (!intentional) scheduleReconnect()
}

Birleştirilebilir Yapının Tam Hali

Her şey bir araya geliyor: oluşturulurken bağlanma, status, send ve on işlevlerini dışa açma, bağlantı kesikken kuyruğa alma, üstel beklemeyle yeniden bağlanma ve otomatik temizleme.

export function useWebSocket(url) {
  const status = ref("CLOSED")
  // connect, scheduleReconnect, send, on, flushQueue, cleanup...
  connect()
  return { status, send, on, close }
}

// usage:
// const { status, send, on } = useWebSocket("wss://...")

Hızlı Kontrol

Yeniden bağlanma stratejisini anlayıp anlamadığınızı kontrol edin.

İnteraktif derste cevapla

Özet

Sağlam bir useWebSocket birleştirilebilir yapısı oluşturdunuz:

Bir status ref'i arayüz için CONNECTING / OPEN / CLOSED durumlarını yansıtır.
Üstel beklemeyle ve bir üst sınırla yeniden bağlanın; başarıdan sonra sayacı sıfırlayın.
Bağlantı kesikken giden mesajları kuyruğa alın ve bağlantı açıldığında boşaltın.
Gelen çerçeveleri türe göre handlers geri çağırmalarına dağıtın.
Zamanlayıcıları ve soketi onUnmounted içinde temizleyin; kasıtlı bir kapatmadan sonra yeniden bağlanmayı atlayın.

Başlamak ücretsiz

Yapay zeka eğitmeniyle HTML öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 42
Dersler: 156

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Yeniden Bağlanma Özellikli useWebSocket Composable'ı” dersi ücretsiz mi?

Evet — “Yeniden Bağlanma Özellikli useWebSocket Composable'ı” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Yeniden Bağlanma Özellikli useWebSocket Composable'ı” dersinde ne öğreneceğim?

WebSocket'i bir composable içinde sarmalama, üstel geri çekilmeyle otomatik yeniden bağlanma ve durumu izleme. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Yeniden Bağlanma Özellikli useWebSocket Composable'ı” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Tarayıcıda WebSocket Temelleri
Vue ile Socket.io İstemcisi
Gerçek Zamanlı Sohbet Bileşeni Oluşturma
Yeniden Bağlanma Özellikli useWebSocket Composable'ı

← Vue Academy Sayfasına Dön