2017-04-05 69 views
0

我想在nodejs readline過程中動態更改html頁面中如何在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例子中所示的那樣)。

+0

您在這裏混合服務器和客戶端操作。您不能在客戶端上使用fs模塊從文件中讀取數據,並且在節點上您可以讀取整個文件,然後將其發送到客戶端。所以你可能需要的是讀取整個文件並將其發送到客戶端,然後設置間隔,或者將套接字向下打開到客戶端並在讀取時保持發送從節點到服務器的線路 – Tom

+0

@Tom其實我已經使用fs模塊從文件中讀取(爲什麼不能?)。我的問題是如何顯示HTML頁面中的內容。 – Patrick

+0

你清楚地瞭解客戶端和服務器之間的區別嗎?只要我知道你不能在客戶端讀取本地文件(除非你明確地在文件輸入中選擇它們) – Tom

回答

0

首先,每次你調用這個函數,你都會做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); 
    } 
} 

這種方法將節省所有行到一個數組,然後慢慢地打印出來。

請注意,我還沒有得到節點WebKit的實際測試,所以你可能會發現代碼中的錯誤,但它應該給你的總體思路

+0

非常感謝。我的文件包含多達1000萬行。所以我只能遵循第一種方法。 – Patrick

+0

1000萬行寫一秒?聽起來像是可怕的用戶體驗對我來說......每秒打印10m行需要116天的時間打印出順便說一句。 – Tom