我目前正在做一个arduino项目。如果arduino通过串行端口与NodeJS服务器通信,服务器通过socket.io向客户端发送数据
我已经得到了出现在浏览器中的信息(h1标签带有arduino的"实时"计数器)。
问题是,要更新计数器,我必须刷新浏览器。我的目标是确保自动更新这些信息。我查看了文档,没有找到socket的任何事件。指向更新的IO。
下面是我的代码:
index.js
const express = require('express');
const app = express();
const http = require('http').createServer(app);
app.use(express.static(__dirname + '/public'));
let expressPort = process.env.PORT || 3000;
// Socket:
const io = require('socket.io')(http);
// Arduino Stuff:
const SerialPort = require('serialport');
const ReadLine = SerialPort.parsers.Readline;
const port = new SerialPort('COM3', { baudRate: 9600 });
const parser = port.pipe(new ReadLine({ delimiter: 'rn' }));
parser.on('data', data => {
let counter = data;
console.log(counter);
io.on('connection', socket => {
io.emit('arduino', counter);
});
});
parser.on('error', error => {
console.log(error);
});
// Express stuff
app.use(express.static(__dirname + '/public'));
app.get('/', (req, res) => {
res.sendFile(__dirname + '/public/');
});
http.listen(expressPort, () => {
console.log(`Listening on port: ${expressPort}`);
});
index . html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arduino Stuff</title>
</head>
<body>
<h1 id="counter"></h1>
<script src="/socket.io/socket.io.js"></script>
<script src="app.js" charset="UTF-8"></script>
</body>
app.js
const socket = io();
socket.on('arduino', data => {
console.log(data);
const counter = document.getElementById('counter');
counter.innerHTML = data;
});
提前谢谢你:)
编辑:
我忘了放arduino代码,但基本上它只是一个带有dealay的计数器:
int counter = 0;
void setup() {
Serial.begin(9600);
}
void loop() {
Serial.println(++counter, DEC);
delay(3000);
}
好吧,我很笨,只是不要用io.on('connection'…),包装emit方法没有一个'update'方法本身,emit方法足以实现这个,但是,如果你把它插入到'connection'中,它只是在第一个连接中被调用,因此,只是在刷新中显示信息。
结果:
parser.on('data', data => {
let counter = data;
console.log(counter);
io.emit('arduino', counter);
});
抱歉浪费了你们的时间。