我想可视化实时传感器数据(流数据)。为此我使用了 node.js、html 和 mysql。 Mysql用于存储实时传感器数据，index.html实现google chart doPoll app.js文件，app.js文件提供与mysql的连接。我能够可视化来自同一系统的数据，但是当我输入 url(公共(public) IP)时，Chrome 显示“无法加载源:net::ERR_CONNECTION_REFUSED”并且 firefox 显示“跨源请求被阻止:同源策略不允许读取位于 http://localhost:8686/temperatureData 的远程资源。(原因:CORS 请求失败)。”我已经从路由器转发了端口 8686。但是我能够使用来自远程系统的两个浏览器以 json 格式查看数据。app.js 的代码如下:
/**
* */
var http = require('http');
var fs = require('fs');
var port = 8686;
var i=0;
var j=0;
function randomInt(low, high) {
return Math.floor(Math.random() * (high - low) + low);
}
// 404 response
function send404Response(response){
response.writeHead(404,{"Content-Type": "text/plain" });
response.write("Error 404: Page not found");
response.end();
}
// handle the user request..
http.createServer(function(req, res) {
console.log('New incoming client request for ' + req.url);
res.writeHeader(200, {
'Content-Type' : 'application/json'
});
switch (req.url) {
case '/temperatureData':
var mysql=require('mysql');
var connection=mysql.createConnection({
host:'localhost',
user:'root',
password:'root',
database:'feedback',
port:3306
});
var query=connection.query(
// make sure with table name
'SELECT * FROM DEMO2',function(err,result,fields){
if(err) throw err;
//res.write('{"value" :' + result[i].tempvalue + ',"value1":' + result[i].value + '}');
// make sure with tabel fieldname (ex-tempvalue) ok
// side by side open mysql
res.write('{"value" :' + result[i].tempvalue + '}');
//res.write('{"value1":' + result[i].value + '}');
console.log('Temperature:', result[i].tempvalue );
i++;
res.end();
connection.end();
});
break;
case '/temperature':
res.writeHead(200, 'text/html');
var fileStream = fs.createReadStream('index.html');
fileStream.pipe(res);
break;
default:
send404Response(res);
}
}).listen(port);
console.log('Server listening on http://localhost:' + port);
Index.html 文件的代码如下所示:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript"
src="https://www.google.com/jsapi?autoload={
'modules':[{
'name':'visualization',
'version':'1',
'packages':['corechart']
}]
}">
</script>
</head>
<body>
<div id="chart" style="width: 1500px; height: 700px"></div>
<script>
$(document).ready(function () {
var maxDataPoints = 10;
var chart = new google.visualization.LineChart($('#chart')[0]);
var data = google.visualization.arrayToDataTable([
['Time', 'Temperature'],
[getTime(), 0]
]);
var options = {
title: 'Temperature',
hAxis: {title: 'Time', titleTextStyle: {color: '#333'}}, //Added hAxis and vAxis label
vAxis: {title: 'TempValue', minValue: 0, titleTextStyle: {color: '#333'}},
curveType: 'function',
animation: {
duration: 1000,
easing: 'in'
},
legend: {position: 'bottom'}
};
function addDataPoint(dataPoint) {
if (data.getNumberOfRows() > maxDataPoints) {
data.removeRow(0);
}
data.addRow([getTime(), dataPoint.value]);
chart.draw(data, options);
}
function getTime() {
var d = new Date();
return d.toLocaleTimeString();
}
function doPoll() {
$.getJSON('http://localhost:8686/temperatureData',
function (result) {
addDataPoint(result);
setTimeout(doPoll, 10000);
});
}
doPoll();
});
</script>
</body>
</html>
我应该怎么做才能提供远程可视化？我想在移动和桌面/笔记本电脑浏览器中提供远程可视化。
最佳答案
Saurabh 只需按照以下步骤操作:
1) 在运行 Microsoft Dynamics NAV Web Server 组件的计算机上，在“开始”菜单上选择“控制面板”，选择“系统和安全”，然后选择“Windows 防火墙”。
2) 在导航 Pane 中，选择高级设置。
3) 在“Windows 防火墙高级设置”窗口的导航 Pane 中，选择“入站规则”，然后在“操作” Pane 中选择“新建规则”。
4) 在规则类型页面上，选择端口，然后选择下一步按钮。
5) 在协议(protocol)和端口页面上，选择特定本地端口，然后输入端口号。例如，为 Microsoft Dynamics NAV Web 客户端的默认端口输入 8080。选择“下一步”按钮。
6) 在“操作”页面上，选择“允许连接”，然后选择“下一步”按钮。
7) 在配置文件页面上，选择配置文件，然后选择下一步按钮。
8) 在“名称”页面上，键入规则的名称，然后选择“完成”按钮。
完成上述步骤后，通过路由器进行端口转发。
享受
关于html - 来自远程系统的实时可视化(OutSide LAN)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32994479/