詳解如何使用Node.js實現熱過載頁面
前言
前不久我結合bhttp://www.cppcns.comrowser-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.
檔案內容如上，我們首先需要關注的是怎麼與後臺監聽，我們只需要引入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熱過載頁面內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！