Моя цель - обновлять веб-страницу всякий раз, когда я редактирую и сохраняю файл на локальном хосте, и мгновенно его содержимое обновляется до страницы.
Я использую 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
Проблема, показанная выше, озадачивает меня. Я не уверен, откуда взялась проблема с квадратными скобками, поскольку в моем коде их нет.
**** Обновлен код для исправления проблемы с именем обработчика сокетов ****