The Client API

โมดูลก่อนหน้านี้อธิบายว่า WebSocket คืออะไร ส่วนโมดูลนี้พูดถึง object เพียงตัวเดียว ที่เบราว์เซอร์มอบให้คุณใช้ขับเคลื่อน นั่นคือ class WebSocket แบบ global ซึ่งเล็กอย่างน่าประหลาดใจ — มีแค่ constructor, สี่ event, หนึ่ง field สถานะ และสอง method ก็ทำได้แทบทุกอย่างที่คุณต้องใช้

API ทั้งหมดบนหน้าจอเดียว

ตรงนี้ไม่มี framework ให้เรียนรู้ มีแค่ class built-in ตัวเดียว นี่คือภาพรวมทั้งหมดแบบร่างคร่าว ๆ:

// Open a connection. This one line is the whole "setup".
const ws = new WebSocket('wss://example.com/socket');

// Four events — the only places your code reacts.
ws.onopen = () => console.log('connected');
ws.onmessage = (event) => console.log('got', event.data);
ws.onerror = (event) => console.log('something went wrong');
ws.onclose = (event) => console.log('closed', event.code);

// One state field, and two methods.
ws.readyState; // 0 CONNECTING, 1 OPEN, 2 CLOSING, 3 CLOSED
ws.send('a message');
ws.close();

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

วงจรชีวิตในรูปแบบ state machine

การเชื่อมต่อไม่ได้มีแค่ “เปิด” หรือ “ปิด” แต่เคลื่อนผ่านสี่สถานะ และไปทางเดียวเท่านั้น จาก CONNECTING ไปยัง CLOSED ไดอะแกรมด้านล่างคือแผนที่ที่คุณจะกลับมาดูอยู่เรื่อย ๆ:

stateDiagram-v2
  [*] --> CONNECTING: new WebSocket(url)
  CONNECTING --> OPEN: handshake succeeds (onopen)
  CONNECTING --> CLOSED: handshake fails (onerror, onclose)
  OPEN --> CLOSING: close() called or peer closes
  CLOSING --> CLOSED: closing handshake done (onclose)
  OPEN --> CLOSED: connection drops
  CLOSED --> [*]

วงจรชีวิตของการเชื่อมต่อ WebSocket

อ่านเหมือนเรื่องเล่า: คุณสร้าง object ขึ้นมา แล้วเริ่มที่สถานะ CONNECTING ถ้า handshake สำเร็จก็กลายเป็น OPEN และยิง onopen — นี่คือสถานะเดียวที่ส่งข้อมูลได้ พอคุณหรือ peer ขอปิดการเชื่อมต่อ ก็จะแวะที่ CLOSING ชั่วครู่ แล้วลงเอยที่ CLOSED พร้อมยิง onclose การเชื่อมต่อไม่เคยเดินถอยหลัง socket ที่ปิดแล้วก็ปิดตลอดไป ถ้าจะเชื่อมต่อใหม่ต้องสร้าง object ตัวใหม่เอี่ยม

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

ห้าบทเรียนนี้พาเดินสำรวจ API ตามลำดับที่คุณจะได้เจอจริง ๆ:

The Client API (คุณอยู่ที่นี่) — ภาพรวมของ object และวงจรชีวิต
Creating a connection — constructor, ws:// กับ wss:// และ subprotocol
Events and readyState — สี่ event กับสี่สถานะที่สะท้อนกัน
Sending and receiving — send(), message event, ลำดับการส่ง และคุณจะพูดได้เมื่อไหร่
Binary data — text กับ binary, binaryType และการส่งไบต์

ดูวงจรชีวิตทำงานจริง

เดโมด้านล่างใช้ echo socket ในหน้าเว็บที่มี WebSocket API จริง — onopen, onmessage, send, close ชุดเดียวกัน — จึงรันได้ทุกที่โดยไม่ต้องมี server ในแอปจริงบรรทัดเดียวที่เปลี่ยนคือบรรทัดแรก new WebSocket('wss://your-server') กด Run แล้วดูการเชื่อมต่อเดียวเคลื่อนผ่านสถานะต่าง ๆ

JavaScript

(function () {
  // In-page echo socket with the same API as a real WebSocket.
  // In a real app: const ws = new WebSocket('wss://your-server').
  const names = ['CONNECTING', 'OPEN', 'CLOSING', 'CLOSED'];
  class EchoSocket {
    constructor() {
      this.readyState = 0;
      setTimeout(() => {
        this.readyState = 1;
        if (this.onopen) this.onopen({});
        if (this.onmessage) this.onmessage({ data: 'connected — send me anything' });
      }, 50);
    }
    send(data) { setTimeout(() => { if (this.onmessage) this.onmessage({ data: data }); }, 50); }
    close(code) { this.readyState = 2; setTimeout(() => { this.readyState = 3; if (this.onclose) this.onclose({ code: code || 1000 }); }, 10); }
  }

  const ws = new EchoSocket();
  console.log('state after construct:', names[ws.readyState]);
  ws.onopen = () => {
    console.log('state on open:', names[ws.readyState]);
    ws.send('hello');
  };
  ws.onmessage = (event) => {
    console.log('received:', event.data);
    ws.close();
    console.log('state right after close():', names[ws.readyState]);
  };
  ws.onclose = (event) => console.log('state on close:', names[ws.readyState], '- code', event.code);
})();

สังเกตว่าสถานะที่พิมพ์ออกมาเดินไปข้างหน้าเท่านั้น: CONNECTING แล้ว OPEN แล้ว CLOSING ทันทีที่เราเรียก close() และสุดท้าย CLOSED การเดินทางทางเดียวนี้คือหัวใจที่เต้นของโปรแกรม WebSocket ทุกตัว