Vue Academy · บทเรียน

คอมโพสิเบิล useWebSocket พร้อมการเชื่อมต่อใหม่

การห่อ WebSocket ไว้ในคอมโพสิเบิล การเชื่อมต่อใหม่อัตโนมัติแบบหน่วงเวลาเพิ่มทวีคูณ และการติดตามสถานะ

คอมโพสิเบิล useWebSocket พร้อมการเชื่อมต่อใหม่ เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

ห่อ WebSockets ไว้ในคอมโพสิเบิล

การจัดการ WebSocket แบบดิบที่กระจายอยู่ตามคอมโพเนนต์จะทำให้โค้ดยุ่งยาก คอมโพสิเบิล useWebSocket จะรวมศูนย์สถานะการเชื่อมต่อ การเชื่อมต่อใหม่ และการจัดการข้อความไว้ด้วยกัน แล้วคุณก็สามารถนำกลับมาใช้ได้ทุกที่

เราจะสร้างคอมโพสิเบิลนี้ทีละส่วน

ติดตามสถานะด้วย Ref

เปิดเผยสถานะการเชื่อมต่อเป็น ref status แบบรีแอกทีฟ เพื่อให้ UI แสดงป้ายสถานะ "กำลังเชื่อมต่อ" "เปิดอยู่" หรือ "ปิดอยู่" ได้

import { ref } from "vue"

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

ฟังก์ชัน connect

ห่อการเปิดซ็อกเก็ตไว้ในฟังก์ชัน connect ภายใน เพื่อให้เราเรียกใช้ซ้ำภายหลังสำหรับการเชื่อมต่อใหม่ได้ อัปเดต status ในแต่ละเหตุการณ์ตลอดอายุการทำงาน

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

การเชื่อมต่อใหม่โดยเพิ่มระยะหน่วง

การเชื่อมต่อใหม่ทันทีในลูปถี่ ๆ จะส่งคำขอถล่มเซิร์ฟเวอร์ ใช้การหน่วงเวลาแบบทวีคูณ โดยรอให้นานขึ้นหลังความพยายามที่ล้มเหลวแต่ละครั้ง จนถึงค่าสูงสุดที่กำหนด

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

รีเซ็ตการหน่วงเวลาหลังสำเร็จ

เมื่อการเชื่อมต่อสำเร็จ ให้รีเซ็ตตัวนับความพยายาม เพื่อให้การตัดการเชื่อมต่อครั้งถัดไปเริ่มการหน่วงเวลาจากจุดเริ่มต้น แทนที่จะเริ่มด้วยระยะเวลาที่ยาวนาน

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

คิวข้อความขณะตัดการเชื่อมต่อ

หากผู้ใช้ส่งข้อความขณะที่ซ็อกเก็ตหยุดทำงาน คุณไม่ควรทำข้อความหาย ให้เก็บข้อความขาออกไว้ในคิว แล้วส่งออกทั้งหมดเมื่อการเชื่อมต่อเปิดขึ้น

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

ส่งข้อความในคิวออกทั้งหมด

เมื่อซ็อกเก็ตเปิดขึ้น ให้ดึงทุกอย่างที่สะสมไว้ออกมา ใช้ shift นำรายการออกจากด้านหน้า เพื่อรักษาลำดับเดิม

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

ตัวจัดการข้อความแบบมีชนิด

ให้ผู้ใช้คอมโพสิเบิลลงทะเบียนตัวจัดการแยกตาม type ของข้อความ เก็บคอลแบ็กไว้ในแผนที่ แล้วส่งต่อข้อความตามชนิดของข้อความในแต่ละเฟรมขาเข้า

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

คอมโพสิเบิลเป็นเจ้าของตัวจับเวลาและซ็อกเก็ต โปรดยกเลิกการทำงานของทั้งสองอย่างเมื่อคอมโพเนนต์ที่ใช้งานถูกถอดออก เพื่อไม่ให้การเชื่อมต่อใหม่ยังคงทำงานหลังจากมุมมองหายไปแล้ว

import { onUnmounted } from "vue"

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

ป้องกันการเชื่อมต่อใหม่หลังการปิดโดยตั้งใจ

การปิดอย่างเรียบร้อย (รหัส 1000) จากการล้างข้อมูลของคุณเองไม่ควรทำให้เกิดการเชื่อมต่อใหม่ ติดตามแฟล็ก intentional แล้วข้ามการจัดตารางเวลาเมื่อแฟล็กนี้ถูกตั้งค่า

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

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

โครงสร้างคอมโพสิเบิลฉบับสมบูรณ์

ทุกส่วนทำงานร่วมกันแล้ว: เชื่อมต่อเมื่อสร้าง เปิดเผย status send และ on จัดคิวขณะตัดการเชื่อมต่อ เชื่อมต่อใหม่ด้วยการหน่วงเวลาแบบทวีคูณ และล้างข้อมูลโดยอัตโนมัติ

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

ตรวจสอบความเข้าใจ

ตรวจสอบความเข้าใจเรื่องกลยุทธ์การเชื่อมต่อใหม่

สรุปทบทวน

คุณได้สร้างคอมโพสิเบิล useWebSocket ที่ทำงานได้อย่างทนทาน:

ref status สะท้อนค่า CONNECTING / OPEN / CLOSED สำหรับ UI
เชื่อมต่อใหม่ด้วยการหน่วงเวลาแบบทวีคูณ จำกัดค่าสูงสุด และรีเซ็ตตัวนับเมื่อสำเร็จ
จัดคิวข้อความขาออกขณะตัดการเชื่อมต่อ และส่งข้อความในคิวออกทั้งหมดเมื่อเปิดการเชื่อมต่อ
ส่งต่อเฟรมขาเข้าไปยังคอลแบ็กตัวจัดการตามชนิดของข้อความ
ล้างข้อมูลตัวจับเวลาและซ็อกเก็ตใน onUnmounted และข้ามการเชื่อมต่อใหม่หลังการปิดโดยตั้งใจ

คำถามที่พบบ่อย

บทเรียน “คอมโพสิเบิล useWebSocket พร้อมการเชื่อมต่อใหม่” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “คอมโพสิเบิล useWebSocket พร้อมการเชื่อมต่อใหม่” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “คอมโพสิเบิล useWebSocket พร้อมการเชื่อมต่อใหม่”

การห่อ WebSocket ไว้ในคอมโพสิเบิล การเชื่อมต่อใหม่อัตโนมัติแบบหน่วงเวลาเพิ่มทวีคูณ และการติดตามสถานะ คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “คอมโพสิเบิล useWebSocket พร้อมการเชื่อมต่อใหม่” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

พื้นฐาน WebSocket ในเบราว์เซอร์
ไคลเอ็นต์ Socket.io กับ Vue
การสร้างคอมโพเนนต์แชตแบบเรียลไทม์
คอมโพสิเบิล useWebSocket พร้อมการเชื่อมต่อใหม่

← กลับไปที่ Vue Academy