Можно ли обновить одну часть страницы с помощью 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);
    });
});