nodejs 熱更新頁面

如今因爲寫靜態頁面，每一個改動都須要本身刷新頁面，因此本身寫了一個簡單的node熱更新

啓動server

主要是啓動一個server的服務

const http = require("http");
const port = 3000;
//設置默認文件
let defaultFile = path.join("./1.html");
//建立server
const server = http.createServer((req, res) => {
  res.writeHead(200, {"Content-Type": "text/html"});
  html = fs.readFileSync(defaultFile, "utf-8");
  res.end(html);
});
//啓動服務
server.listen(port, "127.0.0.1", () => {
  console.log(`服務器運行在 http://:${port}/`);
});

監聽文件改動

安裝依賴

npm install chokidar

增長監聽文件改動的回調

//啓動文件監聽
var watcher = chokidar.watch(dir, {
  //忽略文件
  ignored: [/^[^\s()<>]+\.(json|svg|js)$|node_modules$/],
  persistent: true,
});

const log = console.log.bind(console);
//監聽回調 設置最近更新的文件path
watcher
  .on("add", (path) => {
    log(`File ${path} has been added`);
  })
  .on("change", (path) => {
    log(`File ${path} has been changed`);
    defaultFile = path;
  })
  .on("unlink", (path) => {
    log(`File ${path} has been removed`);
    defaultFile = path.join("./default.html");
  });

增長socket服務和發送msg

npm install socket.io

//啓動socket

const io = require("socket.io")(server);
io.on("connection", (client) => {
  console.log("a user connected");
  // socket.on("chat message", (msg) => {
  //   io.emit("chat message", msg);
  // });
  client.on("disconnect", () => {
    console.log("disconnect");
  });
});
//監聽到文件改動時，就更新defaultFile，方便服務器返回最新的文件內容
 //socket send
   io.sockets.emit("filechange");

瀏覽器刷新

//瀏覽器須要注入socket的代碼
function handleHtml(html) {
  let index = html.indexOf("</body>");
  //增長socket代碼
  let socketStirng = `<script src="/socket.io/socket.io.js"></script>
  <script>
    var socket = io();
    socket.on("filechange", function (msg) {
      location.reload();
      socket.close();
    });
  </script>`;
  let newhtml = html.slice(0, index - 1) + socketStirng + html.slice(index - 1);
  return newhtml;
}
//修改下createServe的res, 返回增長了socket的html
html = fs.readFileSync(defaultFile, "utf-8");
  let newhtml = handleHtml(html);
  res.end(newhtml);

總結

整體思路就是啓動一個server服務和scoket服務，增長監聽文件改動的方法，一旦文件改動，就經過scoket發送消息通知客戶端，客戶端就刷新瀏覽器，獲取到最新的html代碼

效果：

代碼地址：https://github.com/rainbowChenhong/50project.git