2017-09-22 1 views
1

J'écris une application assez simple (pour l'instant) et j'ai besoin de connecter chaque connexion et déconnexion à l'intérieur d'un div. Actuellement, je peux connecter toutes les connexions et déconnexions sur ma console avec le code que j'ai mais à ma connaissance limitée de socket.io, je ne peux pas comprendre comment les enregistrer dans un div sur mon fichier index.html ie que j'ai besoin le serveur.js pour émettre (?) les connexions et les déconnexions et les ajouter à la div au lieu de simplement les enregistrer sur ma console. J'ai inclus mon fichier server.js et mon fichier html (qui contient le script côté client).Connexion se connecte et se déconnecte avec socket.io

Mes server.js

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




app.get('/', function (req, res) { 
    res.sendFile(__dirname + '/index.html'); 
}); 

io.on('connection', function (socket) { 
    ID = socket.id; 
    console.log('client id - ' + socket.id + ' connected.'); 
    socket.on('disconnect', function() { 
     console.log('client id - ' + socket.id + ' disconnected.')}) 

}) 



server.listen(80, '95.211.186.223', function() { 
    console.log("Listening on 80") 
}); 

Mon index.html

<!doctype html> 
<html lang="en"> 
<head></head> 
<body> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>  
    <script> 
     var socket = io.connect('http://95.211.186.223:80'); 
     socket.on('connect', function(data) { 
      console.log('ID: ' + socket.id) 
     }); 
    </script> 

    <div id="log"></div> 
</body> 
</html> 

Répondre

0

Il y a plusieurs façons de mettre en oeuvre. Juste un d'entre eux:

Sur le serveur:

io.on('connection', function (socket) { 
    ID = socket.id; 
    console.log('client id - ' + socket.id + ' connected.'); 
    io.sockets.emit('connect_event', data);  
}) 

io.on('disconnect', function() { 
    ID = socket.id; 
    console.log('client id - ' + socket.id + ' disconnected.'); 
    io.sockets.emit('disconnect_event', data); 
} 

Si vous voulez savoir comment émettre un message à tout le monde see the relevant question.

Le client:

function addText(eventType) { 
    var p = document.createElement('p'); 
    p.innerHTML = 'ID: ' + socket.id + ' ' + eventType; 
    document.body.appendChild(p); 
} 
socket.on('connect_event', function(data) { 
    addText('connected') 
}); 
socket.on('disconnect_event', function(data) { 
    addText('disconnected') 
}); 
+0

Peut-être que je n'étais pas assez descriptif. Ceci donnera le socket.id de chaque connexion et l'imprimera dehors. J'ai besoin que toutes les nouvelles connexions et déconnexions soient enregistrées. Pas seulement celui sur la page. Je suppose que le serveur.js devra émettre ces données dans le fichier d'index de sorte que chaque nouvelle connexion s'ajoute à la div au lieu d'une seule. –

+0

a mis à jour sa réponse. J'espère avoir bien compris votre question. – kurumkan

+0

Oui. Merci beaucoup. –