javascript - 通过 NodeJS 获取 JSON 数据时，如何通过 ExpressJS 更新我的 EJS 模板？

Question

我正在使用 NodeJS 调用一些 API，并使用以下代码通过 ExpressJS 将它们传递到我的 EJS 模板:

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

在此实例中，plLoopTimes 和 pl54Times 是已由我从 API 获得的 JSON 填充的数组。在我的 EJS 模板中，我可以通过在两个数组上运行 forEach 来简单地获取数据。我面临的问题是当我第一次启动我的 Node 服务器时，我从 API 获取新数据，并且新数据被输入到 EJS 模板中，但我想每分钟轮询一次 API 并获得新鲜数据数据。现在，我确实在我的服务器端脚本上使用 setInterval() 每分钟调用一次 API，但我不知道如何在不刷新整个页面的情况下将这些新数据传递到 EJS 模板中，我不想这样做。我试图创建一个客户端脚本来更改我想要显示数据的元素的 innerHTML，但是如果我在脚本文件中输入 EJS 语法并将其传递到 innerHTML，EJS 模板不表达该语法，相反，我的脚本只是将 EJS 字符串输出到页面中。那么，对于如何将变量从服务器端代码更新到客户端的 EJS 模板中，有没有人有任何建议？

Answer 1

我认为你做错了。如果您需要实时行为，只需使用正确的工具即可。对于这种需要，我会使用 SocketIO .如果您需要旧版浏览器支持，您也可以通过简单的 ajax 来实现，但 web 套接字相对于 ajax 的优势很大。

套接字

这是一个简单的 SocketIO 服务器，每 1 分钟向所有客户端发送一次数据。

import socketio from 'socket.io';
import { DataRepository } from 'repositories';


const server = http.createServer();
const io = socketio(server);

io.on('connection', (client) => {
  ((interval = 60000, io) => {
    setInterval(() => {
      const data = DataRepository.fetch();
      client.emit('new', data);
    }, interval);
  })();
});

所有客户端只需要创建一个 SocketIO 实例并监听new:

const socket = io('http://yoursite.com:port');
socket.on('emit', data => {
  updateView(data);
});

function updateView ({ plLoopTimes, pl54Times}) {
  plLoopTimes.forEach(t => {
    // update things
  });
  pl54Times.forEach(t => {
    // update things
  });
}

---

回退

另一种更经典的方法是在客户端而不是服务器上定义间隔。因此，每次客户端请求新版本的 View 时，服务器都会将 View 呈现为字符串并发送回客户端。

这里我们只需要定义一个简单的路由指向一个 View 即可:

router
  .get('/looptimes', (req, res) => {
    const { plLoopTimes, pl54Times } = DataRepository.fetch();
    // render the file 'looptimes.ejs' to string
    const view = ejs.render('looptimes', {
      plLoopTimes, pl54Times
    });
    res.type('.html');
    res.send(view);
  });

在前端你只需要更新 HTML。