การส่งและรับข้อความ

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

socket.onopen = () => {
  socket.send("ping");
};

การรับข้อมูลด้วย onmessage

socket.onmessage = (event) => {
  console.log("Received:", event.data);
};

การจัดกรอบข้อมูล JSON

socket.send(JSON.stringify({ type: "chat", text: "hi" }));
socket.onmessage = (e) => {
  const msg = JSON.parse(e.data);
  console.log(msg.type, msg.text);
};

การส่งต่อข้อความตามประเภท

socket.onmessage = (e) => {
  const msg = JSON.parse(e.data);
  switch (msg.type) {
    case "chat": showChat(msg); break;
    case "presence": updatePresence(msg); break;
  }
};

การส่งข้อมูลไบนารี

const bytes = new Uint8Array([1, 2, 3, 4]);
socket.send(bytes.buffer);

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

socket.binaryType = "arraybuffer";
socket.onmessage = (e) => {
  if (e.data instanceof ArrayBuffer) {
    const view = new Uint8Array(e.data);
    console.log(view.length);
  }
};

การควบคุมแรงดันย้อนกลับด้วย bufferedAmount

if (socket.bufferedAmount < 1_000_000) {
  socket.send(payload);
}

สัญญาณชีพ

setInterval(() => {
  if (socket.readyState === WebSocket.OPEN) {
    socket.send(JSON.stringify({ type: "ping" }));
  }
}, 30000);

คำขอและการตอบกลับผ่าน WebSocket

const pending = new Map();
function request(payload) {
  const id = crypto.randomUUID();
  socket.send(JSON.stringify({ id, ...payload }));
  return new Promise((res) => pending.set(id, res));
}
socket.onmessage = (e) => {
  const msg = JSON.parse(e.data);
  if (pending.has(msg.id)) { pending.get(msg.id)(msg); pending.delete(msg.id); }
};

การเข้าคิวก่อนเปิดการเชื่อมต่อ

const queue = [];
function safeSend(data) {
  if (socket.readyState === WebSocket.OPEN) socket.send(data);
  else queue.push(data);
}
socket.onopen = () => { queue.forEach((d) => socket.send(d)); queue.length = 0; };

การตรวจสอบข้อมูลขาเข้า

socket.onmessage = (e) => {
  let msg;
  try { msg = JSON.parse(e.data); }
  catch { return; }
  if (typeof msg.type !== "string") return;
  handle(msg);
};

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทบทวน: การส่งและรับข้อมูล