时间戳

首页 > 解决方案 > 如何将数据从socket io显示到html页面列表

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

问题描述

所以，我的程序从 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>

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

标签： javascripthtmlnode.jssocket.io

解决方案

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

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

推荐阅读