如何将变量从 Node.js 发送到 Socket.io 并显示在本地网页上？

Question

我正在做一个项目，我的工作是使用 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>

Answer 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>

应该这样做。