详解如何使用Node.js实现热重载页面


Posted in Javascript onMay 06, 2021

前言

前不久我结合browser-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.css" rel="external nofollow"  />
    <style>
      h1 {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello</h1>
    <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

会看到终端下会显示The server is running on port 8086.,然后就可以在浏览器打开http://localhost:8086/这个地址。我们更改下代码,就可以看下页面实时显示,并且是按下快捷键保存代码时(这里推荐编辑器不要实时自动保存代码),页面就实时更新。

这样是不是很省事了,不会每次切换页面点击刷新页面了。想当初使用JQ写页面时,当初真是觉得自己太傻了,每次都重复劳动。

结语

谢谢阅读,希望没有浪费你的时间。

源码地址:https://gitee.com/maomincoding/hot-load

到此这篇关于详解如何使用Node.js实现热重载页面的文章就介绍到这了,更多相关Node.js热重载页面内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js传值 判断
Oct 26 Javascript
JS声明变量背后的编译原理剖析
Dec 28 Javascript
js 获取(接收)地址栏参数值的方法
Apr 01 Javascript
HTML5之lang属性与dir属性的详解
Jun 19 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
Mar 13 Javascript
JavaScript弹出对话框的三种方式
Mar 23 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
Jun 22 Javascript
判断输入的字符串是否是日期格式的简单方法
Jul 11 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
Jun 12 Javascript
详谈表单重复提交的三种情况及解决方法
Aug 16 Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 Javascript
Vue+Element自定义纵向表格表头教程
Oct 26 Javascript
关于Vue Router的10条高级技巧总结
May 06 #Vue.js
在JavaScript中如何使用宏详解
May 06 #Javascript
如何用JS实现简单的数据监听
May 06 #Javascript
详解TS数字分隔符和更严格的类属性检查
May 06 #Javascript
JS中一些高效的魔法运算符总结
May 06 #Javascript
react国际化react-intl的使用
LayUI+Shiro实现动态菜单并记住菜单收展的示例
You might like
玛琪朵 Macchiato
2021/03/03 咖啡文化
PHP迅雷、快车、旋风下载专用链转换代码
2010/06/15 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(二)
2014/06/23 PHP
php获取'/'传参的值简单方法
2017/07/13 PHP
PHP7 新增常量
2021/03/09 PHP
js获取height和width的方法说明
2013/01/06 Javascript
js调用百度地图及调用百度地图的搜索功能
2015/09/07 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
一道关于JavaScript变量作用域的面试题
2016/03/08 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
2017/01/04 Javascript
Vue一次性简洁明了引入所有公共组件的方法
2018/11/28 Javascript
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
Python编写检测数据库SA用户的方法
2014/07/11 Python
Python实现抓取城市的PM2.5浓度和排名
2015/03/19 Python
python装饰器与递归算法详解
2016/02/18 Python
使用Python对Csv文件操作实例代码
2017/05/12 Python
Python Paramiko模块的使用实际案例
2018/02/01 Python
Python装饰器原理与用法分析
2018/04/30 Python
python3实现域名查询和whois查询功能
2018/06/21 Python
python数据预处理方式 :数据降维
2020/02/24 Python
浅谈python的elementtree模块处理中文注意事项
2020/03/06 Python
python实现将字符串中的数字提取出来然后求和
2020/04/02 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
如何利用cmp命令比较文件
2016/04/11 面试题
怎样客观的做好自我评价
2013/12/28 职场文书
简历中的自我评价范文
2014/02/05 职场文书
体育专业自荐书
2014/05/29 职场文书
教师节感恩老师演讲稿
2014/08/28 职场文书
2014年团工作总结
2014/11/27 职场文书
奖励申请报告范文
2015/05/15 职场文书
2016新党章学习心得体会
2016/01/15 职场文书
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js