一個簡易前端 node 熱更新

這篇文章主要介紹在學習nodejs過程當中，實現server代碼更新client自動刷新的功能，提升學習效率的過程javascript

背景：

在學習node過程當中，老是須要手動run，在寫restful api，須要瀏覽器手動刷新。這個過程顯得冗長，學習nodejs的興趣直接少了一半。html

目標：

step1 實現nodejs 保存後的自動run代替每次的手動run
step2 寫restful服務時，瀏覽器頁面自動刷新

step1：實現nodejs 保存後的自動run代替每次的手動run

在./script.js中監聽index.js變化並建立子進程，解決手動run的問題vue

// ./script.js
const fs = require('fs')
const childProcess = require('child_process')
console.log('執行script');
let child = childProcess.fork(__dirname,['/index.js']);
fs.watch(__dirname + '/index.js', function(err, data) {
    console.log(err, data);
    console.log('有改動');
    child.kill('SIGHUP')
    child = childProcess.fork(__dirname,['/index.js']);
})
複製代碼

啓動node服務 node script.jsjava

在 ./index.js中經過http.createServer建立server服務node

// ./index.js
const server = http.createServer(function (req, res) {
    if (url.parse(req.url).pathname === '/favicon.ico') return;
    // TODO
})
複製代碼

step2：在setp1的基礎實現restful服務，瀏覽器頁面自動刷新

server重啓後，client能自動刷新例如window.reload() 這裏使用的是全雙工通訊的socket服務，能夠理解爲server能主動發送消息給client。首先建立一個html文件用做client端。ios

<!-- ./index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/socket.io-client@4.1.2/dist/socket.io.min.js"></script>
<body>
    restful 服務
</body>
<script> // 向給定ID的用戶發起請求 axios.get('http://127.0.0.1:3003/userList') .then(function (response) { // 處理成功狀況 console.log(response); }) .catch(function (error) { // 處理錯誤狀況 console.log(error); }) .then(function () { // 老是會執行 }); console.log(axios); const socket = io('ws://127.0.0.1:3002',{ path: '/sockettest', withCredentials: true, extraHeaders: { "my-custom-header": "abcd" } }); console.log(socket); </script>
</html>
複製代碼

client端中，直接引入了模塊axios和socket.ionginx

server端 ./index.js中再增長一個socket服務express

// ./index.js
const wsserver = require('http').createServer();
const io = require('socket.io')(wsserver, {
    path: '/sockettest',
    pingInterval: 10000,
    pingTimeout: 5000,
    cors: {
      origin: "http://127.0.0.1:8080",
      methods: ["GET", "POST"],
      allowedHeaders: ["my-custom-header"],
      credentials: true
    }
  });
wsserver.listen(3002);
console.log('socket 端口3002');
複製代碼

如今 node script.js 啓動了兩個服務（restful服務、socket服務）再雙擊打開html文件。頁面報錯跨域。直接打開html，是file文件服務file://，不具備TCP協議，一樣不具備跨域能力，大白話，就是喪失了與外界通訊的能力。那須要將html放在一個服務裏使用。npm

到這裏，你還想啓動一個node服務，用於html的展示嗎？不妨試試 nginx。axios

本篇到這裏也快結束了，奉上截圖

如今修改 ./index.js 都會觸發重啓服務(node 、socket)，client端自動請求接口

總結

- 本文中，沒有使用太多的插件和框架，例如 koa express vue 等,只使用了axios socket；
- 目的也是爲了更加精簡學習nodejs；
- 在index.js中寫了兩個服務，每次修改，都是將兩個服務中止再啓動，略顯粗暴；
- socket服務自己自帶心跳功能，其實代替了咱們的手動輪訓；
- 後期若是有多個api的測試，能夠引入觀察者模式只對某個修改的api，進行從新請求。
複製代碼

一個簡易 前端 node 熱更新

背景：

目標：

step1：實現nodejs 保存後的自動run代替每次的手動run

step2： 在setp1的基礎實現restful服務，瀏覽器頁面自動刷新

本篇到這裏也快結束了，奉上截圖

總結

一個簡易前端 node 熱更新

step2：在setp1的基礎實現restful服務，瀏覽器頁面自動刷新