VueJS — как выводить данные/обновлять в реальном времени?

Question

[Станислав]

Появилась следующая необходимость, а именно - вывод данных в "почти" реальном времени на сторону клиента с использованием VueJS. Имеется API, которое дает мне JSON строку, в JSON строке есть поле "статус" и этот "статус" мне необходимо обновлять как можно чаще. Каким способом можно обновлять данные с помощью Vue?

Comments

[Дмитрий Кузнецов]

Веб-сокеты пробовали?

[Сергей Соколов]

Чтобы в «реальном» времени, лучше не клиенту часто-часто стучаться в API с вопросом «есть новости?»,
а сделать так, чтобы та сторона, как только что-то обновится, отправляла в клиент инфу.

Распространённый вариант – WebSocket соединение — постоянный двусторонний канал между сервером и клиентом.

Что за API? Может, у них есть и другие возможности, кроме частых GET-запросов?

[Сергей Соколов]

И да, вопрос вовсе не специфичен для VueJS.

[Станислав]

Сергей Соколов, API, которое выводит текущую задачу из базы данных. Её статус и некоторую информацию. Через Axios делаю запрос к API и получаю JSON, после обрабатываю его на Vue. Решил следующим образом:

const APIRequest = 'API URL';
    const timeout = Задержка обновления в МС;
    
    setInterval(() => {
      axios
          .get(APIRequest)
          .then(response => {
            this.apis = response.data.result
            this.load = true
          });
    }, timeout)

[Станислав]

Сергей Соколов, прям в "реальном времени" особой необходимости нет, но с веб-сокетом конечно было бы лучше, но разбираться "долго". В итоге решил все проблемы способом "выше" (:

[Сергей Соколов]

Станислав, там косяки начнутся, если вдруг сайтом станут пользоваться много человек: зря «бомбят» запросами..
Ещё могут быть "гонки" (race condition) – один ответ API задумается, уже отработает следующий, и только потом таки сработает тормозной. В итоге отобразится "вчерашнее" значение, заменив собой более свежее. В теории )

[Станислав]

Сергей Соколов, я бы не стал писать костыли на высоконагруженном сервисе, скорее передал бы данное занятие под JS/Vue разработчика, коим я не являюсь :)

Answer 1

[Владимир Коротенко]

https://www.dotnetcurry.com/aspnet-core/1480/aspne...

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