Javascript 在浏览器中显示文件更新_Javascript_Websocket_Socket.io

Javascript 在浏览器中显示文件更新

javascript websocket socket.io

Javascript 在浏览器中显示文件更新,javascript,websocket,socket.io,Javascript,Websocket,Socket.io,我的目标是在本地主机上编辑和保存文件时更新网页，并立即将其内容更新为页面我正在使用socket.io来处理此任务。但我在客户方面面临一个问题。服务器正在检测对文件的更改，并像我预期的那样发布控制台日志消息服务器代码： var PORT = 8082; var io = require("socket.io").listen(PORT); var fs = require("fs"); console.log("dir", __dirname); const logfile = 'json

我的目标是在本地主机上编辑和保存文件时更新网页，并立即将其内容更新为页面

我正在使用socket.io来处理此任务。但我在客户方面面临一个问题。服务器正在检测对文件的更改，并像我预期的那样发布控制台日志消息

服务器代码：

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

NodeJS控制台上的活动周期如下所示：

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}

它正确地对应于写入文件的JSON

客户端代码：

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

上面显示的问题令我困惑。我不确定方括号问题是从哪里来的，因为我的代码中没有任何方括号

****更新代码以更正套接字处理程序名称问题****

在您的服务器代码中，您使用的是

socket.emit（“receiveFile”，data）

，但在您的客户端上，您使用的是

socket.on（“requestFile”，function（data）…

您的套接字正在发出并侦听两个不同的事件…要修复，请将

receiveFile

和

requestFile

重命名为相同的名称-类似于

fileChanged

这样，您的服务器将发出一个

fileChanged

事件，您的客户机将进行监听

有关更多信息，请查看您正在使用的服务器代码中的socket.io文档。socket.emit（“receiveFile”，data），但在您的客户端上，您正在使用的是socket.on（“requestFile”，function（data）…。

您的套接字正在发出并侦听两个不同的事件…要修复，请将

receiveFile

和

requestFile

重命名为相同的名称-类似于

fileChanged

这样，您的服务器将发出一个

fileChanged

事件，您的客户机将进行监听

有关更多信息，请查看

Good catch上的socket.io文档。我想我已经解决了这个问题。但是，我仍然会遇到相同的错误。我将更新上面的代码。这确实解决了我的数据传输问题。我仍然会遇到方括号问题。在返回的数据中是否有括号？只有小括号（这是一个JSON，我将其视为字符串）很好。我想我已经解决了这个问题。但是，我仍然会遇到同样的错误。我会更新上面的代码。这确实解决了我的数据传输问题。我仍然会遇到方括号问题。在返回的数据中是否有括号？只有小括号（我将其视为字符串的JSON）

setInterval

语句应该做什么？每200毫秒监视一次fileChanged事件，并在发现时发布更新。使用

socket时，它不会这样做。在上设置一个侦听器，只需执行一次。另外，requestFile
将是一个套接字，而不是一个函数。好吧，这解决了它ith@Tappyy的响应。注释掉setInterval就达到了目的。奇怪的是，我在别处发现了该代码…谢谢！setInterval
语句应该做什么？每隔200毫秒监视一次fileChanged事件，发现时发布一次更新。它不是这样做的，而是使用套接字。在上设置一个侦听器，这需要o只能执行一次。而且，requestFile
将是一个socket而不是一个函数。好吧，这解决了它，再加上@Tappyy的响应。注释掉setInterval就成功了。奇怪的是，我在别处发现了该代码……谢谢！
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