Javascript 在数据库更改时为每个人更新DOM—MongoDB、Ajax、Express、React

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

我曾尝试使用Socket.IO来实现这一点，但问题是，只有当有人已经在该页面上时，它才起作用，我不需要该功能，我需要在用户提交表单时，不仅更新现有连接的视图，而且当有人第一次加载页面并且请求已经完成时，视图也会更新

因此，我决定创建一个数据库并检查是否有更改，它的工作原理与预期一致

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

用户提交表单=>fetch函数，该函数检查数据库中的更改是否被触发=>它查找新的数据库条目=>更新响应状态=>将更改发送到视图

但问题是，如果我用这种方式更新dom，恐怕会导致服务器过载。我检查了，每个新打开的 “”检查数据库是否已更改，因此，如果我的web应用上有1000个用户，则每秒将有1000个请求：o

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

Seek.js（服务器端）

seekDiv.jsx

类MyComponent扩展了React.Component{ 建造师（道具）{ 超级（道具）； this.state={games:[]}； } 组件willmount（）{ 这个是fetchGames（） } 电子游戏（）{ 取（'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； 让零； 如果（games.length==0）{ 零=“” }否则{ zero=games.map（x=>{x.userAlias}） } 返回( {zero} ); } } 我希望我把我的问题讲得足够清楚，但如果我不清楚的话，这就是我想要的功能

users submits form=>DOM将为每个用户更新，而不刷新包含该表单数据的内容，并且在手动删除该表单数据之前一直存在

非常感谢您对如何进行的任何帮助

但问题是，如果我用这种方式更新dom，恐怕会导致服务器过载。我检查了，每个新打开的“”实例都会检查数据库是否已更改，因此，如果我的web应用程序上有1000个用户，则每秒将有1000个请求：o

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

与让每个客户端不断询问服务器是否有更新不同，您只需在收到新表单/帖子后，在服务器上的每个页面（资源使用率非常低）上保留一个套接字连接，然后将更新推送到每个连接的客户端

在“广播”一节中，我们有一个很好的例子来说明如何做到这一点。它是用于聊天信息的，但对表单也是如此

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

您希望前端监视传入的更新，当它监视时，使用react相应地更新DOM

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();
    }
});

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>
    );
  }
}