一个简易 前端 node 热更新

糖水风说
2,582 阅读2分钟

这篇文章主要介绍在学习nodejs过程中，实现server代码更新client自动刷新的功能，提高学习效率的过程

背景：

在学习node过程中，总是需要手动run，在写restful api，需要浏览器手动刷新。这个过程显得冗长，学习nodejs的兴趣直接少了一半。

目标：

  1. step1 实现nodejs 保存后的自动run代替每次的手动run
  2. step2 写restful服务时，浏览器页面自动刷新

step1：实现nodejs 保存后的自动run代替每次的手动run

在./script.js中 监听index.js变化并创建子进程，解决手动run的问题

// ./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.js

在 ./index.js中通过http.createServer创建server服务

// ./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端。

<!-- ./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.io

server端 ./index.js中再增加一个socket服务

// ./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放在一个服务里使用。

到这里，你还想启动一个node服务，用于html的展现吗？不妨试试 nginx。

本篇到这里也快结束了，奉上截图

截屏2021-07-26 下午4.40.37.png

现在 修改 ./index.js 都会触发重启服务(node 、socket)，client端自动请求接口

总结

- 本文中，没有使用太多的插件和框架，例如 koa express vue 等,只使用了axios socket；
- 目的也是为了更加精简学习nodejs；
- 在index.js中写了两个服务，每次修改，都是将两个服务停止再启动，略显粗暴；
- socket服务本身自带心跳功能，其实代替了我们的手动轮训；
- 后期如果有多个api的测试，可以引入观察者模式只对某个修改的api，进行重新请求。
avatar
文章
阅读
粉丝