2017-12-22 19 views
-1

Ich kämpfe um den Wert eines <div id>socket.io und document.getElementById nicht aktualisiert

hier zu aktualisieren ist die 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}); 
}); 

}); 

Und hier ist der 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> 

Der Webseiten-Ausgang ist: Live Viewers: [Objekt Objekt]

Warum erhalte ich das [Objekt Objekt] auf der Webseite?

Ich bekomme die richtigen Ergebnisse in der console.logs für Server und Client, aber nicht auf der Webseite. Was mache ich falsch?

Vielen Dank und schätze Ihre Antworten.

+2

Ihre Daten sind ein JSON-Objekt, können Sie die Daten von Ihrem Server stringify das [JSON.stringify (...)] unter Verwendung von (https://developer.mozilla.org/en-US/ docs/Web/JavaScript/Referenz/Global_Objects/JSON/stringify) Methode. Aber ich würde vorschlagen, den notwendigen Teil in deinem JS vorher zu filtern. –

Antwort

1

Sie senden dem Client ein Objekt und versuchen, dieses Objekt direkt in Ihre Seite einzufügen. Die Standardzeichenfolgenkonvertierung für ein Objekt ist [object Object], also sehen Sie das auf Ihrer Seite. Sie können entweder diese im Client ändern:

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

dazu:

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

den tatsächlichen Datenwert aus dem Objekt erhalten versandt und legen Sie, dass nur in der Seite.


Oder können Sie den Server ändern sind diese nur die Zählung senden auf dem Server durch Änderung:

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

dazu:

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

Was genau nennst du das Konstrukt "data.data"? Ich meine, wie heißt es und wie kann ich mehr darüber erfahren?

Wenn Sie dies tun:

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

Sie senden eine JSON formatiert Objekt an den Client. Es ist ein Objekt mit einer Eigenschaft data.

Wenn Sie erhalten diese Nachricht in dem Client mit Code wie folgt:

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

Sie zuweisen einen Namen data zu dem Objekt, das gesendet wurde, und Sie würden in der Konsole sehen genau das, was Sie geschickt:

{data: 2} 

Oder was Wert die data Eigenschaft in Ihrem Fall hat.Was die Dinge ein wenig verwirrt, ist, dass Sie Ihren Funktionsparameter in socket.on('Total_Connected', function(data) { genauso wie den Eigenschaftsnamen benannt haben. Das führt zu data.data, um die Eigenschaft zu verweisen. Wenn stattdessen gab man ihm einen Namen wie obj wie in:

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

Dann Sie obj.data nutzen, um die Eigenschaft connected Wert zu verweisen.

Wenn es nur ein Stück von Daten, die Sie senden, dann gibt es keine Notwendigkeit, sie in einem Objekt überhaupt zu wickeln und man kann dies auf dem Server verwenden:

io.emit('Total_Connected', connected); 

Und dies auf dem Client :

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

Ausgezeichnete jfriend00! Danke, dass Sie sich die Zeit genommen haben, zu antworten und eine Lösung zu finden! Ich ging mit Datum. Auflösung. – user5692954

+0

@ user5692954 - Da es scheint, dass Sie hier neu zu Stackoverflow sind, können Sie, wenn diese Ihre Frage beantwortet haben, dies der Community anzeigen, indem Sie auf das Häkchen links neben der Antwort klicken und dadurch auch einige Reputationspunkte erhalten Befolgen Sie das richtige Verfahren hier. – jfriend00

+0

Nur noch eine Frage. Wie heißt das Konstrukt "data.data"? Ich meine, wie heißt es und wie kann ich mehr darüber erfahren? – user5692954

Verwandte Themen