基本原理:通過node.js的文件系統(tǒng)監(jiān)聽本地文件的變化臣咖,通過socket向前端推送信息每庆,前端接收到信息后自動刷新頁面瑟押。
開發(fā)環(huán)境
Node.js 6.10.0
express 4.15.2
socket.io 1.7.3
首先生成package.json配置文件
npm init
安裝相關(guān)依賴包 express, socket.io
npm install --save express --save socket.io
配置服務器文件 app.js
var http = require('http');
var express = require('express');
var app = express();
var server = http.createServer(app);
var path = require('path');
var root = path.join(__dirname, './public');
var fs = require('fs');
var url = require('url');
var io = require('socket.io')(server);
app.use(function (req, res, next) {
var file = url.parse(req.url).pathname;
var mode = 'reload';
createWatcher(file, mode);
next();
});
app.use(express.static(root));
var watchers = {};
function createWatcher(file, event) {
var absolute = path.join(root, file);
console.log(event);
console.log(watchers);
if (watchers[absolute]) {
return;
}else {
fs.watchFile(absolute, function (curr, prev) {
if (curr.mtime !== prev.mtime) {
console.log(`文件被修改`);
io.sockets.emit(event, file);
}
});
watchers[absolute] = true;
}
}
server.listen(8080, function () {
console.log(`The server is running on port 8080.`);
});
進入項目根目錄啟動服務
node app.js
瀏覽器打開?http://localhost:8080/index.html?修改index.html文件并保存后頁面自動刷新廓八,public目錄下其他文件都可實現(xiàn)自動刷新京景。
GitHub地址:https://github.com/Godgoodstudy/hot-update
結(jié)構(gòu)