Question

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

我正在使用 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);

Answer 1

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

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

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

1 个答案: