메시지 보내고 받기

send() 는 문자열만 받지 않아

ws.send() 에는 텍스트 프레임이 되는 문자열뿐 아니라 ArrayBuffer, Blob, Uint8Array 같은 형식화 배열 도 보낼 수 있어. 이들은 바이너리 프레임이 되고, 프레임 구성은 브라우저가 맡아. API 수준에는 조각 나누기가 없어서 send() 한 번이 논리적 메시지 하나가 돼.

기본 전송 형식은 JSON 이야

애플리케이션의 95% 는 전송 형식으로 JSON 을 써. 보낼 때 문자열로 직렬화하고 받을 때 역직렬화하지. 여기에 type 필드(트랙 5) 를 결합하면 꽤 쓸 만한 애플리케이션 프로토콜이 완성돼.

바이너리 형식과 DataView

게임 상태, 시장 데이터, 사용자 지정 프로토콜처럼 전송 형식을 작게 유지해야 한다면 ws.binaryType = 'arraybuffer' 를 설정해 바이너리를 Blob 대신 ArrayBuffer 로 받아. 그러면 DataView 로 정해진 바이트 위치에서 자료형이 있는 값을 읽고 쓸 수 있어. 위치 갱신 하나가 JSON 에서는 50바이트를 넘기지만 바이너리로는 8~16바이트면 되니 차이가 커.

bufferedAmount 와 역압

네트워크가 내보낼 수 있는 속도보다 더 빨리 보내면 바이트가 ws.bufferedAmount 에 쌓여. 모두 빠졌다고 알려 주는 콜백은 없으니 직접 주기적으로 확인해야 해. 대부분의 앱에는 문제가 없지만 커서나 위치를 빠르게 뿌리는 앱이라면 bufferedAmount 가 몇 KB 를 넘을 때 전송 속도를 제한해야 해.

Code

여러 자료형 보내기·javascript

// Plain string -> text frame
ws.send('hello');

// JSON envelope (the dominant pattern)
ws.send(JSON.stringify({
  type: 'chat.message',
  data: { room: 'general', text: 'Hi everyone!' }
}));

// Raw bytes from typed array
const bytes = new Uint8Array([0x48, 0x65, 0x6c, 0x6c, 0x6f]);
ws.send(bytes);

// ArrayBuffer with structured layout
const buf = new ArrayBuffer(8);
const view = new DataView(buf);
view.setUint32(0, 42, /* littleEndian */ true);
view.setFloat32(4, 3.14, true);
ws.send(buf);

// Blob (e.g. a small image you assembled in JS)
const blob = new Blob([bytes], { type: 'application/octet-stream' });
ws.send(blob);

역압을 감지하는 전송 함수·javascript

const HIGH_WATERMARK = 16 * 1024; // 16 KB

function sendWithBackpressure(ws, data) {
  if (ws.bufferedAmount < HIGH_WATERMARK) {
    ws.send(data);
    return true;
  }
  // Skip this update or queue for later.
  return false;
}

Exercise

이전 레슨의 에코 클라이언트를 고쳐 100바이트짜리 JSON 메시지 10,000개를 쉬지 않는 반복문에서 보내. setInterval 로 ws.bufferedAmount 를 표본 추출해 시간에 따른 그래프로 그려 봐. 같은 크기의 Uint8Array 로 바꿔 반복한 뒤 버퍼가 빠지는 속도를 비교해.