Я хочу визуализировать данные датчика реального времени (потоковые данные). Для этого я использовал 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>
что я должен сделать, чтобы я мог обеспечить удаленно визуализацию? Я хочу предоставить удаленную визуализацию в мобильном и настольном/портативном браузере.
@ abc-Thank you. –