如何使用charts.js刷新json-file中的数据？

Question

我正在尝试使用来自我的传感器的数据制作一个实时图表，并且目前正在运行，但我不确定如何让它自行更新。我正在使用node / express / pug，我有一个后端，它监听MQTT消息并将它们附加到json文件，保留最新的30个值左右。前端的路由索引.js解析JSON并将其构造成数组，然后传递给pug模板，然后它可以访问其中的javascript。

我的问题是，为了让它动态重新加载，我仍然可以通过index.js这样做，还是我需要以另一种方式做到这一点？理想情况下，当文件从后端更新到前端时会发出某种通知，但计时器将完全足够。更新将在1000毫秒左右。我是javascript / web开发的初学者。

我的index.js文件，最后一部分是相关部分：

var router = express.Router();
var db;
var fs = require('fs');
var moment = require('moment');

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Sematek StrainMonitor' });
  next();
});

//when rawdata is loaded, load client
router.get('/rawdata', function(req, res) {

  var dateFrom = req.query.from;
  var dateTo = req.query.to;
  var dateFromEpoch = moment(dateFrom).unix();
  var dateToEpoch = moment(dateTo).unix();

  let searchQuery;
  if ((dateFromEpoch) && (dateToEpoch)) {
    searchQuery = "{epoch : { $gt :  " + dateFromEpoch + ", $lt : " + dateToEpoch + "}}";
  };

  req.conn.then(client=> client.db('test').collection('sensor0').find({searchQuery}).toArray(function(err, docs) {
    if(err) { console.error(err) }
    if (!docs) {
      console.log("oops.. didn't retrieve any docs from the mongodb serv");
    }
    const dataPairsDB = docs.map(e => ({x: e.epoch, y: e.data}) );
    let datasetDB = [];
    let labelsetDB = [];
    dataPairsDB.forEach((num,index) => {
      labelsetDB.push(moment.unix(dataPairsDB[index].x).format('HH:mm:ss'));
      datasetDB.push(dataPairsDB[index].y);
    });

    console.log(req.query)

    //gets CloudMQTT values from JSON file and converts it into two arrays for Chart.js display
      let data = JSON.parse(fs.readFileSync("./json/latest-value.json"));

      const dataPairs = data.readings.map(e => ({x: e.epoch, y: e.data}) );
      let dataset = [];
      let labelset = [];
      dataPairs.forEach((num,index) => {
        labelset.push(moment.unix(dataPairs[index].x).format('HH:mm:ss'));
        dataset.push(dataPairs[index].y);
      });

    if (req.cookies.isLoggedIn == 'true') {
      res.render('rawdata', {
        docs : docs,
        datasetDB : JSON.stringify(datasetDB),
        labelsetDB : JSON.stringify(labelsetDB),
        dataset : JSON.stringify(dataset),
        labelset : JSON.stringify(labelset)
      });
    } else {
      res.redirect(401,'/');
    }
  }))
});

从我的rawdata.pug文件：

        canvas(id="line-chart" )
        script(src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js')
        script(type='text/javascript').
            var dataset = JSON.parse('!{dataset}');
            var labelset = JSON.parse('!{labelset}');
        script(src='/scripts/charter.js') 

Answer 1

只需让网页订阅相同的MQTT主题（使用MQTT over Websockets查看Paho Javascript客户端）并更新直播，无需返回后端并在每次添加新值时提取所有历史数据。