DS18B20 -如何在React钩子中显示？
DS18B20 -如何在React钩子中显示？
提问于 2020-12-03 23:49:31
我尝试通过javascript/react/nextjs和DS18B20实现树莓派。这对于简单的javascript/jquery和socketio来说是成功的。但是在我使用socketio切换到nextjs/reactjs之后，它无法显示。
请帮助验证我在nextjs/reactjs代码中遗漏的地方。
成功代码如下：
server.js
var io = require('socket.io').listen(3000),
ds18b20 = require('ds18b20');
var interval = 1000;
io.sockets.on('connection', function (socket) {
var sensorId = [];
ds18b20.sensors(function (err, id) {
sensorId = id;
socket.emit('sensors', id); //send sensor ID's to clients
});
setInterval(function () {
sensorId.forEach(function (id) {
ds18b20.temperature(id, function (err, value) {
socket.emit('temps', {'id': id, 'value': value});
});
});
}, interval);
});server.js (使用express 4.17.1、socket.io 3.0.4进行更新)
const express = require('express');
const http = require('http');
const socketIO = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = socketIO(server, {
cors: {
origin: "*"
}
});
const ds18b20 = require('ds18b20');
const port = 3000;
const interval = 1000;
io.on('connection', (socket) => {
var sensorId = [];
ds18b20.sensors((err, id) => {
sensorId = id;
socket.emit('sensors', id);
});
setInterval(() => {
sensorId.forEach((id) => {
ds18b20.temperature(id, (err, value) => {
socket.emit('temps', {'id': id, 'value': value});
});
});
}, interval);
});
server.listen(port, () => console.log(`Listening on port ${port}`));index.html (客户端文件夹)
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="socket.io-client/dist/socket.io.js"></script>
<script>
var socket = io.connect('http://172.20.10.5:3000'); // ip address related to server.js
socket.on('sensors', function (data) {
data.forEach(function (d) {
var html = '<tr><td>' + d + '</td><td id="' + d + '"></td></tr>';
$('#temps').append(html);
});
});
socket.on('temps', function (data) {
$('#' + data.id).html(data.value);
});
</script>
</head>
<body>
<h1>DS18B20 Temps</h1>
<div class="container">
<table class="table" id="temps">
<thead>
<tr>
<th>Sensor ID</th>
<th>Temperature (celsius)</th>
</tr>
</thead>
</table>
</div>
</body>
</html>index.js (客户端文件夹)
const express = require('express');
const app = express();
const port = 8080;
app.use(express.static('public'));
app.use(express.static('node_modules'));
app.listen(port, () => {
console.log(`App listening at ${port}`);
});
ReactJS，无法显示。
server.js
const app = require('express')();
const server = require('http').Server(app);
const io = require('socket.io')(server);
const next = require('next');
const dev = process.env.NODE_ENV !== 'production';
const nextApp = next({dev});
const nextHandler = nextApp.getRequestHandler();
const ds18b20 = require('ds18b20');
let port = 3000;
let interval;
io.on("connect", (socket) => {
console.log("New client conneccted");
if (interval) {
clearInterval(interval);
}
var sensorId = [];
ds18b20.sensors((err, id) => {
sensorId = id;
socket.emit('sensors', id);
});
socket.on("Temp", () => {
setInterval(() => {
ds18b20.temperature(id, (err, value) => {
io.emit("FromAPI",
JSON.stringify({
id: id,
value: value
}));
});
}, interval);
});
socket.on("disconnect", () => {
console.log("Client disconnected")
clearInterval(interval)
});
})
nextApp
.prepare()
.then(() => {
app.get('*', (req, res) => {
return nextHandler(req, res)
});
server.listen(port, (err) => {
if(err) throw err;
console.log(`Ready on port ${port}`);
})
})index.js
import React, { useState, useEffect } from 'react';
import socketIOClient from 'socket.io-client';
import { Button, Input } from 'react-bootstrap';
const ENDPOINT = "http://172.20.10.5:3000";
const socket = socketIOClient(ENDPOINT);
function App() {
const [response, setResponse] = useState("");
useEffect(() => {
socket.on("FromAPI", data => {
let temp = response;
temp.push(JSON.parse(data));
setResponse(temp);
})
}, [])
return (
<p>
Temp is {response.value} degree celsius
</p>
)
}
export default App;回答 1
Stack Overflow用户
回答已采纳
发布于 2020-12-10 21:49:07
今天，我得到了答案，并在浏览器中成功地显示了温度结果。我只是混淆了socketio的变量。
请看下面的成功代码：
server.js
const express = require('express');
const http = require('http');
const socketIO = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = socketIO(server, {
cors: {
origin: "*"
}
});
const ds18b20 = require('ds18b20');
const port = 4001;
const interval = 1000;
io.on('connection', (socket) => {
var sensorId = [];
ds18b20.sensors((err, id) => {
sensorId = id;
socket.emit('sensors', id);
});
setInterval(() => {
sensorId.forEach((id) => {
ds18b20.temperature(id, (err, value) => {
socket.emit('temps', {'id': id, 'value': value});
});
});
}, interval);
});
server.listen(port, () => console.log(`Listening on port ${port}`));index.js
import React, { useState, useEffect } from 'react';
import socketIOClient from 'socket.io-client';
import { Table } from 'react-bootstrap';
const ENDPOINT = "http://10.10.12.165:4001";
const socket = socketIOClient(ENDPOINT);
function App() {
const [response, setResponse] = useState("");
useEffect(() => {
socket.on("temps", data => {
setResponse(data);
})
}, [])
return (
<div className="container">
<h1>Realtime Temperature</h1>
<Table responsive>
<thead>
<tr>
<th>Sensor ID</th>
<th>Temperature (celsius)</th>
</tr>
</thead>
<tbody>
<tr>
<td>{response.id}</td>
<td>{response.value}</td>
</tr>
</tbody>
</Table>
</div>
)
}
export default App;最终结果：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65129320
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号