在express中，如何使用Nodejs做到每秒re-render一次jade模板？

在express中，如何使用Nodejs做到每秒re-render一次jade模板？

app.js代码片段如下：

>  app.get('/', function(req, res) {
>		var mytime = 0 + 1;
> 		res.render('home', {time ： mytime});
> }

需要做到每秒更新一次time在页面上，我的想法是用setInterval:

>  app.get('/', function(req, res) {
>		function add() {
>			var mytime = 0 + 1;
> 			res.render('home', {time ： mytime});
>		}
>		setInterval(add,1000);
> }

但是发现不会重新render view，有谁知道如何动态的render view吗？


10 回复

要在Express中使用Node.js实现每秒重新渲染Jade（Pug）模板，你需要理解HTTP请求的本质。每次HTTP请求都是独立的，因此你不能直接在服务器端通过setInterval来持续地重新渲染模板并发送给客户端。你需要利用客户端JavaScript来实现这种动态更新的效果。

下面是一个结合了服务器端和客户端的解决方案：

服务器端 (app.js)

首先，确保你的Express应用能够渲染一个初始的Jade模板，并且该模板包含一个用于显示时间的元素。

const express = require('express');
const app = express();
const path = require('path');

// 设置视图引擎为Jade (现在称为Pug)
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

app.get('/', function(req, res) {
    // 渲染初始页面时设置当前时间
    const currentTime = new Date().toLocaleTimeString();
    res.render('home', { time: currentTime });
});

app.listen(3000, () => console.log('App listening on port 3000!'));

客户端 (home.pug)

接下来，在Jade模板中添加一些客户端JavaScript来每秒更新页面上的时间。

doctype html
html
  head
    title Dynamic Time Update
  body
    h1 Current Time:
    p#current-time #{time}
    script.
      setInterval(() => {
        fetch('/')
          .then(response => response.text())
          .then(data => {
            const parser = new DOMParser();
            const doc = parser.parseFromString(data, "text/html");
            document.getElementById('current-time').innerText = doc.querySelector('#current-time').innerText;
          });
      }, 1000);

这段代码做了以下几件事：

  1. 使用fetch从服务器获取最新的HTML。
  2. 解析返回的HTML字符串。
  3. 更新页面上的时间显示。

这种方法虽然有效，但效率较低，因为它需要频繁地向服务器发送请求。更好的方法可能是使用WebSockets或者Server-Sent Events (SSE)来实现实时数据更新。但对于简单的场景，上述方法应该足够了。


这个更适合在客户端JavaScript代码中实现。

直接在浏览器上面更新时间啊。。。。。。

前端 data binding，自动更新

楼主的瓜太辣~

代码写的竟然让我 无 言 以 对。。

可以做到，可以让用户摁 Alt + R，当频率达到 1000ms 的时候就实现了楼主的需求了。

或者还有一个办法，在前端写 setInterval(add,1000);, 但是这个 add 得写成 ajax 请求，请求完了之后通过前端的方式渲染出来。

又或者你把更新time这里做成一个iframe，其实就是页面不刷新，更新局部html的问题么，对吧。。

如果你要在controller里不断的让view主动更新数据，又不想轮询，可以考虑长连接comet技术或者socket.io来实现。

要在Express应用中实现每秒重新渲染Jade模板，并将时间显示在页面上，你需要考虑浏览器端的逻辑来定时更新页面内容。服务器端的res.render只会生成一次响应内容，而不会自动定时重新渲染。以下是一种可行的方法：

服务器端（Node.js/Express）

首先，我们需要确保每次请求时返回的都是最新的时间。这可以通过在客户端使用AJAX请求来实现，而不是直接在服务器端使用setInterval。

// app.js
const express = require('express');
const app = express();
const jade = require('jade');

app.set('view engine', 'jade');

app.get('/', function(req, res) {
    res.render('home', { time: new Date().toLocaleTimeString() });
});

app.listen(3000, () => console.log('Server running on port 3000'));

客户端（HTML + JavaScript）

接下来，我们在客户端使用JavaScript定时发送请求以获取最新时间，并更新页面内容。

<!-- views/home.jade -->
doctype html
html
    head
        title Dynamic Time Update
        script(src='/socket.io/socket.io.js')
        script(src='https://code.jquery.com/jquery-3.6.0.min.js')
    body
        h1 Current Time: 
            span#currentTime #{time}
        script.
            $(document).ready(function() {
                function updateTime() {
                    $.get('/', function(data) {
                        $('#currentTime').text(data);
                    });
                }

                // 初始加载
                updateTime();
                // 每秒更新
                setInterval(updateTime, 1000);
            });

解释

  1. 服务器端：我们定义了一个路由/，它每次都会渲染一个包含当前时间的Jade模板。
  2. 客户端：我们使用jQuery的$.get方法来周期性地从服务器获取最新时间，并更新页面中的<span id="currentTime">元素。

这种方法利用了HTTP的轮询机制来实现动态更新，尽管可能不是最高效的方式，但对于简单的应用场景是可行的。对于更复杂的应用，可以考虑使用WebSockets来实现实时通信。

回到顶部