Как отправить переменные из Node.js в Socket.io и отобразить на локальной веб-странице?
Я работаю над проектом, в котором моя работа заключается в использовании Node.js и Socket.io для чтения текстового файла (содержащего 3 показания в реальном времени) и получения данных в 3 переменных, а затем отправки их в Socket.io и получения их отображается на веб-сайте постоянно, без необходимости его обновления. Я запускал свои коды, ошибок не выдавало, но и на сайте ничего не отображалось. Поэтому я не знаю, что не так в моем коде. Мне нужна помощь с передачей переменных из Node.js в Socket.io и отображением их на моей веб-странице. Это мой серверный файл:
var http = require('http').createServer(handler); //require http server, and cr$
var fs = require('fs'); //require filesystem module
var io = require('socket.io')(http) //require socket.io module and pass the htt$
http.listen(8080); //listen to port 8080
function handler (req, res) { //create server
fs.readFile(__dirname + '/index.html', function(err, data) { //read file inde$
if (err) {
res.writeHead(404, {'Content-Type': 'text/html'}); //display 404 on error
return res.end("404 Not Found");
}
res.writeHead(200, {'Content-Type': 'text/html'}); //write HTML
res.write(data); //write data from index.html
return res.end();
});
}
io.sockets.on('connection', function (socket) {
setInterval(function(){
var array = fs.readFileSync('report.txt').toString().split("\n");
var volt = (array[0]);
var power = (array[1]);
var temp = (array[2]);
socket.emit('volt',{'volt': volt});
socket.emit('power',{'power': power});
socket.emit('temp',{'temp': temp});
}, 1000);
});
файл index.html:
<body>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script>
var socket = io('http://10.117.230.219:8080');
socket.on('volt', function (data) {
$('#volt').text(data.volt);
socket.on('power', function (data) {
$('#power').text(data.power);
socket.on('temp', function (data) {
$('#temp').text(data.temp);
});
</script>
<div id = "volt"></div>
<div id = "power"></div>
<div id = "temp"></div>
</body>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
На вашей HTML-странице отсутствуют некоторые теги, включая HTML и head. Вам также не хватает закрывающего )} для каждого socket.on(...) звонка в вашем скрипте. Вот как это должно выглядеть:
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script>
var socket = io('http://localhost:8080');
socket.on('volt', function (data) {
$('#volt').text(data.volt);
})
socket.on('power', function (data) {
$('#power').text(data.power);
})
socket.on('temp', function (data) {
$('#temp').text(data.temp);
})
</script>
</head>
<body>
<div id = "volt"></div>
<div id = "power"></div>
<div id = "temp"></div>
</body>
</html>
Это должно сделать это.
У меня нормально работает. Я изменил эту строку var socket = io('http://localhost:8080');, чтобы указать на локальную машину. Возможно, вы захотите проверить Javascript-консоль Chrome, чтобы узнать, регистрируются ли какие-либо ошибки. (В качестве теста вы также можете поместить случайную строку между тегами body, чтобы хотя бы увидеть, загружается ли страница.)
Что-то не так с моим IP-адресом RPi. Теперь у меня все работает, спасибо!
Отлично, рад, что работает. Пожалуйста, отметьте ответ как правильный, если считаете, что он вам помог. :)
Я пытался проголосовать за ваш ответ, но это не позволило мне быть, потому что я слишком новичок, но я просто отметил ваш ответ как правильный. Спасибо еще раз
Хороший улов, спасибо! Я изменил его, и на веб-странице по-прежнему ничего не отображается :(