P09：node實現靜態服務器 ~ hello http

時間 2019-12-08

標籤 p09 node 實現靜態服務器 hello http 欄目網站開發简体版

原文原文鏈接

靜態服務器初體驗

編寫根文件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頁面的狀況，這是怎麼實現的呢？html

須要將上述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 從新執行文件。而實際寫代碼是須要不斷的調試的，若是有一個東西可以自動幫咱們執行就行了，它有個官方名詞：熱更新node

supervisorwebpack
- 你們都知道webpack 是自帶熱跟新的，很是強大。可是咱們寫代碼總不能每一個demo都用webpack,顯得過於笨重web
- supervisor 是一款輕量級的熱更新工具，推薦裝載在全局，這樣隨便哪一個js文件均可以隨時隨地熱跟新了瀏覽器
```
node i -g supervisor
複製代碼
```
- 執行代碼只需bash
```
supervisor app.js
複製代碼
```
  從啓動描述上能夠看出，應該是利用了node watch 監聽了文件的變更，從而再次觸發 node XXX.js服務器
- 後面再次修改文件，直接刷新頁面便可，插件工具會幫咱們再將相關文件執行一遍app
- 另外webpack 不須要刷新也能夠看到效果，我猜想是後續有一次執行了相似location.reload()工具
closepost