如何使用进度更新呈现的翡翠页面？

Question

我有一个带有表单的小型 express.js 应用程序。提交时，它会运行一个 python 脚本，运行大约需要 5 分钟，并在运行时将消息转储到标准输出。现在我可以调用它并将输出记录到控制台就好了。我希望这些消息在我的翡翠模板中填充一个跨度区域（id=results），直到完成。

路线：

router.post('/create', function(req, res) {
  res.render('build', function(err, html) {
    res.send(html);
    var options = {
      mode: 'text',
      pythonPath: '/usr/bin/python',
      pythonOptions: ['-u'],
      scriptPath: '/test',
      args: ['test', '-t', req.body['type'], '-s', req.body['num'], req.body['name']]
    };
    var shell = new py('build', options);
    shell.on('message', function (message) {
      console.log(message);
    });
    shell.on('error', function(err) {
      console.log(err);
    });
  });
});

玉：

extends layout

block content
  .container
    .panel.panel-default
      .panel-heading: h3 Requesting a new Build
      .panel-body
        p
          | <span id='results'></span>

  script(src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js')
  script(src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js')

我尝试了 res.render 和 res.send 的不同变体，但我认为我用这些变体是错误的。

Answer 1

我最终用 socket.io 解决了这个问题。感谢@j4g 的快速提示。将此添加到我的 app.js 的末尾：

var server = app.listen(3000);
var io = require('socket.io').listen(server); // this tells socket.io to use our express server

io.sockets.on('connection', function (socket) {
    console.log('A new user connected!');
});

app.set('socketio', io);

然后在我的路线上：

  var socketio = req.app.get('socketio');
  shell.on('message', function (message) {
    socketio.emit('message', message);
  });
  shell.on('error', function(message) {
    console.log(message);
    socketio.emit('message', message);
  });
  shell.on('close', function() {
    socketio.emit('finish', 'Process completed.');

然后在我的客户端 JavaScript 中，我添加了 socket.io 和这个自定义代码：

var socket = io.connect(); 

socket.on('message', function (data) {
    $("#results").text(data);
});

socket.on('finish', function (data) {
    $("#results").text(data);
    $("#prog").text("Finished!");
    $(".progress-bar").removeClass('active').removeClass('progress-bar-striped');
});

我最终替换了我的跨度文本而不是附加它，但无论哪种方式它都按预期工作。希望这可以帮助其他尝试做同样事情的人！