Question

My goal is to update the web page whenever I edit and save the file on the localhost, and instantly its content appears updated to a page.

I'm using socket.io to handle this task. But I'm facing a problem on the client side. The server is detecting changes to the file and posting console log messages as I would expect.

Server code:

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

console.log("dir", __dirname);

const logfile = 'jsondata.json';

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(logfile, function(event, filename) {
        console.log("Event:", event);

        if (event == "change") {
            fs.readFile(__dirname + "/jsondata.json", "UTF-8", function(err, data) {
                if (err) throw err;
                socket.emit("fileChanged", data );
                console.log("Content:", data);
            })
        }

    });

});

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

A cycle of activity on the NodeJS console looks like this:

Application has started! Port: 8082    
Connected!
Trying to send the content to a client...
dir C:\Users\JavaScript\Project
Event: change
Content: {"newitem": 57, "address": 141414}

Which correctly corresponds to the JSON written into the file.

Client code:

<!DOCTYPE html>
    <head>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style>
            .dataFile {
                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('http://localhost:8082');

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

            var requestFile = socket.on("fileChanged", function(data) {
                $("#dataFile").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="dataFile">

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

The browser's console log is a little more cryptic:

Try to logon... index.html:17:13
SyntaxError: missing ] after element list
note: [ opened at line 29, column 0

Connected User? true index.html:21:17
SyntaxError: missing ] after element list
note: [ opened at line 29, column 0

The issue shown above is puzzling me. I'm not sure where the square bracket issue is coming from since I don't have any in my code.

**** Updated code to correct socket handler name issue ****

Answer 1

在服务器代码中，您正在使用socket.emit("receiveFile", data)，但在客户端上，您正在使用socket.on("requestFile", (function(data) ... )

您的套接字正在发出并监听2个不同的事件...要修复，请重命名receiveFile和requestFile为相同的名称-类似于fileChanged。

这样，您的服务器将发出fileChanged事件，而客户端将在监听。

有关更多信息，请查看Sending and Receiving Events上的socket.io文档

Show file updates in a browser

1 个答案: