Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to use Node.js to achieve hot overload page". In daily operation, I believe many people have doubts about how to use Node.js to achieve hot overload page. Xiaobian consulted all kinds of information and sorted out simple and easy to use operation methods. I hope to answer the doubts of "how to use Node.js to achieve hot overload page"! Next, please follow the small series to learn together!

hot reload

The so-called hot overload is that every time the page changes, it does not need to be manually refreshed, but can be automatically refreshed.

hot update

No refresh update of the browser allows various modules to be replaced, added, and removed at runtime without having to perform a full refresh to reload the entire page.

Purpose: Speed up development, so it is only suitable for use in development environments.

Idea: Preserve the state of the application that is lost when the page is fully reloaded, update only what has changed to save development time, adjust styles faster, almost equivalent to changing styles in the browser debugger.

Actual combat 1. Initialize the project

Here, initialize the project using the following command. I use the-y suffix here for faster and easier initialization, and if you want to customize it, you can type it line by line.

npm init -y

Initialization complete, there is an additional package.json file in the root directory.

Second, create Node master file app.js

Next, we will create a Nodejs action master file 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.`); });

First, we created an http server using http, express and socket.io. Then we use express to host static files, specifying the static file directory public. Here we use the watch method under the fs module to listen for changes in the file directory. If the files in the directory change, io.sockets.emit ('reload '); is triggered. If it's triggered, there's got to be a place to listen.

Third, create index.html file

We'll create a public folder in the root directory and create an index.html file within the folder.

Hot Update Page h2 { color: red; } Hello text

1 2 3 4

import obj from './ index.js'; io.connect('http://localhost:8086/').on('reload', () => _window.location.reload() ); document.querySelector('.name')[xss_clean] = obj.name;

The file content is above, we first need to pay attention to how to listen with the background, we just need to import the socket.io.min.js file (I will give the source address at the end of the file), and then type the following code below:

io.connect('http://localhost:8086/').on('reload', () =>_window.location.reload());

http://localhost:8086/This is the address of the background. You need to monitor this address to communicate with the background. Because we customize a reload event in the background, the foreground only needs to listen for this event. If this event is triggered in the background, then the foreground will listen and execute the code randomly.

Creating other types of files

We can see in the index.html file above that I externally introduced the index.js file and style.js file. The main test is if you change the code, whether the page changes accordingly, the answer is yes.

5. Update the page in real time

We start the project first.

node app.js

The server is running on port 8086. Then you can open http://localhost:8086/in your browser. We change the code, you can see the next page real-time display, and press the shortcut key to save the code (here recommended editor does not automatically save the code in real time), the page is updated in real time.

This is not very convenient, not every time the switch page click refresh page. Think of the original use of JQ to write pages, I really felt too stupid, repeated work every time.

At this point, the study on "how to use Node.js to achieve hot overload pages" is over, hoping to solve everyone's doubts. Theory and practice can better match to help everyone learn, go and try it! If you want to continue learning more relevant knowledge, please continue to pay attention to the website, Xiaobian will continue to strive to bring more practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.