用Socket.IO触发页面和CSS的重新加载

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() {} 这里面一直执行不到,所以也就得不到自动刷新,只能通过人为刷新才可以得到效果

阅读 2.3k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题