Question

我希望可视化实时传感器数据（流数据）。对于我使用的，node.js，html和mysql。 Mysql用于存储实时传感器数据，index.html实现了goPoll app.js文件的google图表，app.js文件提供了与mysql的连接。我能够可视化来自同一系统的数据，但是当我输入url（公共IP）Chrome显示“无法加载源：net :: ERR_CONNECTION_REFUSED”和firefox显示“Cross-Origin Request Blocked：同源策略禁止阅读http://localhost:8686/temperatureData处的远程资源。（原因：CORS请求失败）。“我已经从Router.转发了端口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>

我该怎么办才能提供远程可视化？我想在移动和桌面/笔记本电脑浏览器中提供远程可视化。

Answer 1

ExpressJS上的CORS

在node.js上的ExpressJS应用中，对您的路线执行以下操作：

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

app.get('/', function(req, res, next) {
  // Handle the get for this route
});

app.post('/', function(req, res, next) {
 // Handle the post for this route
});

Answer 2

Saurabh关注Bellow步骤：

1）在运行Microsoft Dynamics NAV Web服务器组件的计算机上，在“开始”菜单上，选择“控制面板”，选择“系统和安全”，然后选择“Windows防火墙”。 2）在导航窗格中，选择“高级设置” 3）在“具有高级设置的Windows防火墙”窗口的导航窗格中，选择“入站规则”，然后在“操作”窗格中选择“新建规则”。
4）在Rule Type页面上，选择Port，然后选择Next按钮 5）在“协议和端口”页面上，选择“特定本地端口”，然后输入端口号。例如，输入8080作为Microsoft Dynamics NAV Web客户端的默认端口。选择“下一步”按钮 6）在“操作”页面上，选择“允许连接”，然后选择“下一步”按钮 7）在“配置文件”页面上，选择配置文件，然后选择“下一步”按钮 8）在“名称”页面上，键入规则的名称，然后选择“完成”按钮完成上述步骤后，请通过路由器进行端口转发享受

远程系统（OutSide LAN）的实时可视化

2 个答案: