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

记得带伞_
88 阅读6分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 7 天

R-C.jfif

课程笔记

Node.js的应用场景

常见的Node.js的应用场景有 前端工程化，Web服务端应用，Electron跨端桌面应用。

image.png

前端工程化

早期 ajax，jquery 比较流行的时候，我们直接在页面中引入需要的lib即可。后续随着模块化、transpile逐渐成熟、需求逐渐增多，对后端能力的需求也逐渐强烈。反过来说，也正是Node.js 赋予了js开发者在浏览器外运行代码的能力，加速催生了这些项目的出现。

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

Web服务端应用

第二个常见的场景是使用Node.js开发Web服务端应用，也就是后端服务，如今Node.js已经能做到传统后端语言的功能。

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

Electron跨端桌面应用

再说下Electron应用，这里不只是指electron，还包括nw.js。这个场景在较大的企业里面非常常见。

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

Node.js在字节

在字节跳动里本身就有很多基于Node.js实现的应用。

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

Node.js运行时结构

通过Node.js运行时结构的学习我们可以了解到Node.js是由什么组成的，通过这些组成我们可以了解一些Node.js本身的特点。

image.png

由上图我们可以看出像Noode.js也会使用一些社区的npm代码（如acron、node-inspect等）；
用户代码就是属于自己写的代码，通过npm安装的外部的包也会包含在用户代码里面。
Node.js内部还会有使用JavaScript来写的代码，比如Node.js中的HTTP模块就是使用JavaScript来编写的。
其实在Node.js中大部分功能的代码还是使用C++来编写的。
在Node.js的更底层还包括V8引擎、libuv、nghttp2等等。

  • V8：JavaScript Runtime，诊断调试工具(inspector)
  • libuv： eventloop(事件循环)，syscall(系统调用)

运行过程举例

举例： 用 node-fetch 发起请求

使用npm安装node-fetch模块后就可以在用户代码中调用这个node-fetch模块，这些代码都是JavaScript代码，所以会到V8去执行，node-fetch使用的是http模块，就会到Node.js Core（JavaScript）中调用http模块，http模块再去调用更加底层的C++的API，这个API可能会调用更底层的llhttp来进行http协议的序列化和反序列化，然后把得到的数据通过这个libuv调用TCP连接将数据发给远端。反过来，当远端传来数据时，在事件循环里得到这个消息，将消息里的数据再给llhttp解析出来，再将数据给JavaScript代码最后传到用户代码。

整个过程中我们看似都是用的JavaScript代码，但在底层还是使用了很多的C++代码。

特点

Node.js的特点既是它的优点也是它的缺点，主要有三个特点
异步I/O、单线程、跨平台。

异步I/O

其实在Node.js中异步的不仅是I/O，还有很多方面的功能都是异步的。下图就是一个异步I/O最简单的例子

image.png

  • 当Node.js执行I/O操作时，会在响应返回后恢复操作，而不是阻塞线程并占用额外内存等待

单线程

单线程主要是指Node.js的JavaScript线程是单线程的，所以其不太适合做一些CPU密集的操作，一个简单的体现单线程的例子就是斐波那契数列

image.png

从Node.js的12版本开始就可以使用worke_thread模块来创建一个新的独立JavaScript线程，但每个线程的模型没有太大的变化，即这些独立的线程与主线程没有太大的区别。

  • JS单线程

    • 实际：JS 线程 + uv线程池＋V8任务线程池 + V8 Inspector线程

  • 优点:不用考虑多线程状态同步问题，也就不需要锁；同时还能比较高效地利用系统资源；

  • 缺点:阻塞会产生更多负面影响

    • 解决办法：多进程或多线程

跨平台

在跨平台这点上Node.js已经帮我们做好了许多的工作，我们只需要知道调用相应API以及在各个平台上怎么处理就行。

image.png

  • Node.js跨平台 + JS无需编译环境 （+ Web跨平台 + 诊断工具跨平台）

    • 开发成本低（大部分场景无需担心跨平台问题），整体学习成本低

编写HTTP Serve

