Is there a way to take constantly changing data from a python script and have it displayed and updating in a Vue component?

Question

I have a script that is creating these percent change dictionaries that are then saved as a json file, the script is tracking stocks so the percent changes often and I update the dictionary's every minute.

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

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

I also have a standard Vue component just built to display data that is passed in through props such as these percentage changes. I want the web-page to update with the new data every time the 'data.json' file changes but I'm not sure if that's possible. If this whole saving to a file system isn't the best way to transfer data between the two programs any help or pointers in the right direction would be appreciated!

Answer 1

You can do Polling, which sends a HTTP request to your server every x time to get the latest data, or you can use Websocket / Socket.io which allows you to emit data from your server to your client app (which is Vue app in this case).

With (short) polling, you simply:

1. Create a simple HTTP Server in python (or you can use framework / microframework like Flask or FastAPI which might save you some times)
2. Create an endpoint in your python HTTP server that sends the json data
3. Send an HTTP request from your Vue app every x time to the Python server to get the data, the code will look something like this:

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);

you can also do long polling, which works a little bit different than short polling, read more here

With websocket / socket.io, you need to:

1. Create a websocket or socket.io server in your python app that emits an event every time your .json data is changed
2. Connects from your Vue app to the socket.io (Scroll to bottom for client example) / websocket server, then listen to the emitted event from your socket.io / websocket server, get the data, and update it on your Vue component

Which one to choose?

It depends on how you do the "tracking" on your python app, are you also use short polling which you send a request to external resource every minutes to update the json data? or you use some other way to update your json data only when the actual data is changing a.k.a. in real time?

If you are using method similar to short polling in your python app, then I don't think using websocket / socket.io will gives you much benefit unless the data isn't changing every time you fetch it from the external resource and you only emits from your server when there's an actual data change. If you are updating the json data in real time, then you might want to consider using websocket / socket.io since polling can use more bandwidth especially if you are doing it with a very short delay.

Both are not really difficult to make, but I think most people will be more familiar with HTTP concept than websocket / socket.io so it might be easier for you