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

解决此问题的最简单方法是在列表发生更改时重新呈现列表。但是，对于大型列表，这可能效率低下，只需向每个元素添加一个ID，然后使用它更新或删除它们，就可以节省大量时间。

这个过程可能会变得有点复杂，因为你将在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]
);

Ryan Florence有一个great talk将React整合到现有项目中，而不是全部重写。

在JavaScript / jQuery中管理用户列表的最佳方法是什么？

1 个答案: