Question

我正在努力更新<div id>

的价值

这是js：

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

var connected = 0;

server.listen(8080);

app.get('/', function(req, res){

//send the index.html file for all requests
res.sendFile(__dirname + '/index.html');

});

io.on('connection', function (socket) {
    connected++;
    console.log('A user connected to the server: ' + socket.id);
    console.log('Connected Sockets = ',connected);

io.emit('Total_Connected', {data: connected});

socket.on('disconnect', function(){
    connected--;
    console.log('A user disconnected from the server: ' + socket.id);
    console.log('Connected Sockets = ',connected);

io.emit('Total_Connected', {data: connected});
});

});

这是html：

<html>
<head>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.4.2.min.js"></script>

</head>

<body>

<H1>Live Viewers: <div id="Total_Connections"></div></H1>

 <script src="/socket.io/socket.io.js"></script>
 <script>
    var socket = io.connect('http://192.168.0.17:8080');
    socket.on('Total_Connected', function (data) {
var connected = data;
console.log('Connected = ', data);
document.getElementById("Total_Connections").innerHTML = data;

});

</script>
</body>

网页输出是：现场观众： [object Object]

为什么我在网页上获得[对象]？

我在服务器和客户端的console.logs中获得了正确的结果，但在网页上却没有。我做错了什么？

感谢您的回复。

Answer 1

您正在向客户端发送一个对象，并尝试将该对象直接插入到您的页面中。对象的默认字符串转换为[object Object]，以便您在页面中看到的内容。您可以在客户端中更改此内容：

document.getElementById("Total_Connections").innerHTML = data;

到此：

// insert the just the count into the page
document.getElementById("Total_Connections").innerHTML = data.data;

从您发送的对象中获取实际数据值，并仅在页面中插入。

或者，您可以通过在服务器上更改此服务器来更改服务器以仅发送计数：

io.emit('Total_Connected', {data: connected});

到此：

// send just the count
io.emit('Total_Connected', connected);

你究竟是什么称呼＆＃34; data.data＆＃34;构造？我的意思是它叫什么，我怎么能更多地了解它呢？

执行此操作时：

io.emit('Total_Connected', {data: connected});

您正在向客户端发送JSON格式的对象。它是一个具有一个属性data的对象。

当您在客户端收到包含以下代码的消息时：

socket.on('Total_Connected', function(data) {
   console.log(data);
});

您正在为已发送的对象分配名称data，您将在控制台中看到您发送的内容：

{data: 2}

或data财产在您的情况下具有的任何价值。这里有些混淆的是你在socket.on('Total_Connected', function(data) {中命名的函数参数与属性名称相同。这导致data.data引用该属性。如果相反，您为其命名了obj，如：

socket.on('Total_Connected', function(obj) {
   console.log(obj);
   console.log(obj.data);
});

然后，您可以使用obj.data来引用连接的属性值。

如果您只发送了一条数据，那么根本不需要将它包装在一个对象中，您可以在服务器上使用它：

io.emit('Total_Connected', connected);

而且，这在客户端：

socket.on('Total_Connected', function(connected) {
   console.log(connected);
});

socket.io和document.getElementbyID未更新

1 个答案: