Est-il possible de mettre à jour une seule partie d'une page à l'aide NodeJS et Socket.io?

Question

Je suis en train de créer une application de nœud de base, chaque fois qu'un client se connecte, je veux mettre à jour le compteur qui est affiché sur la page. (Mon but est de créer cette application dans sa forme la plus simple, et la forme apprenables pour montrer noeud à mon professeur).

extraits d'applications côté serveur:

Faire la connexion

var clients = 0;

io.sockets.on('connection', function (socket) {
  socket.on('connect', function () { clients += 1 });  
  socket.on('disconnect', function(){ clients -= 1 });  
});

Rendu la page

app.get(navigation.chat.page, function(req, res){ 
  res.render('chat', {
    title: navigation.chat.title,
    connected: clients
  });
});

Bavardage la page jade extrait modèle:

  span#client_count #{connected}
  |  connected clients   

jQuery côté client, Socket.io et JavaScript

var socket = io.connect('http://localhost');

$(document).ready(function(){
  socket.on('connect', socket.emit('connect'));
});

Problème: Le nombre de clients connectés uniquement les mises à jour à rafraîchir la page. Je voudrais que le nombre soit mis à jour de manière asynchrone. Je suis tout à fait nouveau au noeud, Socket.IO et exprimer donc je ne suis pas sûr comment aborder le problème!

Answer 1

plutôt que incrémenter côté client, une meilleure valeur du compteur de garder le côté serveur, incrément sur Connexion et Se déconnecter événements io. Ensuite, vous pouvez envoyer des contre-jour (dans les mêmes gestionnaires d'événements où la valeur a été modifiée). Côté client, écouter événement avec compteur et lors de la réception, remplacez la valeur en html.

serveur:

var users_count = 0;

io.sockets.on('connection', function (socket) {
    //on connection, update users count
    ++users_count;
    //send it to every opened socket
    io.sockets.emit('users_count', users_count);

    //when this socket is closed
    socket.on('disconnect', function () {
        //user disconnected
        --users_count;
        //emit to every opened socket, so everyone has up to date data
        io.sockets.emit('users_count', users_count);
    });
});

client:

jQuery(function($){
    //connect to localhost
    var socket = io.connect('http://localhost');
    //handle users_count event, by updating our html
    socket.on('users_count', function(data){
        $('#client_count').text(data);
    });
});