溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
怎么在Node.js中實現熱重載頁面？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
這里使用以下命令初始化項目。這里使用-y后綴我是為了更快更方便地初始化，如果你想自定義的話，可以一行一行的敲。
npm init -y
初始化完成，根目錄下多了一個package.json文件。
下面，我們將創建一個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');這行代碼。既然觸發了那肯定要有地方監聽。
我們會在根目錄下創建一個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>
h2 {
color: red;
}
</style>
</head>
<body>
<h2>Hello</h2>
<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
看完上述內容，你們掌握怎么在Node.js中實現熱重載頁面的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
