WebSocket.send: примеры (JAVASCRIPT)

Отправка данных через WebSocket.send в JavaScript
Раздел: Сетевые запросы, WebSocket
WebSocket.send(data (string, ArrayBuffer, Blob)): void
типовые примерыWebSocket.send на php, python, mysqlWebSocket.send изменения javascriptпримеры расширенные

Основные сведения о методе WebSocket.send()

Метод WebSocket.send() используется для отправки данных через установленное WebSocket-соединение. Он применяется в реальном времени для обмена сообщениями между клиентом и сервером, например, в чатах, онлайн-играх или биржевых тикерах.

Метод принимает один обязательный аргумент:

  • data: Данные для отправки. Могут быть представлены в виде строки (String), объекта Blob, ArrayBuffer или TypedArray (например, Uint8Array).

Метод не возвращает значения (undefined). Отправка происходит асинхронно. Успешность передачи можно отслеживать через события onopen и onerror объекта WebSocket.

Простые примеры использования

Отправка текстовой строки:

const socket = new WebSocket('wss://example.com');
socket.onopen = function(event) {
  socket.send('Привет, сервер!');
};
Данные "Привет, сервер!" поставлены в очередь на отправку.

Отправка данных в формате JSON:

socket.onopen = function() {
  const message = { type: 'greeting', text: 'Hello' };
  socket.send(JSON.stringify(message));
};
Сервер получит строку: {"type":"greeting","text":"Hello"}

Отправка бинарных данных (ArrayBuffer):

socket.onopen = function() {
  const buffer = new ArrayBuffer(4);
  const view = new Uint8Array(buffer);
  view[0] = 10;
  view[1] = 20;
  socket.send(buffer);
};
Сервер получит бинарный фрейм с байтами 10, 20, 0, 0.

Похожие методы в JavaScript

Прямых аналогов WebSocket.send() для других протоколов нет, но существуют API для отправки данных в рамках иных моделей:

  • XMLHttpRequest.send() / fetch(): Используются для HTTP-запросов. Работают по модели "запрос-ответ", не поддерживают постоянное двустороннее соединение. Предпочтительны для REST API, загрузки файлов.
  • Server-Sent Events (EventSource): Позволяют серверу отправлять события клиенту в одностороннем порядке. Клиент не может отправлять данные через тот же канал. Подходит для уведомлений или ленты новостей.
  • RTCPeerConnection: Часть WebRTC для передачи медиа- и произвольных данных напрямую между браузерами (P2P). Сложнее в настройке, но эффективен для видеочатов и файлообмена.

Аналоги в других языках программирования

Реализация отправки данных через WebSocket на серверной стороне зависит от языка и библиотек.

Python (библиотека websockets):

import asyncio
import websockets

async def handler(websocket):
    await websocket.send("Данные от сервера")

PHP (библиотека Ratchet):

public function onMessage(ConnectionInterface $from, $msg) {
    $from->send("Эхо: " . $msg);
}

C# (библиотека WebSocketSharp):

public override void OnMessage (MessageEventArgs e) {
    Send ("Эхо: " + e.Data);
}

Основное отличие — серверные API часто являются асинхронными и требуют управления пулом соединений.

Типичные ошибки

1. Попытка отправки до открытия соединения.

const socket = new WebSocket('wss://example.com');
socket.send('Ранняя отправка'); // Ошибка
Ошибка: InvalidStateError: The connection is not open yet.

2. Отправка данных после закрытия соединения.

socket.onopen = function() {
  socket.close();
  socket.send('После закрытия'); // Ошибка
};
Ошибка: InvalidStateError: The connection is closed.

3. Попытка отправить недопустимый тип данных, например, простой объект.

socket.onopen = function() {
  socket.send({ key: 'value' }); // Ошибка
};
Ошибка: Data must be a string, Blob, ArrayBuffer, or ArrayBufferView.

Изменения в спецификации

Спецификация WebSocket API остается стабильной. Крупных изменений в методе send() в последних версиях стандарта не было. Основные правки касаются протокола безопасности и обработки расширений. Разработчикам рекомендуется использовать безопасный протокол wss:// и учитывать политики CORS.

Расширенные примеры применения

Отправка файла изображения через WebSocket с использованием Blob:

Пример javascript
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (file && socket.readyState === WebSocket.OPEN) {
    const reader = new FileReader();
    reader.onload = function(event) {
      socket.send(event.target.result); // Отправка как ArrayBuffer
    };
    reader.readAsArrayBuffer(file);
  }
});

Пакетная отправка данных с проверкой состояния буфера:

Пример javascript
function sendDataSafely(data) {
  if (socket.readyState !== WebSocket.OPEN) return false;

  // bufferedAmount показывает количество байт в буфере
  if (socket.bufferedAmount > 1024 * 1024) { // 1 МБ
    console.log('Буфер переполнен, отправка отложена');
    return false;
  }
  socket.send(data);
  return true;
}

// Использование
sendDataSafely(JSON.stringify({ data: 'большой_массив' }));

Создание канала для передачи потока команд с использованием двоичных данных:

Пример javascript
// Клиент отправляет команды и аргументы как бинарные данные
function sendCommand(cmd, arg) {
  const buffer = new ArrayBuffer(5);
  const view = new DataView(buffer);
  view.setUint8(0, cmd); // Код команды (1 байт)
  view.setUint32(1, arg); // Аргумент (4 байта)
  socket.send(buffer);
}
// Пример отправки команды 0x01 с аргументом 42
sendCommand(0x01, 42);

JS WebSocket.send function comments

En
WebSocket.send Sends data through a WebSocket connection