메시지 보내고 받기

텍스트 보내기

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);
};

빠른 확인

복습: 보내기와 받기