[Node.js 与前端开发实战 | 青训营笔记07]

mingdu明渡
66 阅读6分钟

前言

这是我参与「第五届青训营」伴学笔记创作活动的第 7 天,前面我们讲了Javscript library(React),React是用的jsx语法，因为浏览器是不认识jsx,那就需要用node.js写的webpack才能进行转译，打包压缩；那么接下来我们看看什么是node.js，node.js在实际前端开发中起了怎么样的作用？

Node.js

内容概要

    1. Node.js 的应用场景(why)
    1. Node.js 运行时结构(what)
    1. 编写 Http Server (how)
    1. 延伸话题

Node.js 的应用场景

    1. 前端工程化 c1c0fbb2-f04a-4bf1-b40a-81bd1aa44afa.png
    1. web服务端应用
      node.js b15e9fd6-3b12-4fd1-9c67-d30658fbae99.png vercel cccd235d-2dca-401e-aeae-e09cfd2121bb.png
    1. Electron 跨端桌面应用 a07e4213-83f8-4517-ac56-2d8eff59076b.png 685591e0-7c12-4db2-ad6d-4bb73bec2e40.png

Node.js 的应用场景 -前端工程化

  • Bundle: webpack, vite, esbuild, parce
  • Uglify: uglifyjs
  • Transpile: bablejs, typescript
  • 其他语言加入竞争: esbuild, parcel, prisma
  • 现状:难以替代

Node.js 的应用场景 - Web 服务端应用

  • 学习曲线平缓，开发效率较高
  • 运行效率接近常见的编译语言
  • 社区生态丰富及工具链成熟(npm, V8 inspector)
  • 与前端结合的场景会有优势(SSR)
  • 现状: 竞争激烈，Node.js 有自己独特的优势

Node.js 的应用场景 -_Electron 跨端桌面应用

  • 商业应用:vscode,slack, discord,zoom
  • 大型公司内的效率工具
  • 现状: 大部分场景在选型时，都值得考虑

Node.js 的应用场景 -Node.js 在字节

  • BFF 应用、SSR 应用，举例: Modern.js
  • 服务端应用，举例:头条搜索,西瓜视频,懂车帝
  • Electron 应用:飞连,飞书
  • 每年新增 1000+ Node.js 应用

总结： Node.js 可以写很多比较多的跨端工具和构建打包工具，支持SSR,有丰富成熟的工具链，学习成本较低，开发效率较高，效率接近和常用编译语言

Node.js 运行时结构

7001e4a9-5da5-4cc3-8e85-c9ceb075cf56.png

Node.js 运行时结构 -V8,libuv

  • V8: JavaScript Runtime, 诊断调试工具 (inspector)
  • libuv: eventloop(事件循环),syscall (系统调用)
  • 举例: 用 node-fetch 发起请求时...

Node.js 运行时结构 - 特点

  1. 异步I/O
setTimeout(() => {
    console.log('B')
})
console.log('A')
  1. 单线程
function fibonacci(num：number):number { 
    if (num === 1 || num === 2) {
        return 1
    }
    return fibonacci(num - 1) + fibonacci(num - 2)
}
fibonacci(42)
fibonacci(43)
  1. 跨平台
    worker_thread 可以起独立线程，但每个线程的模型没有太大变化
const net = require('net')

const socket = new net.Socket('/tmp/scoket.sock')

Nodejs 运行时结构一异步 IO

当 Node.is 执行 I/0 操作时，会在响应返回后恢复操作，而不是阻塞线程并占用额外内存等待 7005d779-d4ec-4687-939f-83efc4c1d6c6.png

Node.is 运行时结构一单线程

  • JS 单线程
    • 实际: JS 线程 + uv 线程池 + V8 任务线程池 + V8 Inspector 线程
  • 优点: 不用考虑多线程状态同步问题，也就不需要锁;同时还能比较高效地利用系统资源;
  • 缺点: 阻塞会产生更多负面影响
    • 解决办法:多进程或多线程

uv 线程池：
单线程只有主线程才是单线程的，如果我们用Node.js看里面的process进程里面，会发现还有很多线程，其中你会看到4个由 libuv 提供的线程，这就是libuv的线程池；
还是读取文件的demo,为了不堵塞后面的操作，就会把读取的事情交给libuv的线程池去做，这样javascript的主线程就可以先做其他的事情；
也包括对CPU消耗时间比较大的底层操作,比如说： 我们要做加密解密，它也会丢掉libuv的线程池里面去，也是避免对主线程的堵塞

V8任务线程池
可以通过V8本身去调整，但是大部分场景都不会去单独调整

V8 Inspector线程
当你写出一个死循环的时候，接了一个调试工具，但是你已经把V8 Inspector 已经打开后,那你还是可以对它进行调试的操作

Node.is 运行时结构一跨平台

  • 跨平台 (大部分功能、api)
  • Node.js 跨平台+JS 无需编译环境 (+ Web 跨平台 + 诊断工具跨平整体学习成本低
    • =开发成本低 (大部分场景无需担心跨平台问题)，

编写 Http Server

目标

  1. 安装 Node.js
  2. 编写 Http Server +Client,收发 GET,POST 请求
  3. 编写静态文件服务器
  4. 编写 React SSR 服务
  5. 适用 inspector 进行调试、诊断
  6. 部署简介

编写 Http Server - 安装 Node.js

  • Mac,Linux 推荐使用 nvm。多版本管理
  • Windows 推荐 nvm4w 或是官方安装包
  • 安装慢，安装失败的情况，设置安装源
    NVM NODEJS ORG MIRROR=https://npmmirror.com/mirrors/node nvm install 16

编写 Http Server - Http Server

Hello World

const http = require('http')

const port = 3000

const server = http.createServer((req, res) => {
  res.end('hello')
})

server.listen(port, () => {
  console.log(`server listens on: ${port}`)
})

fc1683ba-87df-4cac-8fe5-4994952bc0c7.png JSON

const server = http.createServer((req, res) => {
  const bufs = []
  req.on('data', data => {
    bufs.push(data)'
  })
  req.on('end', () => {
    let reqData = {}
    try {
      reqData = JSON.parse(Buffer.concat(bufs).toString())
    } catch (err) {
      // receive invalid json data
    }
      res.setHeader('Content-Type', 'application/json')
      res.end(JSON.stringify({
        echo: regData.msg || 'Hello',
      }))
    })
})

a24595a1-24ce-4e10-910a-f152b2127dd0.png

编写 Http Server - Http Client

Client

const http = require('http')

const body = JSON.stringify({ msg: 'hello from my client' })

const erq = http.request('http://127.0.0.1:3000',{
    method: 'POST',
    headers: {
       'Content-Type': 'application/json',
       'Content-Length': body.length,
    },
},(res) => {
   res.on('data',data => {
       bufs.push(data)
   })
   res.on('end',() => {
       const receive = JSON.parse(Buffer.concat(bufs).toString())
       console.log('receive"',receive)
   })
})

req.end(body)

编写 Http Server - Promisify

  • 用 Promise + async await 重写这两个例子 (why)
  • 技巧: 将 callback 转换成 promise
function wait(t) {
    return new Promise((resolve,reject) => {
        setTimeout(() => {
            resolve()
        },t)
    })
}

wait(1000).then(() => { console.log('get called') })

将上面http_server_json.js进行重写

const http = require('http')



const server = http.createServer(async (req, res) => {
  // receive body from client 
  const msg = await new Promise((resolve, reject) => {
    const bufs = []
    req.on('data', (data) => {
      bufs.push(data)
    })
    req.on('error', (err) => {
      reject(err)
    })
    req.on('end', () => {
      let reqData = []
      try {
        reqData = JSON.parse(Buffer.concat(bufs).toString('utf8'))
      } catch (err) {
        // receive invalid json data 
      }
      resolve(msg)
    })
  })

  // response 
  res.setHeader('Content-Type', 'application/json')
  res.end(JSON.stringify({
    echo: reqData.msg || 'Hello'
  }))
})

const port = 3000


server.listen(port, () => {
  console.log(`listening on: ${port}`)
})

通过Promise 去重构 callback函数；
需要注意: Promise 是使用与单次调用的callback函数，不适用于多次调用的callback函数

编写 Http Server - 静态文件

编写一个简单的静态文件服务

const http = require('http')
const fs = require('fs')
const path = require('path')
const url = require('url')

const port = 3000
const server = http.createServer((req, res) => {
  const info = url.parse(req.url)
  const file = fs.createReadStream(path.resolve( dirname,+'.'+ info.pathname))
  file.pipe(res)
})

server.listen(port,() => {
  console.log(`server listens on: ${port}`)
})

stream API 就是Node.js 相关的，面试常问的问题，stream API 的好处： 内部做了一些处理，帮你占用比较少的内存空间，在这个例子数据在普通数据传输速率的问题；
比如：我们用fs.createReadStream()将整个文件传给我们的服务器，因为我们把它读了出来，这时候我们分配内存空间给文件;
比如： 有100Gb 非常极端的情况，你这个服务比如部署到阿里云的容器上，你只申请了50Gb 的内存容器，这时候你就不可能将文件给全部读到你内存里；此举会额外占用你的内存，你不得不申请更高规格的容器配置的服务需求 stream API 的好处就是它每次只会把所有数据都储存到 stream,只会按需的返回给你的client；client 消费速率高了，多接收了就可以在增stream 里面多接收一部分；读的少了，消费速率没那么高，那么我在server端不用把整个数据存到我的内存里，stream 这类API消费速率肯定会更好

与高性能、可靠的服务相比，还差什么？

  1. CDN: 缓存 + 加速
  2. 分布式储存，容灾

外部服务：cloudflare, 七牛云，阿里云，火山云...

编写Http Server -React SSR

  • SSR(server side rendering)有什么特点?

    • 相比传统 HTML 模版引擎: 避免重复编写代码
    • 相比 SPA (single page application) : 首屏染更快，SEO 友好
    • 缺点:
      • 通常 qps 较低，前端代码编写时需要考虑服务端渲染情况

  • HTML 例子

const http = require('http')

const prot = 3000

const server = http.createServer((req,res) => {
   res.setHeader('Content-Type','text/html')
   res.end(`
   <!DOCTYPE html>
   <html>
      <head>
        <title>
          My Application
        </title>
      </head>
      <body>
        <h1>Hello</h1>
        <script>alert('yes')</script>
      </body>
    </html> 
   `)
})

server.listen(port,()=> {
    console.log(`server listens on: ${port}`)
})

替换成React:

const http = require('http')
const React = require('react')
const ReactDOMServer = require('react-dom/server')
function App() {
  return React.createElement('h1',{
    children: 'Hello'
  })
}

const port = 3000
const server = http.createServer((reg, res) => {
  res.setHeader('Content-Type', 'text/html')
  res.end(`
    <!DOCTYPE html>
    <html>
    <head>
    <title>My App</title>
    </head>
    <body>
    <div id="main">
    ${ReactDOMServer.renderToString(
        React.createElement(App)
      )}
    <div>
    </body>
    </html>
`)
})


server.listen(port, () => {
  console.log(`server listens on: ${port}`)
})

SSR难点:

  1. 需要处理打包代码
require('./static/style,css')
  1. 需要考虑前端代码在服务端运行时的逻辑
async commponentDidMount() {
    const res = await fetch('http://my.server.domain')
}
  1. 移除对服务端无意义的副作用，或重置环境

编写 Http Server -Debug

  • V8 Inspector: 开箱即用、特性丰富强大、与前端开发一致、跨平
  • 场景:
    • 查看 console.log 内容
    • breakpoint
    • 高 CPU、死循环: cpuprofile
    • 高内存占用: heapsnapshot
    • 性能分析

通过node --inspect 进入页面打开 devtool 页面进行调试

演示： 8add44da-71e5-42ac-90c4-01aed448abc4.png bcfaa728-f3d6-4105-b0df-891e96c4c2af.png

967ece20-e4a5-4dc2-84ed-ed154ce54dfa.png

编写 Http Server - 部署

  • 部署要解决的问题
    • 守护进程: 当进程退出时，重新拉起
    • 多进程: cluster 便捷地利用多进程
    • 记录进程状态，用于诊断
  • 容器环境
    • 通常有健康检查的手段，只需考虑多核 cpu 利用率即可

最常见的就是PM2 的守护进程工具

延伸话题

延伸话题 - Node.js 贡献代码

  • 快速了解 Node.js 代码
  • 好处:
    • 从使用者的角色逐步理解底层细节，可以解决更复杂的问题
    • 自我证明，有助于职业发展;
    • 解决社区问题，促进社区发展
  • 难点:
    • 花时间

延伸话题 - 编译 Node.js

  • 为什么要学习编译 Node.js
    • 认知:黑盒到白盒，发生问题时能有迹可循
    • 贡献代码的第一步
  • 如何编译

延伸话题 - 诊断/ 追踪

  • 诊断是一个低频、重要同时也相当有挑战的方向。是企业衡量自己能否依赖一门语言的重要参考
  • 技术咨询行业中的热门角色
  • 难点:
    • 需要了解 Node.js 底层，需要了解操作系统以及各种工具
    • 需要经验 下载.png

延伸话题 - WASM,NAPI

  • Node.js (因为 V8) 是执行 WASM 代码的天然容器和浏览器WASM 是同一运行时，同时 Node.js 支持 WASI。
  • NAPI 执行 C 接口的代码(C/C++/Rust...)，同时能保留原生代码的性能。
  • 不同编程语言间通信的一种方案

Node.js 是一个基于 JavaScript 的开源、跨平台的服务器端运行环境。它的作用是使得 JavaScript 可以用于后端开发，可以开发出高性能、可伸缩的网络应用。

avatar
文章
阅读
粉丝