Vue Academy · บทเรียน

พื้นฐาน WebSocket ในเบราว์เซอร์

new WebSocket(url), onopen/onmessage/onerror/onclose, send() และ readyState

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

เรียลไทม์ในเบราว์เซอร์

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

โพรโทคอล WebSocket ให้การเชื่อมต่อสองทางเพียงหนึ่งรายการระหว่างเบราว์เซอร์กับเซิร์ฟเวอร์ โดยการเชื่อมต่อนี้คงอยู่เป็นเวลานาน

การเปิดการเชื่อมต่อ

เบราว์เซอร์มีตัวสร้าง WebSocket ส่วนกลางมาให้ ใช้ URL ที่มีรูปแบบ ws:// (ไม่เข้ารหัส) หรือ wss:// (TLS)

การสร้างออบเจ็กต์จะเริ่มกระบวนการจับมือเพื่อเชื่อมต่อทันที

const ws = new WebSocket("wss://echo.example.com/socket")

// Construction kicks off the connection.
// Nothing is sent yet — we wait for it to open.

ตัวจัดการ onopen

การเชื่อมต่อจะยังไม่พร้อมทันทีที่คุณสร้างขึ้น เหตุการณ์ onopen จะทำงานเมื่อการจับมือเสร็จสมบูรณ์และซ็อกเก็ตพร้อมรับส่งข้อมูล

ส่งข้อความแรกจากภายใน onopen เท่านั้น ห้ามส่งก่อนหน้านั้น

const ws = new WebSocket("wss://echo.example.com/socket")

ws.onopen = () => {
  console.log("Connected!")
  ws.send("hello server")
}

การรับข้อความ

ข้อมูลขาเข้าจะมาถึงผ่าน onmessage โดยข้อมูลจะอยู่ใน event.data และโดยค่าเริ่มต้นจะเป็นสตริง

แอปส่วนใหญ่ส่งข้อมูลในรูปแบบ JSON ดังนั้นคุณจึงแยกวิเคราะห์ข้อมูลกลับเป็นออบเจ็กต์

ws.onmessage = (event) => {
  const msg = JSON.parse(event.data)
  console.log("Got:", msg.type, msg.payload)
}

การส่งข้อความ

ใช้ ws.send() เพื่อส่งข้อมูล WebSockets รองรับสตริงดิบหรือข้อมูลไบนารี ดังนั้นให้เข้ารหัสออบเจ็กต์ด้วย JSON.stringify ก่อน

ทั้งสองฝั่งต้องตกลงรูปแบบข้อมูลร่วมกัน — ในที่นี้คือ type พร้อมกับ payload

function sendChat(text) {
  const msg = { type: "chat", payload: { text } }
  ws.send(JSON.stringify(msg))
}

sendChat("Good morning")

การรับส่งข้อมูลครบวงจร

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

const ws = new WebSocket("wss://echo.example.com/socket")

ws.onopen = () => {
  ws.send(JSON.stringify({ type: "ping" }))
}

ws.onmessage = (event) => {
  const data = JSON.parse(event.data)
  console.log("Server replied:", data)
}

การปิดการเชื่อมต่อ

เหตุการณ์ onclose จะทำงานเมื่อการเชื่อมต่อสิ้นสุดลง — ไม่ว่าคุณจะเรียกใช้ ws.close() หรือเครือข่ายจะขาด การดำเนินการนี้มีค่า code เป็นตัวเลขและสตริง reason แนบมาด้วย

รหัส 1000 หมายถึงการปิดตามปกติ

ws.onclose = (event) => {
  console.log("Closed:", event.code, event.reason)
  if (event.code !== 1000) {
    console.log("Unexpected close — may want to reconnect")
  }
}

// Trigger a clean close yourself:
// ws.close(1000, "done")

การจัดการข้อผิดพลาด

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

ws.onerror = (event) => {
  console.error("WebSocket error occurred")
  // onclose usually fires right after onerror.
}

พร็อพเพอร์ตี readyState

ws.readyState เป็นตัวเลขที่บอกว่าซ็อกเก็ตอยู่ ณ จุดใดในวงจรการทำงาน ควรตรวจสอบค่านี้ก่อนส่งข้อมูลเสมอ เพื่อไม่ให้เกิดข้อผิดพลาดกับซ็อกเก็ตที่ยังเปิดไม่เสร็จ

0 CONNECTING
1 OPEN
2 CLOSING
3 CLOSED

function safeSend(data) {
  if (ws.readyState === WebSocket.OPEN) {
    ws.send(JSON.stringify(data))
  } else {
    console.warn("Not open, readyState =", ws.readyState)
  }
}

ค่าคงที่แบบมีชื่อของ readyState

แทนที่จะใช้ตัวเลขที่ไม่มีความหมาย ให้ใช้ค่าคงที่บนคลาส WebSocket ซึ่งอ่านเข้าใจได้ชัดเจนกว่า 0 1 หรือ 3 มาก

console.log(WebSocket.CONNECTING) // 0
console.log(WebSocket.OPEN)       // 1
console.log(WebSocket.CLOSING)    // 2
console.log(WebSocket.CLOSED)     // 3

if (ws.readyState === WebSocket.OPEN) {
  ws.send("ready to talk")
}

การประกอบทุกอย่างเข้าด้วยกันใน Vue

ภายในคอมโพเนนต์ Vue โดยทั่วไปคุณจะสร้างซ็อกเก็ตใน onMounted และยกเลิกการทำงานใน onUnmounted ตัวจัดการจะอัปเดตการอ้างอิงที่ตอบสนอง ซึ่งเทมเพลตของคุณนำไปแสดงผล

import { ref, onMounted, onUnmounted } from "vue"

const messages = ref([])
let ws

onMounted(() => {
  ws = new WebSocket("wss://echo.example.com/socket")
  ws.onmessage = (e) => messages.value.push(JSON.parse(e.data))
})

onUnmounted(() => ws && ws.close())

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

ตรวจสอบความเข้าใจของคุณเกี่ยวกับค่าของ readyState ใน WebSocket

สรุปทบทวน

ในบทเรียนนี้คุณได้เรียนรู้ว่า:

new WebSocket(url) เริ่มการเชื่อมต่อสองทางโดยใช้ ws:// หรือ wss://
onopen ทำงานเมื่อซ็อกเก็ตพร้อมใช้งาน ควรส่งข้อมูลหลังจากนั้นเท่านั้น
onmessage ส่งข้อมูลผ่าน event.data — แยกวิเคราะห์ JSON เพื่อให้ได้ออบเจ็กต์
ws.send(JSON.stringify(msg)) ใช้ส่งข้อมูล
onclose และ onerror ใช้จัดการการยกเลิกการเชื่อมต่อและข้อผิดพลาด
readyState มีค่า 0 คือ CONNECTING, 1 คือ OPEN, 2 คือ CLOSING และ 3 คือ CLOSED

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

บทเรียน “พื้นฐาน WebSocket ในเบราว์เซอร์” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “พื้นฐาน WebSocket ในเบราว์เซอร์”

new WebSocket(url), onopen/onmessage/onerror/onclose, send() และ readyState คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “พื้นฐาน WebSocket ในเบราว์เซอร์” ใช้เวลานานแค่ไหน

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

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

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

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

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

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