我的目标是每当我在本地主机上编辑和保存文件时更新网页，并立即将其内容更新到页面。
我正在使用 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>
浏览器的控制台日志有点神秘:
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
上面显示的问题让我很困惑。我不确定方括号问题来自哪里，因为我的代码中没有方括号问题。
**** 更新了代码以更正套接字处理程序名称问题 ****
最佳答案
在服务器代码中，您使用的是 socket.emit("receiveFile", data) 但在客户端上，您使用的是 socket.on("requestFile", (function(data) ...)
您的套接字正在发出并监听 2 个不同的事件...要修复此问题，请将 receiveFile 和 requestFile 重命名为相同的名称 - 类似于 fileChanged.
这样，您的服务器将发出 fileChanged 事件，并且您的客户端将监听。
有关更多信息，请查看 Sending and Receiving Events 上的 socket.io 文档
关于javascript - 在浏览器中显示文件更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54075905/