Как разобрать данные WebSocket и не потерять формат сообщени

Короткий ответ: данные WebSocket нужно разбирать в обработчике message. Сначала определите формат сообщения: строка, JSON-строка, Blob, ArrayBuffer или Buffer на сервере. Если это JSON, используйте JSON.parse внутри try/catch, проверяйте поле type и только потом передавайте payload в нужный обработчик

Базовый клиентский пример:

socket.addEventListener("message", (event) => {
  const data = JSON.parse(event.data);
  console.log(data.type, data.payload);
});

Но в реальном коде нужен более защищенный вариант

Содержание

Безопасный разбор JSON
Маршрутизация по type
Бинарные данные в браузере
На сервере Node.js
Пример протокола сообщений
Минимальная валидация payload
Частые ошибки
Самопроверка
Что почитать дальше по WebSocket

Безопасный разбор JSON

function parseJsonMessage(raw) {
  try {
    const data = JSON.parse(raw);

    if (!data || typeof data !== "object") {
      return { ok: false, error: "Message is not an object" };
    }

    if (typeof data.type !== "string") {
      return { ok: false, error: "Message type is missing" };
    }

    return { ok: true, data };
  } catch {
    return { ok: false, error: "Invalid JSON" };
  }
}

socket.addEventListener("message", (event) => {
  const parsed = parseJsonMessage(event.data);

  if (!parsed.ok) {
    console.log("Bad message:", parsed.error);
    return;
  }

  handleMessage(parsed.data);
});

Так приложение не падает от одного неправильного сообщения

Маршрутизация по type

function handleMessage(message) {
  switch (message.type) {
    case "chat_message":
      renderChatMessage(message.payload);
      break;

    case "notification":
      showNotification(message.payload);
      break;

    case "price_update":
      updatePrice(message.payload);
      break;

    default:
      console.log("Unknown message type:", message.type);
  }
}

Поле type делает протокол понятным. Без него код быстро превращается в набор догадок: “а что это за объект пришел?”

Бинарные данные в браузере

По умолчанию бинарные сообщения могут приходить как Blob. Можно переключить:

socket.binaryType = "arraybuffer";

socket.addEventListener("message", (event) => {
  if (event.data instanceof ArrayBuffer) {
    const bytes = new Uint8Array(event.data);
    console.log("Binary bytes:", bytes.length);
    return;
  }

  const data = JSON.parse(event.data);
  handleMessage(data);
});

Если ожидаете и JSON, и бинарные данные, обязательно разделяйте обработку

На сервере Node.js

В библиотеке ws сообщение часто приходит как Buffer:

socket.on("message", (message, isBinary) => {
  if (isBinary) {
    console.log("Binary:", message.length);
    return;
  }

  const text = message.toString("utf8");
  const data = JSON.parse(text);

  console.log(data.type);
});

Для production-кода добавьте try/catch и проверку структуры

Пример протокола сообщений

Удобная форма:

{
  "type": "chat_message",
  "requestId": "4d6f",
  "payload": {
    "roomId": "general",
    "text": "Привет"
  }
}

type говорит, что делать. requestId помогает связать запрос и ответ. payload хранит данные события

Минимальная валидация payload

После JSON.parse не считайте, что payload точно правильный. Даже если сервер ваш, ошибка в backend-коде или старая версия клиента могут прислать неожиданный формат

Пример ручной проверки:

function isChatMessage(message) {
  return (
    message.type === "chat_message" &&
    message.payload &&
    typeof message.payload.roomId === "string" &&
    typeof message.payload.text === "string"
  );
}

if (isChatMessage(message)) {
  renderChatMessage(message.payload);
}

Для большого проекта лучше использовать валидатор схемы, но даже такая простая проверка уже защищает интерфейс от падения на undefined

Частые ошибки

Первая ошибка — делать JSON.parse(event.data) без try/catch. Одно невалидное сообщение ломает обработчик

Вторая ошибка — считать, что все сообщения всегда строки. WebSocket умеет бинарные данные

Третья ошибка — не проверять type. В итоге разные события обрабатываются одним куском кода

Четвертая ошибка — доверять структуре payload без валидации. На границе сети данные нужно проверять

Пятая ошибка — смешивать транспортный формат и бизнес-логику. Обработчик message должен разобрать сообщение и передать его дальше, а не одновременно парсить JSON, менять DOM, обновлять store и показывать уведомления

Самопроверка

Отправьте три сообщения: корректный JSON, невалидную строку {bad, и бинарный ArrayBuffer. Хороший обработчик должен обработать первое, мягко отклонить второе и отдельно распознать третье

Что почитать дальше по WebSocket

Если нужен общий маршрут по теме, откройте рубрику WebSocket. Для соседних задач пригодятся эти разборы:

Как разобрать данные WebSocket и не потерять формат сообщения