我正在尝试使用 socket.io 将数据从 node.js 脚本传输到 HTML 网页。 node.js 脚本正在执行一个函数(使用 BeagleBone Black 传感器)并返回某个值。我想通过套接字将此值传输到 HTML 页面。然后我希望 HTML 页面显示此值。我已经能够让网页在 Chrome 的 Javascript 控制台上记录所有内容。我不明白为什么数据没有打印在实际页面上。
// Install socket.io: terminal, goto /var/lib/cloud9 and enter: npm install socket.io
var app = require('http').createServer(handler);
var io = require('socket.io').listen(app);
var fs = require('fs');
var b = require('bonescript');
var fulldata = 0;
// count how many pulses
var pulses = 0;
// track the state of the pulse pin
var lastflowpinstate;
//time between pulses
var lastflowratetimer = 0;
// used to calculate a flow rate
var flowrate;
// Interrupt is called once a millisecond, looks for any pulses
var value = 0;
var liters = 0;
app.listen(8090);
/* socket.io options go here
io.set('log level', 2); // reduce logging - set 1 for warn, 2 for info, 3 for debug
io.set('browser client minification', true); // send minified client
io.set('browser client etag', true); // apply etag caching logic based on version number
*/
console.log('Server running on: http://' + getIPAddress() + ':8090');
var Sensor = "P8_19";
b.pinMode('P8_19', b.INPUT);
console.log(b.digitalRead('P8_19'));
function handler (req, res) {
if (req.url == "/favicon.ico"){ // handle requests for favico.ico
res.writeHead(200, {'Content-Type': 'image/x-icon'} );
res.end();
//console.log('favicon requested');
return;
}
fs.readFile('SensorHTML.html', // load html file
function (err, data) {
if (err) {
res.writeHead(500);
return res.end('Error loading index.html');
}
res.writeHead(200);
res.end(data);
});
}
io.sockets.on('connection', function(socket) {
setInterval(function() {
//doSomething();
b.pinMode('P8_19', b.INPUT);
value = b.digitalRead('P8_19');
if (value == lastflowpinstate)
{
lastflowratetimer++;
//return; // nothing changed!
}
if (value == '1')
{
//low to high transition!
pulses++;
}
lastflowpinstate = value;
flowrate = 1000.0;
flowrate /= lastflowratetimer; // in hertz
lastflowratetimer = 0;
liters = pulses / (450);
fulldata += liters;
JSON.stringify(fulldata);
//send temperature reading out to connected clients
socket.emit('water', {'water': fulldata});
}, 500);
//function doSomething() {
});
// Get server IP address on LAN
function getIPAddress() {
var interfaces = require('os').networkInterfaces();
for (var devName in interfaces) {
var iface = interfaces[devName];
for (var i = 0; i < iface.length; i++) {
var alias = iface[i];
if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal)
return alias.address;
}
}
return '0.0.0.0';
}
和 HTML 文件:
<html>
<head>
<!-- include bootstrap, jquery for easy div manipulation -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="node_modules/socket.io-client/dist/socket.io.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<h1>SmartWater</h1>
<th>Flow (liters)</th>
<script>
var socket = io.connect('http://192.168.7.2:8090/'); //enter the IP of your beaglebone and port you are using in app.js
socket.on('water', function(data) {
//$('#').html(data.full_data);
$('#water').html(data.fulldata);
console.log(data.fulldata);
});
</script>
<div id="water"></div>
</body>
</html>
如有任何帮助或见解，我们将不胜感激。
最佳答案
在客户端中，更改:
$('#water').html(data.fulldata);
console.log(data.fulldata);
为此:
$('#water').html(data.water);
console.log(data.water);
您在服务器上设置的属性名称是water，而不是fulldata。
此外，在服务器上，删除这一行:
JSON.stringify(fulldata)
没有必要将单个数字字符串化，该数字只是作为对象的属性传递。事实上，它可能会给您带来麻烦。
在服务器上，您还需要保存调用 setInterval() 的计时器，以便在套接字断开连接时可以 clearInterval()。我建议将间隔计时器句柄存储为套接字对象本身的自定义属性，因为这样可以更轻松地在 'disconnect' 事件中进行访问。
这是一个如何做到这一点的例子:
io.on('connection', function(socket) {
var tm = setInterval(function() {
//doSomething();
b.pinMode('P8_19', b.INPUT);
value = b.digitalRead('P8_19');
if (value == lastflowpinstate)
{
lastflowratetimer++;
//return; // nothing changed!
}
if (value == '1')
{
//low to high transition!
pulses++;
}
lastflowpinstate = value;
flowrate = 1000.0;
flowrate /= lastflowratetimer; // in hertz
lastflowratetimer = 0;
liters = pulses / (450);
fulldata += liters;
//send temperature reading out to connected clients
socket.emit('water', {'water': fulldata});
}, 500);
socket.on('disconnect', function() {
clearInterval(tm);
});
//function doSomething() {
});
关于javascript - 如何显示来自 socket.io 连接的数据？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30293345/