Каков наилучший способ управления списком пользователей в JavaScript/jQuery?

Question

Я создаю приложение для чата с помощью socket.io, но у меня возникла проблема с пониманием правильного и простейшего метода для обновления списка пользователей чата.

В тот момент, когда клиент присоединяется к чат он отправляется список пользователей и обновляет панель списка пользователей, используя следующий код:

socket.on('names', function(channel,nicks){ 
    for (var nick in nicks) { 
     $('#users').append('<li class="list-group-item" id="' + nick + '">' + nick + '</li>'); 
    } 
    }); 

, но на данный момент он не учитывает, когда другой пользователь присоединяется или уходит после этой точки, поэтому список пользователей одинаковый в течение всей продолжительности с момента присоединения клиента.

Эти события вызываются, когда другой пользователь присоединяется или покидает:

socket.on('join', function(channel,nick){ 
    // need to add the user to the user list, sort the user list 
    // alphabetically and then update the list group html 
    }); 

    socket.on('part', function(channel,nick){ 
    // need to delete the user from the user list, sort the user list 
    // alphabetically and then update the list group html 
    }); 

    socket.on('quit', function(nick){ 
    // need to delete the user from the user list, sort the user list 
    // alphabetically and then update the list group html 
    }); 

Что я должен искать на то, чтобы сделать то, что мне нужно здесь?

Я предполагаю, что вместо того, чтобы ретранслировать ответ сервера и строить из него HTML, я должен сохранить массив пользовательских списков на стороне клиента, обновленный на основе ответов сервера, а затем перестроить HTML из этого , Просто нужна точка в правильном направлении ...

Answer 1

Самый простой способ решить эту проблему - перерисовать список всякий раз, когда он изменяется. Однако для больших списков это может быть неэффективным, и вы могли бы сэкономить много времени, просто добавив идентификатор к каждому элементу, а затем обновив или удалив его с помощью него.

Этот процесс может стать немного сложным с jQuery, поскольку вы будете управлять своей моделью внутри DOM, а не внутри своего кода. Это определенно возможно.

Альтернативный подход - посмотреть на библиотеку, такую ​​как React.

React просит вас описать, как выглядит ваш интерфейс. Затем он будет отвечать за повторное рендеринг, всякий раз, когда вы меняете модель. В качестве бонуса он проверяет последнее состояние DOM и применяет обновления только к битам, которые были изменены.

var UserList = React.createClass({ 
    getInitialState: function() { 
    users: [] 
    }, 
    componentDidMount: function() { 
    // set up socket listeners 

    // every time you want to update the user list 
    this.setState({ users: updatedVersionOfUsers }); 
    }, 
    render: function() { 
    var users = this.state.users; 

    // describe what this component should look like 
    return (
     <ul> 
     {users.map(function(user) { 
      return (
      <li className='list-group-item'>{user}</li> 
     ); 
     }} 
     </ul> 
    ); 
    } 
}) 

Теперь, все, что вы должны думать о том, убедившись, что модель (this.state.users) до настоящего времени. Пока вы обновляете его с помощью this.setState, тогда React сделает все остальное.

Вы можете использовать React рядом с jQuery. Просто найдите элемент, в котором вы хотите, чтобы этот компонент React находился внутри и отображал его.

React.render(
    <UserList />, 
    $('#someElement')[0] 
); 

Там в great talk Райан Флоренции по интеграции Реагировать в существующий проект, а не переписывание все это.