socket.io and document.getElementbyID Not Updating

I am struggling to update the value of a 

Here is the 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});
});

});

And here is the html:

Live Viewers:

id="Total_Connections">

The webpage output is: Live Viewers: [object Object]

Why am I getting the [object Object] on the webpage?

I am getting the correct results in the console.logs for server and client but not on the webpage. What am I doing wrong?

Thanks and appreciate your responses.

jquery socket.io

shareedit

edited Dec 22 '17 at 17:21

fechnert

5321522

asked Dec 22 '17 at 15:51

user5692954

62

add a comment

1 Answer

activeoldestvotes

up vote1down voteaccepted

You are sending the client an object and trying to insert that object directly into your page. The default string conversion for an object is [object Object] so that's what you see in your page. You can either change this in the client:

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

to this:

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

to get the actual data value out of the object you sent and insert only that in the page.

---

Or, you can change the server to send just the count by changing this on the server:

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

to this:

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

---

What exactly do you call the "data.data" construct? I mean what is it called and how can I learn more about it?

When you do this:

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

you are sending a JSON formatted object to the client. It's an object with one property data.

When you receive that message in the client with code like this:

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

You are assigning a name data to the object that was sent and you would see in the console exactly what you sent:

{data: 2}

Or whatever value the data property has in your circumstance. What confuses things a bit here is that you named your function parameter in socket.on('Total_Connected', function(data) {the same as the property name. That leads to data.data to reference the property. If instead, you gave it a name such as obj as in:

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

Then, you could use obj.data to reference the connected property value.

If there's only one piece of data you're sending, then there's no need to wrap it in an object at all and you could use this on the server:

io.emit('Total_Connected', connected);

And, this on the client:

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