javascript - 当数据库更改时为每个人更新 DOM - MongoDB、Ajax、Express、React

Question

我正在制作一个应用程序，当用户提交表单时，我希望为该页面上的每个人实时更新 DOM，而无需刷新页面。

我尝试过使用 Socket.IO 来做到这一点，它有点有效，但问题是它只有在有人已经在该页面上时才有效，并且我不需要该功能，当用户提交表单时我需要该功能， View 不仅会针对现有连接进行更新，而且还会在某人首次加载页面并且请求已完成时进行更新。

因此，我决定创建一个数据库并检查更改，它按预期工作

基本上应用程序的工作流程是这样的

用户提交表单 => 触发检查数据库更改的获取函数 => 它找到新的数据库条目 => 更新 React 状态 => 更改被发送到 View

但问题是，如果我以这种方式更新 dom，恐怕我可能会不必要地使服务器重载。我检查了，每个新打开的实例 “http://localhost:3000/seek”检查数据库是否已更改，因此，如果我的网络应用程序上有 1000 个用户，那么每秒将有 1000 个请求:o

也许我应该结合socket.io和数据库并使用这种方法来实时更新dom？

Seek.js(服务器端)

router.post('/', (req,res) => {
    // Processes form
    // Saving to database
    // Sending response
});

router.get('/:fetch', (req,res,next) => {
    if(req.params.fetch === 'fetch'){
        Seek.find(function(err,games){
            if(err) console.log(err);
            console.log('FETCHED')
            res.status(200).send({games});
        })
    }else{
        next();
    }
});

seekDiv.jsx

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { games:[] };
  }

  componentWillMount(){
    this.fetchGames()
  }

  fetchGames(){
     fetch('http://www.localhost:3000/seek/fetch')
    .then(res => res.json())
    .then(data => {this.setState({games: data.games})})
    .catch(err => console.log(err))
  }

  componentDidMount(){
    setInterval( () => this.fetchGames(), 1000)
  }

  render() {
    var games = this.state.games;
    let zero;

    if(games.length === 0){
        zero = ''
    }else{
        zero = games.map(x => <div>{x.userAlias}</div>)
    }
    return(
    <div>
       {zero}
    </div>
    );
  }
}

我希望我能够足够清楚地表达我的问题，但如果我没有，这就是我想要的功能

用户提交表单 => DOM 会为每个用户进行更新，无需刷新包含该表单数据，并且在手动删除之前一直存在。

非常感谢有关如何继续的任何帮助。

Answer 1

But the problem is that if i do the updating of dom this way, i'm afraid i may be overloading the server unnecessary. I Checked, and every new open instance of "http://localhost:3000/seek" checks to see if database is changed and so, if i had 1000 users on my web app that would be 1000 requests every second :o

是的 - 这是一个问题。从概念上讲，您需要使其成为一个“推”系统，而不是“拉”系统。

您不需要让每个客户端不断询问服务器是否有更新，您只需在收到新的表单/帖子后，在您的服务器上为每个页面(非常低的资源使用)和您的服务器保留一个打开的套接字连接 - 然后您就可以将更新推送到每个连接的客户端。

socket.io docs在“广播”部分有一个很好的例子来说明如何做到这一点。它适用于聊天消息，但它的工作方式与您的表单相同。

您需要将发送给每个客户端的数据减少到所需的最低限度。因此，如果您记录任何其他数据(例如，添加新帖子的时间戳)，除非您在前端显示或使用该数据，否则您不会希望将其发送到所有监听客户端。

您需要前端监控传入的更新，当它发生时，使用 React 来相应地更新 DOM。