Как можно ограничить скорость запроса в js?

Question

[Роман]

Мне нужно эмулировать медленное соединение для запроса, например со скоростью 64 Кб в сек, правда, я не уверен, реально ли это вообще. То есть, наверное, так: открываешь соединение и отправляешь заголовок по частям, то же самое с получением данных. Я планирую запускать код в консоли веб-браузера. Я знаю, что можно использовать DevTools, но программно в моей среде (ZehhoPoster) нет возможности получить доступ к этому инструменту. ChatGPT не может реализовать задачу, я и менял описание и использовал разные их версии. Результат всегда один, код не выполняет поставленую задачу.

Comments

[VolgaVolga]

Что-то типа того.

[Kentavr16]

А просто в консоли разработчика ограничить скорость во вкладке "сеть"? Или я неправильно понял суть вопроса?

[Надим]

Ты можешь ограничить скорость для зенопотесра в целом:
https://yandex.ru/search/?text=как+ограничить+скор...

Либо использовать прокси с ограничением по скорости.

Answer 1

[Aetae]

Если у тебя по капотом хром, то наверное ты можешь использовать fetch в котором у Request body - это ReadableStream, растянув таким образом запрос настолько - насколько надо. Но это всё же не совсем то же самое что просто медленный запрос.
Полноценного же низкоуровневого контроля над запросом никто тебе из js не даст.

Comments

[Роман]

Что то типа этого?

function emulateSlowInternet(url, speedInKBps) {
  const CHUNK_SIZE = 1024; // Размер порции данных для чтения из потока (1 КБ)
  const DELAY_MS = Math.floor((CHUNK_SIZE / speedInKBps) * 1000); // Задержка между порциями данных

  fetch(url)
    .then(response => response.body)
    .then(body => {
      const reader = body.getReader();

      function readChunk() {
        reader.read().then(({ done }) => {
          if (done) {
            console.log('Загрузка завершена');
            return;
          }

          // Имитация задержки между порциями данных
          setTimeout(() => {
            readChunk();
          }, DELAY_MS);
        });
      }

      readChunk();
    })
    .catch(error => {
      console.error('Произошла ошибка:', error);
    });
}

// Пример использования:
const url = 'https://site. com'; // Замените на нужный URL
const speedInKBps = 64; // Скорость в КБ/сек

emulateSlowInternet(url, speedInKBps);

Если ChatGpt правильно написал код, то способ не работает к сожалению.

[Aetae]

Роман, нет, чатгпт написал чтение, ане отправку. Это блидиг эйдж технологий так то, если кто это и делал то 1,5 ананомусов из разработчиков хрома, так что гпт не на чем учиться было.:)

[Роман]

Aetae, А вы не могли бы поправить скрипт или примитивно в пару строк если возможно написать код. Если реально и нужно вознаграждение стукните пж в тг ktsr_roman

[Aetae]

Роман, как-то так, код пошлёт строку '123' с задержкой по секунде перед каждым символом:

const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));

const chunksToSend = ['1', '2', '3'];
const stream = new ReadableStream({
  async start(controller) {
    for(const chunk of chunksToSend) {
      await delay(1000);
      controller.enqueue(chunk);
    }
    controller.close();
  }
});

fetch('https://postman-echo.com/post', {
  method: 'POST',
  body: stream.pipeThrough(new TextEncoderStream()),
  headers: {'Content-Type': 'text/plain'},
  duplex: 'half',
})
  .then(response => response.text())
  .then(text => console.log('Response:', text));

Каждый чанк должен быть массивом байт в Uint8Array, потому тут используется .pipeThrough(new TextEncoderStream()) который собственно и делает этот массив из строки, но ты можешь в ручную чанки из Uint8Array слать, если у тебя не строковые данные.

*Важное уточнение: вся эта радость будет работать только для серверов поддерживающих http2. Почему? Потому что кодерам хрома было лень пилить поддержку под "старьё", ведь всё равно новые фичи будут юзать для новых проектов, ведь так?..

Answer 2

[Надим]

В прошлом году Google Chrome и все Chromium браузеры получили апдейт, теперь при выполнении POST-запросов можно управлять исходящим потоком, в том числе передавать данные с нужной вам скоростью.

https://developer.chrome.com/articles/fetch-stream...

Chat GPT этого не знает, так как его базы данных ограничены сентябрем 2021.

Comments

[Роман]

Ахренное решение, накидал код с чатжпт

const url = new URL(window.location.href);

const text = '0123456789012345678001234567890'; 

function wait(milliseconds) {
  return new Promise(resolve => setTimeout(resolve, milliseconds));
}

const stream = new ReadableStream({
  async start(controller) {
    for(let i = 0; i < text.length; i++) {
      await wait(1000);
      controller.enqueue(text[i]);
    }
    controller.close();
  },
}).pipeThrough(new TextEncoderStream());

fetch(url, {
  method: 'POST',
  headers: {'Content-Type': 'text/plain'},
  body: stream,
  duplex: 'half',
});

вроде запрос с задержкой только в конце ответ 400

[Роман]

Это от сервера зависит похоже, вопрос снимаю.

Answer 3

[Роман]

Дабы не поднимать новую тему, хотелось бы понять есть ли решение для задержки на получение? Выше 2 варианта для пост запросов, мне же понадобилось и для гет запроса.

Я честно и упорно и со всех сторон подходил к чат жпт, но он ничего вменяемого не смог предложить, все его ответы что то в стиле этого

const url = 'https://site. com';
const chunkSize = 500; // Number of bytes to read in each chunk
const interval = 100; // Interval in milliseconds between each chunk

fetch(url)
  .then(response => {
    const reader = response.body.getReader();
    let bytesRead = 0;

    function readChunk() {
      reader.read()
        .then(({ done, value }) => {
          if (done) {
            console.log('Finished reading the response.');
            return;
          }

          const chunk = value.slice(0, chunkSize);
          bytesRead += chunk.length;

          // Process the chunk as needed
          console.log(`Received ${chunk.length} bytes:`, chunk);

          // Schedule the next chunk read
          setTimeout(readChunk, interval);
        })
        .catch(error => {
          console.error('Error reading the response:', error);
        });
    }

    // Start reading the response in chunks
    readChunk();
  })
  .catch(error => {
    console.error('Error fetching the URL:', error);
  });