一个简易前端 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服务，浏览器页面自动刷新