Question

我正在尝试使用来自传感器的数据制作实时图表，目前正在运行，但是我不确定如何自行更新。我正在使用node / express / pug，我有一个后端，它侦听MQTT消息并将它们附加到json文件中，并保持最新的30个左右的值。前端的路由index.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主题（在Websockets上使用MQTT即可查看Paho Javascript客户端）并实时更新，而不必回到后端并在每次添加新值时提取所有历史数据。

如何使用Charts.js从json文件刷新数据？

1 个答案: