Node를 사용하는 방법에 대해 자세히 설명합니다.js 열 재부팅 페이지 구현

4640 단어 Node.js열중량

앞말


얼마 전에 저는 브라우저-sync+gulp+gulp-nodemon과 결합하여 생산 환경의 열 업데이트를 실현했습니다. (이전에 이해가 좀 빗나갔습니다. 열 업데이트라고 정의해야 합니다. 열 중량이 아닙니다) 프로젝트 비계입니다. 그러면 오늘 우리는 Node를 사용할 것입니다.js는 열 재부팅 페이지를 실현합니다.
그럼 여러분도 저처럼 되지 않도록 제가 오늘 총괄해 보겠습니다.
열중량
핫 리셋이란 페이지가 매번 바뀌어 수동으로 리셋할 필요가 없고 자동으로 리셋할 수 있는 것이다.
핫 업데이트
브라우저의 새로 고침 없는 업데이트는 전체 페이지를 완전히 새로 고칠 필요 없이 실행할 때 교체, 추가, 삭제할 수 있습니다.
목적: 개발 속도를 가속화하기 때문에 개발 환경에서만 사용할 수 있다.
사고방식: 페이지를 완전히 다시 불러올 때 잃어버린 프로그램의 상태를 유지하고 변경된 내용만 업데이트하여 개발 시간을 절약하고 스타일을 더욱 빠르게 조정하는 것은 브라우저 디버그에서 스타일을 바꾸는 것과 거의 같다.

실전


1. 프로젝트 초기화


여기서 다음 명령을 사용하여 항목을 초기화합니다.여기에 -y 접두사를 사용하는 것은 더 빠르고 편리하게 초기화하기 위해서입니다. 사용자 정의를 원한다면 한 줄씩 두드려도 됩니다.

npm init -y
초기화가 완료되었습니다. 루트 디렉터리에 패키지가 하나 더 있습니다.json 파일.

2. Node 주 파일 앱을 만듭니다.js


다음은 Nodejs 운영 파일 앱을 만듭니다.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');이 줄 코드.촉발했으니까 감청할 데가 있을 거야.

3. 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 이벤트를 사용자 정의했기 때문에 백그라운드에서도 이 사건을 감청할 수 있습니다.만약 백그라운드에서 이 사건을 촉발한다면, 백그라운드에서 무작위 실행 코드를 감청할 것이다.

4. 다른 유형의 파일 만들기


우리는 위의 index에 있을 수 있다.html 파일에서 제 외부에 index가 도입된 것을 보았습니다.js 파일과 스타일.js 파일.주로 그 중의 코드를 바꾸면 페이지도 상응하는 변화가 있는지 검사하는데 답은 긍정적이다.

5. 실시간 업데이트 페이지


우리는 우선 프로젝트를 시작한다.

node app.js
터미널 아래에 The server is running on port 8086이 표시됩니다.브라우저에서 열 수 있어요.http://localhost:8086/이 주소.코드를 변경하면 다음 페이지가 실시간으로 표시되고 단축키를 눌러 코드를 저장할 때 (이곳은 편집기가 실시간으로 자동으로 코드를 저장하지 않는 것을 추천합니다) 페이지가 실시간으로 업데이트됩니다.
이렇게 하면 매우 편리하지 않겠습니까? 매번 페이지를 바꾸어 클릭하여 페이지를 새로 고치지 않을 것입니다.애초에 JQ로 페이지를 쓰려고 했을 때, 애초에 정말 바보 같아서 매번 반복해서 일했다.

결어


읽어주셔서 감사합니다. 당신의 시간을 낭비하지 않았으면 좋겠습니다.
소스 주소:https://gitee.com/maomincoding/hot-load
이 부분에서 Node를 어떻게 사용하는지 상세하게 설명합니다.js 핫 리셋 페이지를 실현하는 글은 여기에 소개되었습니다.js 핫 리셋 페이지 내용 저희 이전 글을 검색하거나 아래의 관련 글을 계속 찾아보세요. 앞으로 많이 사랑해 주세요!
코드업 3301 문제 풀이 python
프로그래머스 -완주하지 못한 선수

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage