0Pricing
React Academy · บทเรียน

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

เปิดการเชื่อมต่อ WebSocket ส่งข้อความ และจัดการอีเวนต์ด้วย API WebSocket แบบเนทีฟ

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

WebSocket คืออะไร

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

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

สร้างออบเจ็กต์ WebSocket ด้วย URL ws:// หรือ wss:// การเชื่อมต่อจะเปิดแบบอะซิงโครนัส

const ws = new WebSocket('wss://api.example.com/ws');

ws.onopen = () => {
  console.log('Connection established');
};

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

ใช้ ws.send() เพื่อส่งข้อมูล คุณสามารถส่งสตริงหรือข้อมูลไบนารี (ArrayBuffer, บล็อบ) ได้ ควรเข้ารหัสออบเจ็กต์เป็น JSON ก่อนส่ง

ws.onopen = () => {
  ws.send(JSON.stringify({ type: 'join', room: 'general' }));
  ws.send('Hello, server!');
};

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

เหตุการณ์ onmessage จะทำงานทุกครั้งที่เซิร์ฟเวอร์ส่งข้อมูล ข้อมูลจะอยู่ใน event.data ในรูปแบบสตริงหรือชนิดไบนารี

ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log('Received:', data);
};

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

จัดการเหตุการณ์ onerror และ onclose เหตุการณ์การปิดจะมีรหัสและเหตุผลที่อธิบายว่าเหตุใดการเชื่อมต่อจึงสิ้นสุดลง

ws.onerror = (error) => {
  console.error('WebSocket error:', error);
};

ws.onclose = (event) => {
  console.log(`Closed: ${event.code} ${event.reason}`);
  if (event.wasClean) {
    console.log('Clean disconnect');
  } else {
    console.log('Connection lost — will retry');
  }
};

รหัสการปิด

รหัสการปิด WebSocket มาตรฐาน: 1000 = ปกติ, 1001 = กำลังออกจากระบบ, 1006 = ผิดปกติ (ไม่มีเฟรมการปิด), 1008 = ละเมิดนโยบาย

readyState

ws.readyState บอกสถานะปัจจุบันของการเชื่อมต่อ: CONNECTING (0), OPEN (1), CLOSING (2) หรือ CLOSED (3) ตรวจสอบสถานะนี้ก่อนส่งข้อมูลเสมอ

function sendSafely(ws, data) {
  if (ws.readyState === WebSocket.OPEN) {
    ws.send(JSON.stringify(data));
  } else {
    console.warn('WebSocket not open, dropping message');
  }
}

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

เรียกใช้ ws.close(code, reason) เพื่อเริ่มการปิดอย่างเรียบร้อย เซิร์ฟเวอร์จะได้รับเฟรมการปิดและสามารถตอบกลับด้วยเฟรมของตนเองได้

// Normal close
ws.close(1000, 'User logged out');

// Close from a cleanup effect
return () => ws.close();

ข้อมูลไบนารี

กำหนด ws.binaryType = 'arraybuffer' (หรือ 'blob') เพื่อรับข้อความไบนารี ซึ่งมีประโยชน์สำหรับเสียง รูปภาพ หรือโพรโทคอลกำหนดเอง

ws.binaryType = 'arraybuffer';

ws.onmessage = (event) => {
  if (event.data instanceof ArrayBuffer) {
    const view = new Uint8Array(event.data);
    console.log('Binary message, bytes:', view.length);
  } else {
    console.log('Text message:', event.data);
  }
};

สัญญาณชีพ / ปิง-ปอง

API WebSocket ในเบราว์เซอร์ไม่มีเฟรมปิงให้ใช้งานโดยตรง แต่คุณสามารถสร้างสัญญาณชีพระดับแอปพลิเคชันได้ โดยส่งข้อความปิงทุก N วินาทีและรอการตอบปอง

function startHeartbeat(ws) {
  return setInterval(() => {
    if (ws.readyState === WebSocket.OPEN) {
      ws.send(JSON.stringify({ type: 'ping' }));
    }
  }, 30_000);
}

WebSocket กับเหตุการณ์ที่เซิร์ฟเวอร์ส่ง

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

ตรวจสอบอย่างรวดเร็ว

ค่า readyState ใดของ WebSocket ที่ระบุว่าการเชื่อมต่อเปิดอยู่และพร้อมส่งข้อมูล

สรุปทบทวน

สร้างการเชื่อมต่อด้วย new WebSocket(url) ส่งออบเจ็กต์ที่แปลงเป็นสตริง JSON ผ่าน ws.send() และจัดการเหตุการณ์ onmessage, onerror และ onclose ตรวจสอบ readyState ก่อนส่งข้อมูล และปิดการเชื่อมต่ออย่างเรียบร้อยด้วย ws.close(1000)

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

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

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

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

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

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

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

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

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

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

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

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

  1. พื้นฐาน WebSocket ในเบราว์เซอร์
  2. การใช้ Socket.IO กับ React
  3. การสร้างคอมโพเนนต์แชตแบบเรียลไทม์
  4. การเชื่อมต่อใหม่ การจัดการข้อผิดพลาด และการล้างข้อมูล
← กลับไปที่ React Academy