我使用nodejs调用一些API,并通过此代码将其传递给我的EJS模板:
app.get('/', function (req, res) {
res.render('routes/index', {
plLoopTimes: plLoopTimes,
pl54Times: pl54Times
})
});
在这种情况下,plLoopTimes
和pl54Times
是我从API中获得的JSON填充的数组。在我的EJS模板中,我可以通过在两个数组上运行forEach
来获取数据。我面临的问题是当我第一次启动节点服务器时,我会从API中获取新的数据,并将新的数据馈送到EJS模板中,但是我想每分钟对API进行轮询,并获得新鲜数据。现在,我确实在服务器端脚本上使用setInterval()
每分钟调用API,但是我不知道如何将新的数据传递到EJS模板中,而无需刷新整个页面,我不想这样做。。我试图创建一个客户端脚本来更改要显示数据的元素的innerHTML
,但是如果我在脚本文件中输入EJS语法并将其传递到innerHTML
中,则EJS模板不会表达该语法和该语法,我的脚本只是将EJS字符串输出到页面中。因此,是否有人对如何将变量从服务器端代码更新为客户端的EJS模板有任何建议?
我认为您做错了。如果您需要实时行为,只需使用正确的工具。为此,我将使用socketio。如果您需要旧的浏览器支持,您也可以通过Ajax进行操作,但是Web插座比Ajax的好处很大。
socket.io
这是一个简单的套接字服务器,每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
});
}
后备
另一种方法 - 更经典 - 是在客户端而不是服务器上定义的间隔。因此,每次客户端请求 vivie的新版本服务器渲染视图并将其发送回客户端。
在这里,我们只需要定义一个简单的路线即可指向视图:
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。
您的大部分时间都正确,假设您没有遇到比赛条件,那么当您收到页面请求时,JSON实际上还没有准备好。如果要将它们传递给res.render(),请在模板中访问pllooptimes和pl54times。
<%= pl54Times.some.property %>
,或者如果您想循环遍历该json中的一系列项目:
<% for(var i=0; i < arrayName.length; i++) { %>
<div><%= arrayName[i].some.property.to.display %></div>
<% } %>
希望这会有所帮助!