JavaScript Academy · Урок

Отправка и получение сообщений

Обменивайтесь данными с помощью send и onmessage.

«Отправка и получение сообщений» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Отправка текста

После открытия соединения socket.send(string) передаёт текстовое сообщение серверу.

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

Получение сообщений

onmessage срабатывает для каждого входящего кадра. Данные находятся в event.data.

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

Форматирование данных в JSON

WebSockets передают необработанные строки. Чтобы отправлять структурированные данные, сериализуйте их с помощью JSON.stringify, а при получении выполните разбор.

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

Маршрутизация по типу сообщения

Распространённый подход: добавьте поле type и выбирайте обработчик по его значению.

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

Отправка двоичных данных

send также принимает ArrayBuffer, типизированные массивы и Blob для передачи двоичных данных.

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

Получение двоичных данных

При значении binaryType = "arraybuffer" свойство event.data содержит ArrayBuffer, который можно обернуть в типизированный массив.

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

Управление обратным давлением с помощью bufferedAmount

bufferedAmount сообщает, сколько bytes поставлено в очередь, но ещё не отправлено. Проверяйте это значение перед массовой отправкой в socket, чтобы избежать неограниченного роста потребления памяти.

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

Постановка в очередь до открытия

Если отправка возможна до открытия socket, сохраняйте сообщения в буфере и отправляйте их в onopen.

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

Проверка входящих данных

Никогда не доверяйте данным из сети. Оберните JSON.parse в конструкцию try/catch и проверьте структуру данных перед использованием.

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

Быстрая проверка

Проверьте работу с сообщениями.

Повторение: отправка и получение

Вы отправляли текстовые и двоичные данные, обрабатывали onmessage, представляли данные в формате JSON, выполняли маршрутизацию по типу, отслеживали bufferedAmount для управления обратным давлением, добавили сигналы активности и ставили сообщения в очередь до открытия socket. Далее: жизненный цикл соединения.

Часто задаваемые вопросы

Урок «Отправка и получение сообщений» бесплатный?

Да — полный текст урока «Отправка и получение сообщений» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Отправка и получение сообщений»?

Обменивайтесь данными с помощью send и onmessage. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Отправка и получение сообщений»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к JavaScript Academy