Question

我正在设置一个node.js服务器，该服务器不断检查mongo数据库中是否有新条目。如果有新条目出现，则html站点应在不重新加载的情况下进行更新，并使用数据库中的数据进行更新。

每次输入一个新条目我已经可以接收数据，但是我无法更新该站点。我查找了一些可能的工具，例如ajax或react.js，但我只是找不到如何工作的完美解决方案（甚至是解决方案）。

连接到Mongodb并接收数据

MongoClient.connect('mongodb://192.168.128.128:27017/familientag', function(err, client) {
  if (err) {
    console.error('An error occurred connecting to MongoDB: ', err);
  } else {
    const db = client.db("familientag")
    const collection = db.collection('data');
    console.log("Connected successfully to server");

    const changeStream = collection.watch();
    changeStream.on('change', next => {
      console.log(next.fullDocument['name']);
      // Here I receive the data "_id" and "name"
    });
  }
});

我的index.ejs

<!DOCTYPE html>
<html>
    <head>
        <title>Dies ist ein Test</title>
    </head>
    <body>
        <div id="target">
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            $.ajax({
                type: 'GET',
                url: '/test',
                success: function(data) {
                    var html = data;
                    $('#target').html(html);
                }
            });
        </script>
    </body>
</html>

通话索引

app.get('/index', function (req, res) {
  res.render('index');
});

我希望每次从数据库读取新数据集时都在索引站点上看到该名称，而无需重新加载窗口。

Answer 1

使用打开的插座应该可以帮助您。您既可以将新数据传递到套接字主体中，也可以直接触发UI来从api请求数据。

我建议您看看socket.io：https://socket.io/，以便快速入门。这是一个适用于具有出色文档的节点的灵活套接字框架。

如果您想自己管理更少的套接字状态，则Pusher是一个不错的选择。带有自己的UI。 https://pusher.com/

如何在每次获得新的数据库条目时更新html而不重新加载页面

1 个答案: