如何在EJS文件中使用setInterval？

Question

I have a problem with using setInterval in my EJS file, which is part of my nodejs app (with Express). I have created function getRandomSubarray , which chooses randomly subset of images from array. I want to change this subset every three seconds. This is problematic piece of my code:

<%setInterval(function(){%> <%RandomSubrecipesImg=tools.getRandomSubarray(recipesImg,4)%>
<div class="navbar-image-box col-sm-3 d-none d-sm-block"><img class="navbar-image" src="<%=RandomSubrecipesImg[0].replace('public',"")%>"></div> <div class="navbar-image-box col-sm-3 d-none d-sm-block"><img class="navbar-image" src="<%=RandomSubrecipesImg[1].replace('public',"")%>"></div> <div class="navbar-image-box col-sm-3"><img class="navbar-image" src="<%=RandomSubrecipesImg[2].replace('public',"")%>"></div> <div class="navbar-image-box col-sm-3 d-none d-sm-block"><img class="navbar-image" src="<%=RandomSubrecipesImg[3].replace('public',"")%>"></div> <% },3000);%>

In browser I haven't received any divs. In case of removing setInterval I have div elements in browser, so I think there is something wrong with setInterval . Do you have any idea what is wrong ?

Answer 1

EJS is used for render things server-side. But setInterval is a client-side function which doenst need to be rendered.

Prepare your data serverside and send everything in init request, then start setInterval client-side and fetch the "new" data from your API - Endpoint. Could be done via AJAX or WebSockets.

Or you could setup an WebSocket and push "new" data to all clients.