如何在 nodejs readline 过程中更新 html 页面

Question

我想在 nodejs readline 进程中动态更改

页面中的 html 元素的内容。

这里有一个jsfiddle例子来展示我想要实现的显示效果： https://jsfiddle.net/09kuyn7v/

但我想动态显示本地文件中的行，而不是像 jsfiddle 示例中那样来自函数内定义的数组。

我在读取文件版本的 clickTest() 函数中使用了 readline 模块：

function clickTest(){
  var fs = require('fs');
  var lineReader = require('readline').createInterface({
    input: fs.createReadStream(filePath)
  });

  lineReader.on('line', function(line){
    document.getElementById("demo").innerHTML += line;
  });
}

但是当我点击按钮时，页面就像被冻结一样，然后一行一行地同时显示（不是像上面的jsfiddle例子那样一行一行显示）。

Answer 1

首先，每次调用该函数时都会执行 require('readline') 和 require('fs')，因此我会将其移到脚本中。

我建议两种方法：

暂停阅读

var readline = require('readline');
var fs = require('fs');

function clickTest(){
  var lineReader = readline.createInterface({
    input: fs.createReadStream(filePath)
  });

  lineReader.on('line', function(line){
    // pause emitting of lines...
    lineReader.pause();

    // write line to dom
    document.getElementById("demo").innerHTML += line;

    // Resume after some time
    setTimeout(function(){
      lineReader.resume();
    }, 1000);
  });

  lineReader.on('end', function(){
    lineReader.close();
  });
}

这种方法应该读一行，然后暂停并在您指定的一段时间后继续。

缓冲线

var readline = require('readline');
var fs = require('fs');
var lines = [];

function clickTest(){
  var lineReader = readline.createInterface({
    input: fs.createReadStream(filePath)
  });

  lineReader.on('line', function(line){
    lines.push(line)
  });

  lineReader.on('end', function(){
    lineReader.close();

    printLine(0);
  });
}

function printLine(index){
  // write line to dom
  document.getElementById("demo").innerHTML += lines[index];

  if (index < lines.length - 1){
      setTimeout(function(){
        printLine(index + 1); 
      }, 1000);
  }
}

这种方法会将所有的行保存到一个数组中，然后慢慢打印出来。

请注意，我没有 node-webkit 来实际测试它，因此您可能会发现代码中的错误，但它应该给您一个大概的想法

如何在 nodejs readline 过程中更新 html 页面

How to update in html page during nodejs readline process

html

javascript

node.js

node-webkit