2015-10-07 5 views
1

Я хочу визуализировать данные датчика реального времени (потоковые данные). Для этого я использовал node.js, html и mysql. Mysql, используемый для хранения данных датчика в реальном времени, index.html реализует диаграмму google, которая делает файл app.js doPoll, файл app.js обеспечивает подключение к mysql. Я могу визуализировать данные из одной и той же системы, но когда я ввел url (Public IP) дисплей Chrome «Не удалось загрузить источник: net:: ERR_CONNECTION_REFUSED» и отображение Firefox. удаленный ресурс по адресу http://localhost:8686/temperatureData. (Причина: запрос CORS не выполнен). " Я отправил порт 8686 из Router.But я могу просматривать данные в формате JSON с использованием как браузер с удаленного system.Code для app.js как показано ниже:Визуализация в реальном времени из удаленной системы (OutSide LAN)

/** 

* */

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> 

что я должен сделать, чтобы я мог обеспечить удаленно визуализацию? Я хочу предоставить удаленную визуализацию в мобильном и настольном/портативном браузере.

ответ

0

Саурабх Просто следуйте Беллоу шаги:

1) На компьютере, на котором запущены компоненты веб-сервера Microsoft Dynamics NAV, в меню «Пуск» выберите «Панель управления», выберите «Система и безопасность», а затем выберите «Windows» Брандмауэр. 2) В навигационной панели выберите Дополнительные настройки.
3) В окне «Брандмауэр Windows с расширенными настройками» в области переходов выберите «Входящие правила», а затем в панели «Действия» выберите «Новое правило».
4) На странице «Тип правила» выберите «Порт», а затем нажмите кнопку «Далее».
5) На странице «Протокол и порты» выберите «Определенные локальные порты», а затем введите номер порта. Например, введите 8080 для порта по умолчанию веб-клиента Microsoft Dynamics NAV. Выберите кнопку «Далее».
6) На странице «Действие» выберите «Разрешить подключение», а затем нажмите кнопку «Далее».
7) На странице «Профиль» выберите профили, а затем нажмите кнопку «Далее».
8) На странице «Имя» введите имя правила и затем нажмите кнопку «Готово».
Как только вы закончите с вышеуказанными шагами, выполните переадресацию порта вашего маршрутизатора.
Наслаждайтесь

+0

@ abc-Thank you. –

0

CORS на ExpressJS

В приложении ExpressJS на Node.js, выполните следующие действия с маршрутами:

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 
}); 
Смежные вопросы