如何在浏览器上显示不断更新的文件？答案

【问题标题】：How to show a file updated constantly on the browser?如何在浏览器上显示不断更新的文件？
【发布时间】：2012-03-04 03:01:45
【问题描述】：

我的目标是用一些文件更新网页。当我编辑并保存文件时，它的内容会立即更新为一个页面。

我正在使用 socket.io 来处理这个问题。但。我需要对我的代码进行一些修改才能接近它。

:: 我的服务器端代码：

var PORT = 8001;
var io = require("socket.io").listen(PORT);
var fs = require("fs");

io.sockets.on('connection', function(socket) {
    console.log("Connected!");
    socket.emit('connected', { accept: true});

    console.log("Trying to send a content file to client...");
    fs.readFile("file.txt","UTF-8", function(err, data) {
        if (err) throw err;
        socket.emit("requestFile", data );
        console.log("Conteúdo:", data);
    })
});

console.log("Application has started! Port: " + PORT);

:: 我的页面

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="http://localhost:8001/socket.io/socket.io.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style>
            .arquivo {
                font-family: Arial, Helvetica, sans-serif;
                font-size: 14px;
                width: 900px;
                border: 2px solid black;
                -moz-border-radius: 3px;
            }
        </style>
        <script type="text/javascript">
            console.log("Try to logon...");
            var socket = io.connect("localhost", {"port" : "8001"});

            socket.on("connected", function(data) {
                console.log("Connected User?", data.accept);
            });

            //recebe o arquivo indefinidamente
            var requestFile = socket.on("requestFile", function(data) {
                $("#arquivoSaida").html(data + "<br/>");
                console.log(data);
            });

            setInterval(requestFile, 200);
        </script>
    </head>
    <body>
        <h3 style="font: Arial, Verdana; font-size: 14px; font-weight: bold;">
            File updated:
        </h3>
        <div id="arquivoSaida">

        </div>      
    </body>
</html>

我已使用 setInterval 在 200 毫秒触发以向服务器请求文件。任何提示都将受到欢迎。

提前致谢！

-- 已更新解决方案：

:: 我对原始代码做了一些改动。该解决方案由 PuerkitoBio 提供。谢谢，伙计！

代码更新：

var PORT = 8001;
var io = require("socket.io").listen(PORT);
var fs = require("fs");

io.sockets.on('connection', function(socket) {
    console.log("Connected!");
    socket.emit('connected', { accept: true});

    console.log("Trying to send the content to a client...");
    console.log("dir", __dirname);

    fs.watch(__dirname + "/arquivo.txt", function(event, filename) {
        console.log("Event:", event);

        if (event == "change") {
            fs.readFile("arquivo.txt","UTF-8", function(err, data) {
                if (err) throw err;
                socket.emit("receiveFile", data );
                console.log("Content:", data);
            })
        }

    });

});

console.log("Application has started! Port: " + PORT);

【问题讨论】：

标签： node.js socket.io

【解决方案1】：

您可以使用fs.watchFile() 并将 curr.mtime 与 prev.mtime 进行比较，以检测文件是否已被修改。然后使用 readFile 将内容发送到您连接的客户端。 From the docs。

使用套接字，您无需从客户端轮询数据，而是在需要时从服务器推送数据（在您的情况下，当您的文件更改时）。因此，您不需要客户端的 setInterval（您将使用 fs.watchFile 在服务器端监视更改，并将内容推送到客户端，因此客户端上的“requestFile”处理程序将被自动调用（应该是重命名了 receiveFile 或更准确的名称！）。

【讨论】：

谢谢，PuerkitoBio。我看看你告诉我的，我修复了代码。我一直在使用 fs.watch 而不是 fs.watchFile，这是完成它的推荐方式。看看上面，看看我的修改。
对我来说看起来不错，我想您相应地调整了客户端。如果文件内容很大，您可能需要考虑对其进行流式传输（查看节点的 Stream 类）。除此之外，这应该可以正常工作。