user5692954 user5692954 - 3 years ago 270
jQuery Question and document.getElementbyID Not Updating

I am struggling to update the value of a

<div id>

Here is the js:

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

var connected = 0;


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

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


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

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

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

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


And here is the html:


<script type="text/javascript" src=""></script>



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

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



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.

Answer Source

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 =;

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 "" 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) {

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 to reference the property. If instead, you gave it a name such as obj as in:

socket.on('Total_Connected', function(obj) {

Then, you could use 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) {
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download