如何将数据从socket io显示到html页面列表答案

【问题标题】：How to display data from socket io to html page list如何将数据从socket io显示到html页面列表
【发布时间】：2019-07-31 21:22:03
【问题描述】：

所以，我的程序从 udp 服务器获取数据，我只想在它更新时将其显示在 HTML 页面 1 的列表中。在控制台中它可以工作，但如何在页面上执行？

我得到了这个代码

index.js

var dgram = require('dgram'),
    server = dgram.createSocket('udp4');  //this server gets data from udp packet

var msg;

server.on('message', function (message, rinfo) {
  msg = message.toString('ascii');   //udp packet data to string 
  console.log(msg);
});

server.on('listening', function () {
  var address = server.address();
  console.log('UDP Server listening ' + address.address + ':' + address.port);
});
server.bind(8007); 

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

io.on('connection', function(socket) {
  var tm = setInterval(function() {
          socket.emit('datafromserver', {'datafromserver': msg});
  }, 500);
  socket.on('disconnect', function() {
      clearInterval(tm);
  });
});


app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

和html页面

<!doctype html>
<html>
  <head>
    <title>Scoreboard</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
    </style>
  </head>
  <body>
      <script src="/socket.io/socket.io.js"></script>
      <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
      <script>
        var socket = io.connect('http://192.168.1.162:3000/');  
            socket.on('#dataonscreen', function(data) {
            $('#dataonscreen').html(data.datafromserver);
            console.log(data.datafromserver);
            });
      </script>
    <ul id="dataonscreen"></ul>
  </body>
</html>

我不明白为什么这不起作用以及如何解决它。请帮忙！

【问题讨论】：

你导入jquery了吗？否则尝试使用普通的javascript

标签： javascript html node.js socket.io

【解决方案1】：

您的 socket.io 服务器发出 datafromserver 而您的代码侦听 #dataonscreen

更改其中一个，使它们具有相同的值，并且您的代码应该可以工作。我不确定您是如何获得控制台输出的，因为没有监听该事件

【讨论】：

好的，你改了哪个？什么是客户端控制台输出
UDP 服务器监听 0.0.0.0:8007 监听 :3000 colduzi 用 ak47 杀死了 Caddy o=bo= JoXyo=bo= 用 ak47 KING CRIMSON 杀死了 colduzi 用 m4a1_silencer（爆头） P4P5P;P1P8P: 用 hegrenade 杀死 NEXten b KSMm 杀死 P4P5P;P1P8P: with aug
我改变了这部分 `socket.on('#datafromserver', function(data) { $('#datafromserver').html(data.datafromserver); console.log(data.datafromserver) ; });
`
您应该删除socket.on中datafromserver之前的#。
现在可以了！谢谢，但是如何像列表一样逐一输出消息