詳解如何使用Node.js實現熱重載頁面

Posted on by

前言

前不久我結合browser-sync+gulp+gulp-nodemon實現瞭一款生產環境熱更新（我之前理解有點偏差，應該定義為熱更新，不是熱重載）的項目腳手架，那麼，今天我們將使用Node.js實現一個熱重載頁面。

那麼，我今天就總結一下吧，以防止大傢也跟我一樣。

熱重載

所謂熱重載就是頁面每次改動，不需要手動去刷新，可自動刷新。

熱更新

瀏覽器的無刷新更新，允許在運行時替換，添加，刪除各種模塊，而無需進行完全刷新重新加載整個頁面。

目的：加快開發速度，所以隻適用於開發環境下使用。

思路：保留在完全重新加載頁面時丟失的應用程序的狀態，隻更新改變的內容，以節省開發時間，調整樣式更加快速，幾乎等同於在瀏覽器調試器中更改樣式。

實戰

一、初始化項目

這裡使用以下命令初始化項目。這裡使用-y後綴我是為瞭更快更方便地初始化，如果你想自定義的話，可以一行一行的敲。

npm init -y

初始化完成，根目錄下多瞭一個package.json文件。

二、創建Node主文件app.js

下面，我們將創建一個Nodejs操作主文件app.js。

const http = require('http');
const express = require('express');
const app = express();
const server = http.createServer(app);
const path = require('path');
const fs = require('fs');
const io = require('socket.io')(server);

app.use(express.static(path.join(__dirname, './public')));
createWatcher();

function createWatcher() {
  const absolute = './public';
  fs.watch(absolute, function (eventType, filename) {
    if (filename) {
      io.sockets.emit('reload');
    }
  });
}

server.listen(8086, function () {
  console.log(`The server is running on port 8086.`);
});

首先，我們使用http、express結合創建瞭一個http服務器，又同時與socket.io綁定。然後我們又利用express托管靜態文件，指定靜態文件目錄public。我們這裡使用瞭fs模塊下的watch方法，用於監聽文件目錄的變化。如果目錄下的文件改變瞭，那麼就會觸發io.sockets.emit(‘reload’);這行代碼。既然觸發瞭那肯定要有地方監聽。

三、創建index.html文件

我們會在根目錄下創建一個public文件夾，文件夾內創建一個index.html文件。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>熱更新頁面</title>
    <link rel="stylesheet" href="style.css" rel="external nofollow"  />
    <style>
      h1 {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello</h1>
    <p class="txt">文本</p>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <p class="name"></p>
    <script src="./socket.io.min.js"></script>
    <script src="./index.js" type="module"></script>
    <script type="module">
      import obj from './index.js';
      io.connect('http://localhost:8086/').on('reload', () =>
        window.location.reload()
      );
      document.querySelector('.name').innerHTML = obj.name;
    </script>
  </body>
</html>

文件內容如上，我們首先需要關註的是怎麼與後臺監聽，我們隻需要引入socket.io.min.js文件（文件我會在文末給出源碼地址），然後在下面鍵入以下代碼：

io.connect('http://localhost:8086/').on('reload', () =>window.location.reload());

http://localhost:8086/ 這是後臺的地址，需要監聽這個地址，才能跟後臺進行通信。因為後臺我們自定義瞭一個reload事件，前臺也隻需要監聽這個事件。如果後臺觸發瞭這個事件，那麼前臺就會監聽到，隨機執行代碼。

四、創建其他類型的文件

我們可以在上面的index.html文件中看到瞭我外部引入瞭index.js文件與style.js文件。主要是檢測如果改變其中的代碼，頁面是否也相應的改變，答案是肯定的。

五、實時更新頁面

我們首先啟動項目。

node app.js

會看到終端下會顯示The server is running on port 8086.，然後就可以在瀏覽器打開http://localhost:8086/這個地址。我們更改下代碼，就可以看下頁面實時顯示，並且是按下快捷鍵保存代碼時（這裡推薦編輯器不要實時自動保存代碼），頁面就實時更新。

這樣是不是很省事瞭，不會每次切換頁面點擊刷新頁面瞭。想當初使用JQ寫頁面時，當初真是覺得自己太傻瞭，每次都重復勞動。

結語

謝謝閱讀，希望沒有浪費你的時間。

源碼地址：https://gitee.com/maomincoding/hot-load

到此這篇關於詳解如何使用Node.js實現熱重載頁面的文章就介紹到這瞭,更多相關Node.js熱重載頁面內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：