javascript - d3js 图表更新由 websocket 消息触发

Question

在 Python 中运行高速公路 Websocket 服务器并在 html 前端获取 json 更新。当消息到达时，该值(在本例中为“temp”)将通过innerHTML 显示为数字，并且该部分工作正常。

我们还得到了一个表盘图(d3js)，但更新是由代码末尾的 setInterval 函数发起的，这远非理想。如何通过 websocket 使仪表更新“onmessage”？

<script type="text/javascript">

//---the websocket part--
var sock = null;
var displaynumber = null;
var tempdata = null;

window.onload = function () {
  var wsuri;
  displaynumber = document.getElementById('disp');

  if (window.location.protocol === "file:") {
    wsuri = "ws://...:9000";
  } else {
    wsuri = "ws://" + window.location.hostname + ":9000";
  }

  //set up a new websocket
  if ("WebSocket" in window) {
      sock = new WebSocket(wsuri);
  } else if ("MozWebSocket" in window) {
      sock = new MozWebSocket(wsuri);
  } else {
      disp("Browser does not support WebSocket!");
               window.location = "http://autobahn.ws/unsupportedbrowser";
  }

  if (sock) {
    //sock.onopen = function() {};

    sock.onclose = function(e) {
      sock = null;
    };

    sock.onmessage = function(e) {
      // e.data will be sent as a string and need to be converted to object
      var jsondata = JSON.parse(e.data);
      tempdata = jsondata.temp;
      disp(tempdata + " C");
    };
  }

  function disp(m) {
    displaynumber.innerHTML = m;
  }


  //----This is the dial chart part

  dialChart();

  function dialChart() {
    var powerGauge = gauge('#power-gauge', {
      size: 300,
      clipWidth: 300,
      clipHeight: 300,
      ringWidth: 60,
      minValue: 0,
      maxValue: 100,
      transitionMs: 1000,
    });

    powerGauge.render();

    function updateReadings() {
      powerGauge.update(tempdata);
    }

    updateReadings();
    setInterval(function() {
      updateReadings();
    }, 2 * 1000);
  }
}

</script>

Answer 1

在dialChart定义的末尾，添加return powerGauge。然后，当您调用 dialChart(); 时，将结果保存到变量中。然后，不要在套接字回调中写入 tempdata，而是调用 powerGaugeVariable.update(jsondata.temp)。