Как непрерывно заполнять текстовое поле HTML из curl API

#javascript #java #html #api #curl

#javascript #java #HTML #API #curl

Вопрос:

У меня есть текстовое поле HTML, которое я хотел бы заполнить данными, полученными от вызова API с помощью curl command. Curl API, который я использую, постоянно возвращает / транслирует данные в следующем формате:

 curl <api_endpoint>

data: value1
data: value2
data: value3

И я хотел бы, чтобы прямая трансляция отображалась в текстовом поле HTML при нажатии кнопки.
Мой HTML, JS выглядит так:

 <html>
<textarea rows='14' id="value" placeholder="anything you want here"></textarea>
<button class="get_values" onclick="return get()">GET</button>
</html>

<script>

const getButton = document.querySelector('.get_values');

getButton.addEventListener('click', function(e) {
  #fill the textbox from curl command livestream
});

</script>

Как я могу заполнить текстовое поле потоком данных из curl <api_endpont> команды?
Нет необходимости в websocket, API, который я использую, уже непрерывно передает / отправляет данные в режиме реального времени, мне просто нужно сделать вызов и заполнить текстовое поле.

1. Вам нужен сервер, который поддерживает потоки, такие как socket. ввод-вывод и клиент в вашем интерфейсе.

2. @jimmysumshugar Нет, мой API уже отправляет данные непрерывно, поэтому нет необходимости в websocket. Мне просто нужно выполнить вызов с помощью curl и заполнить текстовое поле

Ответ №1:

Вы можете просто обновить значение, сделав GET запрос, и заставить функцию повторяться с некоторым заданным интервалом. Также onclick кнопка on уже добавляет прослушиватель событий, поэтому код будет выглядеть примерно так.

 <html>
<body>
<textarea rows='14' id="value" placeholder="anything you want here"></textarea>
<button class="get_values" onclick="startUpdate(event)">GET</button>

<script>
// to set an update interval at every 2 sec(2000ms)
function startUpdate(e) {
  // e. preventDefault();
  // calling instantly
  updateTextArea();
  // and setting interval
  window.setInterval(updateTextArea, 2000);
}

// defining global variable, to display dynamic update
window.counter = 1

function updateTextArea() {
  let url = "https://jsonplaceholder.typicode.com/todos/"   window.counter; // test url
  // assuming data is json, if it is text use response.text()
  fetch(url)
    .then(response => response.json())
    .then(data => {
      let textArea = document.getElementById("value");
      // parsing the JSON value to string
      textArea.value = JSON.stringify(data);
    })
  window.counter = window.counter   1; // increment counter
}
</script>
</body>
</html>

Развернуть фрагмент

Редактировать: чтобы передать событие, вы должны передать ключевое event слово в вызове функции onclick.

1. Я попробовал ваш код с этим URL ( jsonplaceholder.typicode.com ), но когда я нажимаю на кнопку, ничего не происходит, не могли бы вы, пожалуйста, взглянуть?

2. Я отредактировал его и добавил фрагмент для удобства.