如何使用进度更新渲染的玉页?

时间:2015-09-12 18:41:32

标签: javascript jquery node.js express pug

我有一个带表格的小型express.js应用程序。在提交时,它运行一个python脚本,运行大约需要5分钟,并在运行时将消息转储到stdout。现在我可以调用它并将输出记录到控制台就好了。我希望这些消息能够填充我的玉石模板中的跨区域(id =结果),直到完成。

路线:

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的不同变体,但我想我会用那些咆哮错误的树。

1 个答案:

答案 0 :(得分: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');
});

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