🌍 Привет мир! 👋

🌍 Привет мир! 👋

Не так часто, но местами есть необходимость поработать с Buffer, и обычно я делал это на автомате, просил AI что-то написать, заменить, конвертировать и как следствие делал это без полного понимания и интереса, но последней каплей 😑 и триггером разобраться подробнее в этом, стало то, что я не смог понять почему класс Buffer есть в nodejs, но нет в JS, а я ведь обычно работал именно с Buffer.

❓ Что такое Буфер на базовом уровне

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

Buffer: [байт, байт, байт, ...]

<Buffer 48 65 6c 6c 6f 21>

У каждого байта значение от 0x00 до 0xFF (0–255 в десятичной системе).

➡️ Возвращаемся к JS

в JavaScript для работы с буфером существует ArrayBuffer класс, но данный объект не имеет встроенных методов для работы с данными.

Поэтому на фронте немного сложнее при работе с буфером чем на ноде, приходится взаимодействовать с вспомогательными структурами такими как
TypedArray или DataView, они выступают в роли View (представления).

TypedArray - это такие типы как (Int8Array, Uint16Array, Float32Array...)
DataView - это объект, который позволяет производить чтение и запись любых бинарных данных из объекта ArrayBuffer.

🤷‍♀️ Сложно? Даешь примерчик.

Есть у нас задача загнать строку “Ivanchikov ITClub” в буфер и передать по сети, что будем делать?

const encoder = new TextEncoder();
const uint8Array = encoder.encode("Ivanchikov ITClub");

const response = fetch('/upload', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/octet-stream'
  },
  body: uint8Array
});

1️⃣ Инициализируем экземпляр TextEncoder, для кодирования текстовых строк в бинарный формат (как правило UTF-8).
2️⃣ Кодируем наш текст в бинарный формат ( в этот момент создается ArrayBuffer (буфер) определенной длины и уже хранится в памяти ) на выходе получаем Uint8Array.
3️⃣ Для манипуляций с буфером получаем Uint8Array (он же TypedArray который и является представлением буфера, с помощью которого JavaScript может читать или изменять данные в этом участке памяти).
4️⃣ Отправляем данные напрямую из буфера с заголовком Content-Type: application/octet-stream

Ну с ArrayBuffer вроде бы уже понятно, так ведь? Зачем тогда в nodejs какой-то класс Buffer, которого нет в JS?

🙄 Nodejs, Buffer - а че так можно было ?

в Nodejs есть Buffer и это расширение стандартного Uint8Array, разработанное специально для задач, с которыми чаще всего работает сервер.

Такими как:

✔️ Чтение/запись файлов (fs)
✔️Сетевые сокеты (net, http)
✔️Потоки (stream)
✔️Шифрование (crypto)

Как выглядит та же задача, что и выше, но в nodejs:

const buffer = Buffer.from("Ivanchikov ITClub", "utf8");

const response = fetch('/upload', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/octet-stream'
  },
  body: buffer
});

✏️ В сухом остатке понимание должно свестись к тому что:

- Buffer доступен исключительно в Node.js и предоставляет встроенные методы.
- ArrayBuffer — низкоуровневый объект, часть стандарта ECMAScript, доступен как в браузерах, так и в Node.js, требующий дополнительных манипуляций для работы с данными.

🚩 Полезность:

💡 Если вы кодировали текст в UTF-8, то декодировать его тоже следует в UTF-8, чтобы корректно восстановить исходные данные. И так со всеми кодировками и декодировками если не совпадают, то на выходе получаются некорректные данные.

const text = 'Привет';

// Кодируем в UTF-8:
const utf8Buffer = Buffer.from(text, 'utf8');

// Правильно декодируем обратно:
console.log(utf8Buffer.toString('utf8'));  // ✅ Привет

// Ошибочно декодируем как ASCII:
console.log(utf8Buffer.toString('ascii')); // ❌ Привет

💡 Буфер это просто набор байтов, хранящийся в RAM, вне стандартной JS-памяти.
💡 Буфер можно визуализировать в виде таблицы байтов, где каждый байт представлен в трёх формах: в шестнадцатеричной (hex), двоичной (bin) и текстовой форме.

💬 Делитесь своим мнением в комментариях👇! Если вам понравилась статья, не забудьте поставить лайк! 👍

#JAVASCRIPT #NODEJS