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