Vue Academy · Pelajaran

Composable useWebSocket dengan Penyambungan Ulang

Membungkus WebSocket dalam composable, penyambungan ulang otomatis dengan jeda eksponensial, serta pelacakan status.

Composable useWebSocket dengan Penyambungan Ulang adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Membungkus WebSockets dalam Komposabel

Penanganan WebSocket mentah yang tersebar di berbagai komponen akan menjadi rumit. Komposabel useWebSocket memusatkan keadaan koneksi, koneksi ulang, dan penanganan pesan—lalu dapat digunakan kembali di mana saja.

Kita akan membangunnya sedikit demi sedikit.

Melacak Status dengan Ref

Sediakan status koneksi sebagai ref status reaktif agar antarmuka dapat menampilkan lencana "Menghubungkan", "Terbuka", atau "Tertutup".

import { ref } from "vue"

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

Fungsi koneksi

Bungkus pembukaan soket dalam fungsi internal connect agar kita dapat memanggilnya lagi nanti untuk menyambung kembali. Perbarui status pada setiap peristiwa siklus hidup.

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

Koneksi Ulang dengan Penundaan yang Meningkat

Menyambung kembali secara langsung dalam perulangan rapat akan membebani server. Gunakan penundaan eksponensial: tunggu lebih lama setelah setiap upaya yang gagal, hingga mencapai batas maksimum.

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

Mengatur Ulang Penundaan Setelah Berhasil

Setelah koneksi berhasil, atur ulang penghitung upaya agar pemutusan berikutnya memulai penundaan dari awal, bukan dari penundaan yang panjang.

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

Antrean Pesan Saat Terputus

Jika pengguna mengirim pesan saat soket tidak aktif, pesan tersebut tidak boleh hilang. Simpan pesan keluar dalam antrean dan keluarkan semuanya setelah koneksi terbuka.

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

Mengosongkan Antrean

Saat soket terbuka, keluarkan semua pesan yang terkumpul. Keluarkan elemen dari bagian depan dengan shift agar urutannya tetap terjaga.

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

Penangan Pesan Bertipe

Izinkan pengguna mendaftarkan penangan untuk setiap type pesan. Simpan fungsi panggilan balik dalam peta dan kirimkan pesan berdasarkan tipenya pada setiap bingkai yang masuk.

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)
}

Pembersihan di onUnmounted

Komposabel memiliki pengatur waktu dan soket. Hentikan keduanya saat komponen yang menggunakannya dilepas agar koneksi ulang tidak terus berjalan setelah tampilan tidak ada.

import { onUnmounted } from "vue"

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

Menghindari Koneksi Ulang Setelah Penutupan yang Disengaja

Penutupan bersih (kode 1000) dari proses penghentian Anda sendiri seharusnya TIDAK memicu koneksi ulang. Lacak penanda intentional dan jangan menjadwalkan koneksi ulang saat penanda itu aktif.

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

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

Bentuk Komposabel Lengkap

Semuanya kini menyatu: menyambung saat dibuat, menyediakan status, send, dan on, mengantrekan pesan saat terputus, menyambung kembali dengan penundaan bertahap, serta melakukan pembersihan secara otomatis.

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://...")

Uji Cepat

Periksa pemahaman Anda tentang strategi koneksi ulang.

Ringkasan

Anda telah membangun komposabel useWebSocket yang tangguh:

Ref status mencerminkan CONNECTING / OPEN / CLOSED untuk antarmuka.
Menyambung kembali dengan penundaan eksponensial yang dibatasi, lalu mengatur ulang penghitung setelah berhasil.
Mengantrekan pesan keluar saat terputus dan mengeluarkannya setelah koneksi terbuka.
Mengirimkan bingkai masuk ke fungsi panggilan balik penangan berdasarkan tipe.
Membersihkan pengatur waktu dan soket di onUnmounted, serta melewati koneksi ulang setelah penutupan yang disengaja.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Composable useWebSocket dengan Penyambungan Ulang” gratis?

Ya — teks lengkap “Composable useWebSocket dengan Penyambungan Ulang” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Composable useWebSocket dengan Penyambungan Ulang”?

Membungkus WebSocket dalam composable, penyambungan ulang otomatis dengan jeda eksponensial, serta pelacakan status. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Composable useWebSocket dengan Penyambungan Ulang” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Dasar-Dasar WebSocket di Browser
Klien Socket.io dengan Vue
Membangun Komponen Chat Real-Time
Composable useWebSocket dengan Penyambungan Ulang

← Kembali ke Vue Academy