是否可以使用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
  });
});

聊天页面玉模板片段:

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