Home/ Questions/Q 7583303
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T18:38:41+00:00

My goal is to update the web page with some file. When I edit

  • 0

My goal is to update the web page with some file. When I edit and save the file, and instantly its content appears updated to a page.

I´m using socket.io to handle this issue. But. I need some modifications on my code to approaches it.

:: My server side code:

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);

:: My page

<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>

I have used a setInterval to fires at 200 ms to request a file to a server. Any cue will be very welcome.

Thanks in advance!

— UPDATED with Solution:

:: I did some alterations from my original code. This solution was provided by PuerkitoBio. Thanks, man!

The code updated:

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);
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can use fs.watchFile() and compare curr.mtime with prev.mtime to detect if the file has been modified. Then use readFile to send the content to your connected client. From the docs.

    With sockets, you don’t poll the data from the client, it gets pushed from the server when required (when your file changes, in your case). So you don’t need the setInterval from the client side (you will watch for changes server-side using fs.watchFile, and push the content to your client, so your “requestFile” handler on the client will get called automatically (should be renamed receiveFile or something to be more accurate!).

    • 0