安装Node.js

  • Mac,Linux 推荐使用 nvm ，多版本管理

  • Windows 推荐 nvm4w 或是官方安装包

  • 安装慢，安装失败的情况，设置安装源

    NVM_NODEJS_ORG MIRROR=https://npmmirror.com/mirrors/node nvm install 16（阿里源）

编写HTTP Serve + Client

Hello World例子

/* Hello World */ 
const http = require('http') 

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

const port = 3000 

server.listen(port, () => {    console.log('listening on',port) })

在终端运行后 image.png

浏览器访问3000端口

image.png

浏览器可以访问到返回的 hello

JSON数据例子

/* JSON */

const http = require('http')

const server = http.createServer((req,res) => {
    const bufs = []
    req.on('data', (buf) => {
        bufs.push(buf)
    })
    req.on('end', () => {
        const buf =  Buffer.concat(bufs).toString('utf-8')
        let msg = 'Hello'

        try{
            const ret = JSON.parse(buf)
            msg = ret.msg            
        } catch(err) {
            res.end('invalid json')
        }

        const responseJson = {
            msg: `receive: ${msg}`
        }
        res.setHeader('Content-Type','application/json')
        res.end(JSON.stringify(responseJson))
    })
})

const port = 3000

server.listen(port, () => {
    console.log('listening on',port)
})

在终端中运行后

image.png

浏览器可以看到返回的json数据，如果不是json数据则返回一个“hello”

image.png

Client例子

/* Client */

const http = require('http')

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

const req = http.request('http://127.0.0.1:3000', {
    method:'POST',
    headers: {
        'Content-Type': 'application/json'
    }
}, (res) => {
    const bufs = []
    res.on('data', (buf) => {
        bufs.push(buf)
    })
    res.on('end', () => {
        const buf = Buffer.concat(bufs)
        const json = JSON.parse(buf)

        console.log('json.msg is:',json.msg)
    })
})

req.end(body)

在终端运行后可以看到server端已经接收到了client发送的数据

image.png

使用Promise重写

以上的代码使用了很多的回调函数，为了避免回调地狱的出现，使用ES6的新特性Promise + async await重写这两个例子。

这样能让我们更好的维护代码。

function wait(t){
    return new Promise(( resolve, reject)=>{
        setTimeout(() =>{
            resolve()
        }, t)
    })
}

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

编写静态文件服务器

// 编写一个简单的静态文件服务
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}`)
})

这个静态服务会接收用户发送过来的http请求，然后处理这个HTTP请求的参数（主要是url）。

编写 React SSR 服务

SSR特点

  • 相比传统HTML模版引擎:避免重复编写代码

  • 相比SPA (single page application):首屏渲染更快,SEO友好

  • 缺点:

    通常qps 较低，前端代码编写时需要考虑服务端渲染情况

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((req, res) =>{
    res.setHeader( 'Content-Type' , "text/html")
    res.end(`
        <DOCTYPE html>
        <html>
            <head>
                <titleMy App</title>
            </head>
            <body>
                <div id="main">
                ${ReactDoMServer.renderToString(
                    React.createElement(App)
                )}
                <div>
            </body
        </html>
    `)
})
server.listen(port,()=>{
    console.log(`server listens on: ${iport}`)
})

SSR难点

  • 需要处理打包代码
  • 需要思考前端代码在服务端运行时的逻辑
  • 移除对服务端无意义的副作用，或重置环境

使用 inspector 进行调试、诊断

  • V8 Inspector：开箱即用、特性丰富强大、与前端开发一致、跨平台

    • 在终端使用node时添加inspect参数

      node --inspect

    • 该参数还可以指定具体的host和port

      open http://localhost:9229/json

  • 场景:

    • 查看console.log内容breakpoint
    • 高CPU、死循环：cpuorofile
    • 高内存占用：heapsnapshot
    • 性能分析

image.png

部署简介

  • 部署要解决的问题

    • 守护进程：当进程退出时，重新拉起
    • 多进程：cluster便捷地利用多进程
    • 记录进程状态，用于诊断

  • 容器环境

    • 通常有健康检查的手段，只需考虑多核cpu利用率即可

总结

通过本次课程大致对Node.js有了一定的了解，刚入门Node.js还有很多不明白和不理解的地方，自己还需多加实践才能对这个技术有更好的理解。

avatar
文章
阅读
粉丝