พื้นฐาน WebSocket

ยินดีต้อนรับ นี่คือโมดูลแรกของ WebSocket Design — From Zero to Hero และเมื่อจบหน้านี้เพียงหน้าเดียว คุณจะได้เปิดการเชื่อมต่อ WebSocket ที่ทำงานจริงและเป็นสดจากเบราว์เซอร์ของคุณเอง พร้อมเฝ้าดูข้อความไหลไปมาทั้งสองทิศทาง

WebSocket คืออะไร?

WebSocket คือการเชื่อมต่อแบบ persistent และ full-duplex ที่อยู่บน TCP socket เพียงตัวเดียว มีสองคำตรงนี้ที่แบกความหมายทั้งหมดไว้:

Persistent — เมื่อเปิดแล้ว connection จะเปิดค้างไว้ ไม่มีการส่ง request ใหม่ทุกครั้งที่แลกเปลี่ยนข้อมูล ท่อเดิมถูกนำกลับมาใช้ซ้ำจนกว่าฝ่ายใดฝ่ายหนึ่งจะตัดสินใจปิด
Full-duplex — ทั้งสองปลายสามารถส่งได้ทุกเมื่อ อย่างอิสระ โดยไม่ต้องรอให้อีกฝ่ายร้องขอ server สามารถ push ไปยัง client ได้อย่างอิสระเท่า ๆ กับที่ client ส่งไปยัง server

นั่นคือแนวคิดทั้งหมดในประโยคเดียว: การเชื่อมต่อที่มีอายุยาวเส้นเดียว ซึ่งฝ่ายใดฝ่ายหนึ่งสามารถพูดได้ทุกเมื่อที่มีอะไรจะพูด

ทำไมงานเรียลไทม์ถึงต้องการสิ่งนี้

HTTP ธรรมดาถูกสร้างขึ้นรอบ ๆ พิธีกรรมผลัดกันพูดอย่างสุภาพ: client ถาม server ตอบ แล้วหน้าที่ของการเชื่อมต่อก็จบลง สิ่งนี้ทำงานได้สวยงามสำหรับการโหลดหน้าเว็บ แต่ทำงานได้แย่กับสิ่งใดก็ตามที่ต้องการให้รู้สึกว่า มีชีวิต — เธรดแชต กระดานคะแนนสด เอกสารที่แชร์กัน ตัวเลื่อนราคา ในแอปเหล่านั้น เหตุการณ์ที่น่าสนใจเกิดขึ้นที่ฝั่ง server ในเวลาที่คาดเดาไม่ได้ และ client ก็ไม่มีทางรู้ว่าจะถามเมื่อไหร่

ก่อนที่จะมี WebSocket นักพัฒนาปลอมความมีชีวิตด้วยการถาม ซ้ำแล้วซ้ำเล่า (polling) ซึ่งสิ้นเปลืองและช้ากว่าเสมอนิดหน่อย WebSocket ขจัดการถามทั้งหมดทิ้งไป: server เพียงแค่ส่งทันทีที่เหตุการณ์เกิดขึ้น

flowchart LR
  C["Browser client"] -- "send anytime" --> S["Server"]
  S -- "push anytime" --> C
  subgraph conn["one long-lived TCP connection"]
    C
    S
  end

การเชื่อมต่อ persistent เส้นเดียว ข้อความไหลทั้งสองทิศทาง

โมดูลนี้ครอบคลุมอะไรบ้าง

โมดูลนี้ — พื้นฐาน WebSocket — คือรากฐานเชิงแนวคิดสำหรับทุกอย่างที่จะตามมา:

พื้นฐาน (คุณอยู่ตรงนี้) — WebSocket คืออะไร และ echo ของจริงครั้งแรก
WebSocket คืออะไร — การเชื่อมต่อเส้นเดียวเทียบกับการไป-กลับหลายรอบของ HTTP และจุดที่โดดเด่น
WebSocket เทียบกับ HTTP, polling และ SSE — ทางเลือกอื่น ๆ และข้อแลกเปลี่ยนของแต่ละแบบ
The handshake — การเชื่อมต่อถือกำเนิดจาก HTTP request ธรรมดาได้อย่างไร
Frames และโปรโตคอล — ไบต์เดินทางอย่างไรเมื่อการเชื่อมต่อเปิดอยู่จริง

โมดูลถัด ๆ ไปจะต่อยอดจากสิ่งนี้ไปสู่ client API, การออกแบบข้อความ, วงจรชีวิตของการเชื่อมต่อ, การออกแบบ server, การขยายขนาด และความปลอดภัย

WebSocket ตัวแรกของคุณ

พอกับทฤษฎี codeข้างล่างนี้ทำงาน ในเบราว์เซอร์ของคุณ เพื่อให้บทเรียนนี้อยู่ครบในตัวเอง — ไม่ต้องสตาร์ท server — โดยคุยกับ echo socket เล็ก ๆ ในหน้าเพจที่มีพฤติกรรมเหมือนของจริงทุกประการ: มี onopen, onmessage, send และ close เหมือนกัน ในแอปจริงบรรทัดเดียวที่เปลี่ยนคือบรรทัดแรก new WebSocket('wss://your-server') (เปิดเดโม StackBlitz อันใดก็ได้ภายหลังในคอร์สเพื่อรัน Node server ตัวจริง) กด Run แล้วเฝ้าดู console

JavaScript

(function () {
  // A tiny in-page echo socket with the SAME API as the browser's WebSocket,
  // so this runs anywhere. In a real app: const ws = new WebSocket('wss://your-server').
  class EchoSocket {
    constructor() {
      this.readyState = 0; // CONNECTING
      setTimeout(() => {
        this.readyState = 1; // OPEN
        if (this.onopen) this.onopen({});
        if (this.onmessage) this.onmessage({ data: 'Welcome — this echo server repeats whatever you send.' });
      }, 50);
    }
    send(data) { setTimeout(() => { if (this.onmessage) this.onmessage({ data: data }); }, 50); }
    close(code) { this.readyState = 3; setTimeout(() => { if (this.onclose) this.onclose({ code: code || 1000 }); }, 10); }
  }

  const ws = new EchoSocket();
  let received = 0;
  ws.onopen = () => {
    console.log('connection open');
    ws.send('hello, server');
  };
  ws.onmessage = (event) => {
    received += 1;
    console.log('received:', event.data);
    if (received === 2) ws.close();
  };
  ws.onclose = (event) => console.log('closed, code', event.code);
})();

คุณควรจะเห็น connection open จากนั้นมีบรรทัด received สอง บรรทัด — คำทักทายที่ server ส่งมาตอนเชื่อมต่อ แล้วตามด้วย hello, server ของคุณเองที่ถูก echo กลับมาตรง ๆ — แล้วจึงเป็น closed การไป-กลับนั้น — open, send, receive, close — คือรูปร่างทั้งหมดของทุกแอป WebSocket ที่คุณจะสร้างขึ้น สลับ in-page socket เป็น new WebSocket(url) แล้วcodeที่ห่อหุ้มอยู่ก็เหมือนกันเป๊ะ