2015-09-28 48 views
0

其實我正在使用web服務調用以JSON的形式獲取數據。在撥打寧靜的電話後,我將新生成的數據寫入traffic.json文件。在node.js中刷新頁面後,如何獲取新生成的數據

在提交後的node.js中,我無法獲取新生成的數據,而是獲取了以前的數據。

我Area.html:

<!DOCTYPE html> 
<meta charset="utf-8"> 
<head> 
<style> 
body { 
      font: 10px sans-serif; 
     } 

     .axis path, 
     .axis line { 
      fill: none; 
      stroke: #000; 
      shape-rendering: crispEdges; 
     } 

    .area { 
      fill:#00bfff; 
     } 


</style> 
</head> 
<body> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
<script> 
var margin = {top: 20, right: 20, bottom: 30, left: 50}, 
     width = 960 - margin.left - margin.right, 
     height = 500 - margin.top - margin.bottom; 

    var x = d3.time.scale() 
     .range([0, width]); 

    var y = d3.scale.linear() 
     .range([height, 0]); 

    var xAxis = d3.svg.axis() 
     .scale(x) 
     .orient("bottom"); 

    var yAxis = d3.svg.axis() 
     .scale(y) 
     .orient("left"); 

    var area = d3.svg.area() 
     .x(function(d) { return x(d.timestamp); }) 
     .y0(height) 
     .y1(function(d) { return y(d.total_traffic); }); 

    var svg = d3.select("body").append("svg") 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
     .append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

var jsonURL = "http://192.168.7.123:3000/data/traffic"; 

alert(jsonURL); 

d3.json(jsonURL, function(error, data){ 

alert(data); 

     data.forEach(function(d) { 
     d.timestamp = d.timestamp; 
     d.total_traffic = +d.total_traffic; 
     }); 

    x.domain(d3.extent(data, function(d) { return d.timestamp; })); 
    y.domain([0, d3.max(data, function(d) { return d.total_traffic; })]); 


    svg.append("path") 
     .datum(data) 
     .attr("class", "area") 
     .attr("d", area); 
    svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis).append("text") 
.attr("x", 875) 
.attr("y", 15) 
.style("text-anchor", "bottom") 
     .text("Client"); 

    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis) 
    .append("text") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 6) 
     .attr("dy", ".71em") 
     .style("text-anchor", "end") 
     .text("Kilo Bytes"); 


}); 

</script> 

<p align="center"> 
     <button type="button" class="myButton" 
      style="margin-left: auto; margin-right: auto; display: block; margin-top: 0%; margin-bottom: 0%" 
      onclick="history.go(-1);">Back</button> 
    </p> 

</body> 
</html> 

在Area.html,在這一點上的代碼,我在數據變量中獲得以前的數據,而不是新的數據。

var jsonURL = "http://192.168.7.123:3000/traffic"; 

    alert(jsonURL); 

    d3.json(jsonURL, function(error, data){ 
alert(data); 
.... 
.... 
}); 

我app.js:

app.get('/data/traffic',function(req,res) { 
    res.sendfile('views/traffic.json'); 
}); 

我traffic.json

[ { "client_ip" : "1.0.230.145" , "timestamp" : "1341667450773" , "total_traffic" : 0} , { "client_ip" : "1.0.230.145" , "timestamp" : "1341667450786" , "total_traffic" : 3} , { "client_ip" : "1.0.230.145" , "timestamp" : "1341667451076" , "total_traffic" : 4} , { "client_ip" : "1.0.230.145" , "timestamp" : "1341667451104" , "total_traffic" : 7} , { "client_ip" : "1.0.230.145" , "timestamp" : "1341667451128" , "total_traffic" : 10}] 

我怎樣才能解決這個問題?

+0

燦任何人都可以幫我解決這個問題... – dev333

+0

你可以顯示你當前的代碼嗎? – dimakura

+0

請檢查編輯好的代碼 – dev333

回答

1

你的代碼很難閱讀,你在頁面上結合了js/html/css,這是不對的。

對此代碼:

app.get('/data/traffic',function(req,res) { 
    res.sendfile('views/traffic.json'); 
}); 

你只是從文件中讀取的數據在這裏,也不會更新,如果不更新此文件。製作新的快速路線以保存數據,從該路線中的客戶端接收數據並將其保存到此文件。

UPD:你有不正確的網址在這裏:

var jsonURL = "http://192.168.7.123:3000/traffic"; 

看你表達途徑,有'/數據/業務',不'/交通'

+0

非常感謝您的信息 – dev333

+0

如何在此更新文件 – dev333

+0

您需要製作新的路線,這將允許您發佈數據:http://expressjs.com/api.html,然後只需使用fs模塊在文件中寫入收到的數據 - https://nodejs.org/api/fs.html – user4176305

相關問題