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

Question

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

服务器端应用程序片段：

建立连接

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