P09：node实现静态服务器 ~ hello http上面提到修改代码，就需要使用node 重新执行文件。而实际写代码

静态服务器初体验

编写根文件app.js

// 引入http内置模块
const http = require('http');

// 引入chalk 用于美化后台打印
const chalk = require('chalk')

// 引入基本配置
const conf = require('./config/defaultConfig');

// 创建一个server 实例
const server = http.createServer((rep, res) => {
    // 状态码
    res.statusCode = 200;

    // 设置相应头部
    res.setHeader('Content-Type', 'text/plain')

    // 输出
    res.end('haha http!')

})

// 监听 server 实例

server.listen(conf.port, conf.hostname, () => {

    const addr = `http:// ${conf.hostname}:${conf.port}`

    console.info(`server startd at ${chalk.green(addr)}`)
})

抽离配置文件
- 编写代码简洁实用为好，我们将端口主机名等抽离出来 defaultConfig.js
```
module.exports = {
    // 主机名称
    hostname: '127.0.0.1',
    // 端口号
    port: 6969
}
```
输出结果
- 执行node app.js
- 因为我们监听的时候打印了端口所以有以下输出
```

server startd at http:// 127.0.0.1:6969
```
在浏览器输入规定的主机名以及端口即可访问我们编写的本地服务器

输出web页面

我们设置res.setHeader('Content-Type', 'text/plain')，就会将输出格式设置成文本。这时候我们会想到，工作中碰到过接口返回web页面的情况，这是怎么实现的呢？

需要将上述app.js文件创建实例部分修改为
- 需要注意的是如果项目没有配置热跟新，需要重新执行 node app.js

// 创建一个server 实例
const server = http.createServer((rep, res) => {
    // 状态码
    res.statusCode = 200;

    // 设置相应头部
    res.setHeader('Content-Type', 'text/html')
    
    res.write('<html>')
    res.write('<body>')
    res.write('<h1 style="color: blue">')
    res.write('ah, http !')
    res.write('</h1>')
    res.write('</body>')
    // 输出
    res.end('</html>')

})

可以看到页面输出蓝色文字，代表我们输出了web页面

关于热更新

上面提到修改代码，就需要使用node 重新执行文件。而实际写代码是需要不断的调试的，如果有一个东西能够自动帮我们执行就好了，它有个官方名词：热更新

supervisor
- 大家都知道webpack 是自带热跟新的，非常强大。但是我们写代码总不能每个demo都用webpack,显得过于笨重
- supervisor 是一款轻量级的热更新工具，推荐装载在全局，这样随便哪个js文件都可以随时随地热跟新了
```
node i -g supervisor
```
- 执行代码只需
```
supervisor app.js
```
  从启动描述上可以看出，应该是利用了node watch 监听了文件的变动，从而再次触发 node XXX.js
- 后面再次修改文件，直接刷新页面即可，插件工具会帮我们再将相关文件执行一遍
- 另外webpack 不需要刷新也可以看到效果，我猜测是后续有一次执行了类似location.reload()
close

P09：node实现静态服务器 ~ hello http

相关文章

静态服务器初体验

输出web页面

关于热更新