let fs = require('fs');
let url = require('url');
let http = require('http');
let path = require('path');
let express = require('express');
let app = express();
let server = http.createServer(app);
let io = require('socket.io').listen(server);
let root = __dirname;
app.use(function(req, res, next) {
req.on('static', function() {
let file = url.parse(req.url).pathname;
let mode = 'stylesheet';
console.log(file[file.length - 1]);
if (file[file.length - 1] == '/') {
file += 'index.html';
mode = 'reload';
}
createWatcher(file, mode);
});
next();
});
app.use(express.static(root));
let watchers = {};
function createWatcher(file, event) {
let absolute = path.join(root, file);
if (watchers[absolute]) {
return;
}
fs.watchFile(absolute, function(curr, prev) {
if (curr.mtime !== prev.mtime) {
io.sockets.emit(event, file);
}
});
watchers[absolute] = true;
}
server.listen(3000);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Socket.IO dynamically reloading CSS stylesheets</title>
<link rel="stylesheet" type="text/css" href="./header.css" />
<link rel="stylesheet" type="text/css" href="./styles.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.min.js"></script>
<script type="text/javascript">
window.onload = function() {
let socket = io.connect();
socket.on('reload', function() {
window.location.reload();
});
socket.on('stylesheet', function(sheet) {
let link = document.createElement('link');
let head = document.getElementsByTagName('head')[0];
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', sheet);
head.appendChild(link);
})
};
</script>
</head>
<body>
<h1>This is our Awesome Webpage!</h1>
<div id="body">
<p>12月4日,在第四届世界互联网大会上,刘强东说出了自己担任贫困村荣誉村长的原因
,也呼吁企业家们都站出来去每一个村担任荣誉村长,帮助其脱贫致富。
刘强东还不忘调侃“一个亿小目标”的王健林和“一个月赚十几亿很痛苦”的马云,
并声称“中国的贫困人口依然这么多,是我们这帮富人的耻辱!”。</p>
</div>
</body>
</html>
最近在学node in action 第13张有个socket demo ----即保存css时,自动刷新页面
不知道为何 req.on('static',function() {} 这里面一直执行不到,所以也就得不到自动刷新,只能通过人为刷新才可以得到效果