是否可以使用Nodejs和Socket.io更新页面的单个部分？

Question

我正在尝试创建一个基本的Node应用程序，每次客户端连接时我想更新页面上显示的计数器。 （我的目标是以最简单，最易学的形式创建此应用程序，以向我的讲师演示节点。）

服务器端应用程序片段：

建立连接

var clients = 0;

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

渲染页面

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

聊天页面jade模板片段：

  span#client_count #{connected}
  |  connected clients   

客户端jQuery，Socket.io和JavaScript

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

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

问题： 连接的客户端数量仅在页面刷新时更新。我希望数字异步更新。我对node，socket.io和express表示新手，所以我不确定如何解决这个问题！

Answer 1

而不是在客户端增加，更好地保持服务器端的计数器值，增加连接并减少断开连接 io事件。然后，您可以发送更新的计数器（在更改值的相同事件处理程序中）。在客户端，使用计数器监听事件，并在收到时，替换html中的值。

服务器：

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);
    });
});

客户：

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);
    });
});