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

前言

前不久我结合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热重载页面内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Node.js巧妙实现Web应用代码热更新

    Node.js巧妙实现Web应用代码热更新

    背景 相信使用 Node.js 开发过 Web 应用的同学一定苦恼过新修改的代码必须要重启 Node.js 进程后才能更新的问题.习惯使用 PHP 开发的同学更会非常的不适用,大呼果然还是我大PHP才是世界上最好的编程语言.手动重启进程不仅仅是非常恼人的重复劳动,当应用规模稍大以后,启动时间也逐渐开始不容忽视. 当然作为程序猿,无论使用哪种语言,都不会让这样的事情折磨自己.解决这类问题最直接和普适的手段就是监听文件修改并重启进程.这个方法也已经有很多成熟的解决方案提供了,比如已经被弃坑的 nod

  • nodemon实现Typescript项目热更新的示例代码

    我们都知道nodemon可以直接用来在开发环境下运行js文件,可以在文件改变时自动刷新和重启服务器.但是最近刚好在学typescript,所以就想使用ts来写,也想达到同样的效果,总结一下方法,大概有如下几种: nodemon+tsc: 这个方法很简单,首先通过tsc将我们的ts文件编译到dist目录下,然后再通过nodemon直接运行dist目录下的文件即可.至于ts的输出目录相关配置可在tsconfig.js中设置. tsc && nodemon --watch dist/index.

  • 详解webpack2+node+react+babel实现热加载(hmr)

    详解webpack2+node+react+babel实现热加载(hmr)

    前端工程化开发的一个重要标志就是热替换技术,它大大的提高开发效率,使我们专注于写代码,webpack2中的热替换相比较1更加简洁. 1. 先看效果 2.目录结构 3.项目目录结构文件描述 bin 执行文件 node_modules node包 public 静态资源文件 static 静态资源 dist 编译后文件 src 项目js文件 .bablrc babel配置文件 webpack.config.dev.js开发模式webpack配置 webpack.config.pro.js生产模式we

  • Webpack 实现 Node.js 代码热替换

    这两天为了这个问题, Gitter 上问, Twitter 上问, GitHub 上问, 两天没反应 原来写博客的 jlongster 不理我, 我也不知道 Webpack 作者的联系方式 最后在 Gitter 上发的消息他似乎看到了, 就粗略地解释了一遍, 醍醐灌顶啊... https://github.com/webpack/docs/issues/45#issuecomment-149793458 Here is the process in short: Compile the serv

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

    前言 前不久我结合browser-sync+gulp+gulp-nodemon实现了一款生产环境热更新(我之前理解有点偏差,应该定义为热更新,不是热重载)的项目脚手架,那么,今天我们将使用Node.js实现一个热重载页面. 那么,我今天就总结一下吧,以防止大家也跟我一样. 热重载 所谓热重载就是页面每次改动,不需要手动去刷新,可自动刷新. 热更新 浏览器的无刷新更新,允许在运行时替换,添加,删除各种模块,而无需进行完全刷新重新加载整个页面. 目的:加快开发速度,所以只适用于开发环境下使用. 思路

  • 详解Wondows下Node.js使用MongoDB的环境配置

    详解Wondows下Node.js使用MongoDB的环境配置

    为了保存网站的用户数据和业务数据,通常需要一个数据库.MongoDB和Node.js特别般配,因为MongoDB是基于文档的非关系型数据库,文档是按BSON(JSON的轻量化二进制格式)存储的,增删改查等管理数据库的命令和JavaScript语法很像.如果你在Node.js里访问MongoDB的数据,会有我们是一家人的感觉,特别亲切. 我也准备使用MongoDB来作为我的数据库. MongoDB使用集合(collection)和文档(document)来描述和存储数据,collection就相当

  • 详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据

    最近使用了protobuf进行数据交互,发送在node.js接收前端的二进制数据出现了数据错误等问题.后来发现思路上面的问题,在req.on('data',()=>{})事件中的处理不适当才引发数据错乱.借此发 我先直接贴正确接收二进制数据代码 const server = http.createServer((req, res) => { if(req.method==='OPTIONS'){ res.setHeader("Access-Control-Allow-Origin&q

  • 详解两个Node.js进程是如何通信

    目录 前言 不同电脑上的两个 Node.js 进程间通信 使用 TCP 套接字 使用 HTTP 协议 同一台电脑上两个 Node.js 进程间通信 使用内置 IPC 通道 使用自定义管道 总结 前言 两个 Node.js 进程之间如何进行通信呢?这里要分两种场景: 不同电脑上的两个 Node.js 进程间通信 同一台电脑上两个 Node.js 进程间通信 对于第一种场景,通常使用 TCP 或 HTTP 进行通信,而对于第二种场景,又分为两种子场景: Node.js 进程和自己创建的 Node.j

  • 详解axios在node.js中的post使用

    前言: 最近因为做的东西需要用到网络请求库,之前接触过的只有request,很强大好用.但是这个项目中需要用到Promise,我又不想重新封装,于是选择了另一款库axios. 在node中,axios的get请求加上原生支持的Promise语法使用起来很方便,很丝滑,但是后面碰到了一个需求,就是要向另一个服务器post数据,并且这个数据是以form-data的形式post过去的,这时,问题就出现了. 问题: 当我想在node中使用axios以post的方式发送一张图片给某个server时,最先我

  • 详解如何使用Node.js编写命令工具——以vue-cli为例

    详解如何使用Node.js编写命令工具——以vue-cli为例

    vue-cli全局安装之后,提供了vue命令和vue init.vue list.vue build三个子命令,通过命令可以搭建基于vue.js的脚手架项目.本文简单介绍一下这些命令是如何实现的. vue-cli的项目目录 如下图,由之前文章介绍,npm安装过程中,可以利用package.json中bin字段的配置,将bin目录下的命令文件软连到全局命令.也就是说在/usr/local/bin下生成了四个软连命令:vue.vue-build.vue-list.vue-init. vue命令的源码

  • 详解如何使用node.js的开发框架express创建一个web应用

    搭建环境 1.安装Express 按键:Windows+R=>输入cmd,打开命令行,输入 npm install -g express@3 我们需要用全局模式安装Express,因为只有这样,我们才能在命令行中使用它 注意:这里我只选用Express 3.x版本,要是你对Express3x版本熟悉了的话,你只需看一下Migrating from 3.x to 4.x 的文档即可过渡到Express 4.x 2.新建一个工程 继续打开命令行,输入 express -e murenziwei 注意

  • 详解一些适用于Node.js的命名约定

    序言 There are only two hard things in Computer Science: cache invalidation and naming things. -- Phil Karlton 我乔鲁诺·乔巴拿有一个梦想,便是要成为程序员巨星.但如果你看过我写的代码,便知道我还远远够不上"巨星"二字.我的代码中有许多不一致的命名: 常量的命名时而是全大写的(如WAIT_CONFIRM),时而是全小写的: 某个项目大部分命名用的是camel case(如TaskC

  • 详解Angular5/Angular6项目如何添加热更新(HMR)功能

    本文介绍了详解Angular5/Angular6项目如何添加热更新(HMR)功能,分享给大家,具体如下: A:什么是HMR? Q:HMR(热替换)用于在运行的应用程序中更新代码而不需要重建它.这将导致更快的更新和更少的全页重新加载. angular6-hmr 提供angular6以上HMR(热更新)功能 步骤 1.进入angular项目父级目录内 git clone https://github.com/staven630/angular6-hmr angular6-hmr目录与angular项

  • 详解go基于viper实现配置文件热更新及其源码分析

    go第三方库 github.com/spf13/viper实现了对配置文件的读取并注入到结构中,好用方便. 其中以 viperInstance := viper.New() // viper实例 viperInstance.WatchConfig() viperInstance.OnConfigChange(func(e fsnotify.Event) { log.Print("Config file updated.") viperLoadConf(viperInstance) //

随机推荐