1

我想可视化实时传感器数据（流数据）。为此，我使用了 node.js、html 和 mysql。mysql 用于存储实时传感器数据，index.html 实现了doPoll app.js 文件的google chart，app.js 文件提供了与mysql 的连接。我能够可视化来自同一系统的数据，但是当我输入 url（公共 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>

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

4

2 回答 2

0

Saurabh 只需遵循以下步骤：

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

于 2015-10-30T05:02:52.780 回答
0

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
});
于 2015-10-07T15:56:51.760 回答