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

Question

我想可视化实时传感器数据（流数据）。为此我使用了 node.js、html 和 mysql。 Mysql 用于存储实时传感器数据，index.html 实现 google 图表，doPoll app.js 文件，app.js 文件提供与 mysql 的连接。我能够可视化来自同一系统的数据，但是当我输入 url(Public IP) Chrome 显示 "Failed to loadre source : net : : ERR_CONNECTION_REFUSED" 和 firefox 显示 "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8686/temperatureData. (Reason: CORS request failed)." 我已转发来自 Router.But 的端口 8686 我能够使用来自远程 system.Code 的两个浏览器查看 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>

我应该怎么做才能提供远程可视化？我想在移动设备和 desktop/laptop 浏览器中提供远程可视化。

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 只需按照以下步骤操作：

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

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

Real time visualization from Remote System (OutSide LAN)

html

mysql

node.js-stream