美文网首页
使用node 实现文件修改,自动刷新浏览器功能 (HTTP 轮询

使用node 实现文件修改,自动刷新浏览器功能 (HTTP 轮询

作者: webmrxu | 来源:发表于2019-07-11 19:15 被阅读0次
    /**
     * # 使用node实现静态文件服务器,仿nginx 静态服务器
     */
    let http = require("http")
    let url = require("url")
    let fs = require("fs")
    let net = require('net')
    
    let fileIsModify = false  // 文件是否修改
    // 默认端口,并检测端口是否被占用
    let port = 8100
    portIsOccupied(port).then(() => {
      createServerFn();
    })
    
    function createServerFn() {
      http.createServer(function (req, res) {
        let reqPath = url.parse(req.url).path
        let filepath = __dirname + reqPath
        if (!reqPath.includes('.')) {
          if (reqPath == '/server/refresh') {
            if (fileIsModify) {
              res.end('{"code":"2000","success":true, "refresh":true}')
              fileIsModify = false
            } else {
              res.end('{"code":"2000","success":true, "refresh":false}')
            }
          }
          return
        }
        fs.exists(filepath, function (exists) {
          if (exists) {
            fs.stat(filepath, function (err, stats) {
              if (err) {
                res.end('<h1>server error</h1><p>' + err + '</p>')
              } else {
                if (stats.isFile()) {
                  if (filepath.includes('html')) {
                    dealHtmlFile(filepath, res)
                    return
                  }
                } else {
                  fs.readdir(filepath, function (err, files) {
                    if (files.includes('index.html')) {
                      filepath = filepath + 'index.html'
                      dealHtmlFile(filepath, res)
                    } else {
                      res.end('<h1>404 no such file or directory</h1><p>no such file or directory</p><p>' + filepath + '/index.html</p>')
                    }
                  })
                }
              }
            })
          } else {
            res.end('<h1>404 no such file or directory</h1><p>no such file or directory</p><p>' + filepath + '</p>')
          }
        })
      }).listen(port)
      console.log('http.createServer is start, port ' + port)
    }
    // 检测端口是否被占用
    function portIsOccupied() {
      const server = net.createServer().listen(port)
      return new Promise((resolve, reject) => {
        server.on('listening', () => {
          server.close()
          resolve()
        })
        server.on('error', (err) => {
          if (err.code === 'EADDRINUSE') {
            port++
            resolve(portIsOccupied())
          } else {
            reject(err)
          }
        })
      })
    }
    // 检测文件是否修改
    fs.watch(__dirname,{recursive: true},function (event, filename) {
      fileIsModify = true
    })
    // html 文件特殊处理
    function dealHtmlFile(filepath, res) {
      var data = fs.readFileSync(filepath, 'utf-8')
      let scriptStr = `
        <script>
          let origin = location.origin
          var xhr = new XMLHttpRequest();
          xhr.onload = function () {
            if (xhr.status === 200) {
              let respData = JSON.parse(xhr.response)
              console.log(respData)
              if (respData.refresh) {
                location.reload()
              }
            }
          }
          setInterval(function(){
            xhr.open('GET', origin + '/server/refresh', true);
            xhr.send(null);
          },1000)
        </script>
      `
      data += scriptStr
      res.end(data)
    }
    
    

    相关文章

      网友评论

          本文标题:使用node 实现文件修改,自动刷新浏览器功能 (HTTP 轮询

          本文链接:https://www.haomeiwen.com/subject/yvgfkctx.html