使用 NodeJs 自动更新网站中的元素答案

【问题标题】：Update an element automatically in a website using NodeJs使用 NodeJs 自动更新网站中的元素
【发布时间】：2018-03-02 20:43:49
【问题描述】：

我仍处于编程的早期阶段，我正在考虑创建一个每隔 x 秒执行一次 API 调用并使用新内容更新我的网站的东西。

我的最初目标是使用 FOR 循环（.ejs 页面）从 API 获得的内容填充表格。

现在，我想在 x 秒后只更新网页的那些行和列（从 FOR 循环创建），而不是刷新整个页面。我怎样才能做到这一点（更新那些行和列）？

考虑股票市场网站，它只是更新股票价格，而不是整个页面。

提前感谢您的帮助

【问题讨论】：

您没有寻求任何帮助。你有什么问题？
@RandyCasburn 刚刚更新了我的问题。
调查 Socket.io 和 websockets 的使用。使用 web socks，您无需设置计时器，您可以创建与服务器的连接，并且服务器（您的 Nodejs）可以推送更新。更新内容是简单的 DOM 东西。
@RandyCasburn 如果您使用套接字，您仍然需要设置一个计时器。它只是从您在客户端设置的计时器转变为您在服务器上设置的计时器。
@Dan Prince - 哦不。整个概念以一种非常好的方式发生了变化。现在可以专注于数据流而不是任意计时器。在需要发送数据时发送，而不是在数据可能完全相同的任意时间

标签： javascript html node.js

【解决方案1】：

解决此问题的最流行方法是将您从其他 API 获得的数据存储在数据库中，然后创建一个端点，以 JSON 形式提供该数据的最新版本。

然后在客户端，您定期向服务器发出请求以获取内容并更新页面的一部分以显示可用的最新数据。

这可能很简单：

// server side (if you use express)

app.get("/data", (req, res) => {
  database.getMostRecentEntry()
    .then(data => res.json(data))
    .catch(err => res.status(500).end());
});


// client side

function fetchMostRecentData() {
  fetch("/data")
    .then(response => response.json())
    .then(data => updateView(data))
    .catch(err => showError(err));
}

function updateView(data) {
  let container = document.getElementById("app");

  container.innerHTML = `
    <tr>
      <td>${data.name}</td>
      <td>${data.value}</td>
    </tr>
  `;
}

function showError(err) {
  console.error(err);
  alert("Something went wrong");
}

// call fetchMostRecentData once every 10s
setInterval(fetchMostRecentData, 10000);

现在，这不是一个非常强大的解决方案，并且存在一些相当严重的安全问题，但这是一个起点。

从这里开始，您应该考虑使用前端框架（而不是自己更新innerHTML）。您还可以考虑使用 websockets，而不是通过 HTTP 端点提供数据。

【讨论】：

这里不需要 AJAX。 WebSockets 并允许服务器推送。
@RandyCasburn 对于仍在学习编程的人来说，套接字是多余的。它们更难调试、更难扩展和更难设置。
鸡！ JK - 我不喜欢根据别人的无能来淡化一个人的能力。
@RandyCasburn 没有人被低估了。学习是一个渐进的过程——这就是为什么我在回答的最后提到了套接字。我只是不想恐吓新程序员。

【解决方案2】：

我会考虑将expressjs 与 node.js 结合使用来构建您的网站。然后在你的html中使用ajax来完成其余的api调用更新。

【讨论】：

这里不需要 AJAX。 WebSockets 并允许服务器推送。
AJAX 对于 imo 初学者来说要简单得多
鸡！ JK - 我不喜欢根据别人的无能来淡化一个人的能力。