Есть ли способ взять постоянно изменяющиеся данные из сценария python и отображать и обновлять их в компоненте Vue?

Question

У меня есть сценарий, который создает эти словари процентного изменения, которые затем сохраняются в виде файла json, скрипт отслеживает акции, поэтому проценты меняются часто, и я обновляю словарь каждую минуту.

 expoDictJ['totalPercentChange']=totalPercentChanges
 expoDictJ['lastMin']=lmPercentChanges

 with open('data.json', 'w') as outfile:
     json.dump(expoDictJ, outfile)

У меня также есть стандартный Vue компонент, только что созданный для отображения данных, которые передаются через реквизиты, такие как эти процентные изменения. Я хочу, чтобы веб-страница обновлялась новыми данными каждый раз, когда изменяется файл data. json, но я не уверен, возможно ли это. Если это сохранение в файловой системе - не лучший способ передачи данных между двумя программами, любая помощь или указатели в правильном направлении будут оценены!

Answer 1

Вы можете выполнить Polling , который каждый раз отправляет HTTP-запрос на ваш сервер для получения последних данных, или вы можете использовать Websocket / Socket.io , который позволяет вам передавать данные со своего сервера в клиентское приложение (в данном случае это приложение Vue).

С (коротким) опросом вы просто:

1. Создайте простой HTTP-сервер в python (или вы можете использовать framework / microframework, например Flask или FastAPI , что может сэкономить вам несколько раз)
2. Создайте конечную точку на своем python HTTP-сервере, которая отправляет json данные
3. Отправляйте HTTP-запрос из вашего Vue приложения каждый раз на Python сервер, чтобы получить data, код будет выглядеть примерно так:

let duration = 10000; // 10s

// Your HTTP endpoint
let url = "http://pythonserveriporurl.com/something"

// run every 10s
setInterval( () => {
  const xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  xhr.onreadystatechange = function() {
    // If request is finished with status code 200
    if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
      const data = JSON.parse(this.responseText);
      // do something with the data
    }
  };
}, duration);

вы также можете выполнять длинный опрос, который работает немного иначе, чем короткий опрос, подробнее здесь

С websocket / socket.io , вам необходимо:

1. Создать websocket или сервер socket.io в вашем приложении python, который генерирует событие каждый раз, когда ваши данные .json изменяются
2. Подключается из вашего приложения Vue к сокету . io (прокрутите вниз, чтобы увидеть пример клиента) / websocket server, затем прослушайте испущенное событие с вашего сервера socket.io / websocket, получите данные и обновите их на вашем Vue компоненте

Какой выбрать?

Это зависит от того, как вы выполняете «отслеживание» в приложении python, вы также используете короткий опрос, который вы каждую минуту отправляете запрос на внешний ресурс для обновления данных json? или вы используете другой способ обновления данных json только тогда, когда фактические данные меняются, то есть в реальном времени?

Если вы используете метод, аналогичный короткому опросу в вашем приложении python, то я не думаю, что использование websocket / socket.io принесет вам большую пользу, если только данные не меняются каждый раз при загрузке это из внешнего ресурса, и вы излучаете его только с вашего сервера, когда происходит фактическое изменение данных. Если вы обновляете данные json в реальном времени, вы можете рассмотреть возможность использования websocket / socket.io, поскольку опрос может использовать большую пропускную способность, особенно если вы делаете это с очень короткой задержкой.

И то, и другое сделать несложно, но я думаю, что большинство людей будут более знакомы с концепцией HTTP, чем с websocket / socket.io, так что вам будет проще