首页 > 编程语言 >Node.js 与前端开发实战

Node.js 与前端开发实战

时间:2023-08-01 10:25:46浏览次数:42  
标签:Node http res server port const js 前端开发

0x1 Node.js 的应用场景

  1. 前端工程化
    • 打包工具:webpack、vite、esbuild、parce
    • 代码压缩:uglifyjs
    • 语法转换:babeljs,typescript
    • 难以替代
  2. Web 服务端应用
    • 学习曲线平缓,开发效率较高
    • 运行效率接近常见的编程语言
    • 社区生态丰富及工具链成熟(npm)
    • 与前端结合的场景会有优势(SSR)
    • 竞争激烈
  3. Electron 跨端桌面应用
    • 商业应用:vscode、slack、discord、zoom
    • 大型公司内的效率工具
    • 值得考虑

0x2 Node.js 运行时结构

  1. V8、libuv

    • V8:JavaScript Runtime,诊断调试工具(inspector)
    • libuv:eventloop(事件循环)、syscall(系统调用)
  2. 特点

    1. 异步 I/O

      setTimeout(() => {
          console.log('B');
      });
      console.log('A');
      
      • 当 Node.js 执行 I/O 操作时,会在响应后恢复操作,而非阻塞线程,并占用额外内存等待

      举例:在执行读取文件功能readFile()时,执行fs.readFile()方法后,会将方法的请求异步调用至 Node 中处理的同时,继续执行其他调用,并在执行该功能回调前,将 Node 的处理结果返回回来,从而完成异步 I/O

    2. 单线程

      function fibonacci(num: number): number{
          if(num == 1 || num == 2)
              return 1;
          return fibonacci(num - 1) + fibonacci(num - 2);
      }
      
      fibonacci(2)
      fibonacci(3)
      
      • JS 单线程
        • 实际情况:JS 线程+uv 线程+V8 任务线程池+V8 Inspector 线程
      • 优点
        • 不用考虑多线程状态同步问题,不需要锁
        • 比较高效地利用系统资源
      • 缺点
        • 阻塞会产生更多负面影响
    3. 跨平台

      const net = require('net');
      const socket = new net.Socket('/tmp/scoket.sock')
      
      • Node.js 跨平台+JS 无需编译环境(+Web 跨平台+诊断工具跨平台)=开发和整体学习成本低

0x3 编写 Http Server

  1. 安装 Node.js

    推荐使用 nvm 安装 Node.js,可以有效解决跨版本问题(Windows 系统使用 nvm4w)

  2. 编写 Http Server + Client,进行收发 GET、POST 请求

    1. Http Server

      项目:Hello World

      /* filename:server.js */
      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}`)
      })
      
      /* filename:jsonServer.js */
      const http = require('http');
      const port = 3000;
      
      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: reqData.msg || 'Hello',
              }))
          })
      })
      server.listen(port, () => {
          console.log(`server listens on: ${port}`)
      })
      
  3. 编写静态文件服务器

    const http = require('http')
    const fs = require('fs')
    const path = require('path')
    const url = reuqire('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}`)
    })
    
  4. 编写 React SSR 服务

    • SSR(Server Side Rendering) 特点
      • 相比传统 HTML 模板引擎,可以避免重复编写代码
      • 相比 SPA(Single Page Application),可以更快渲染首屏,对 SEO(Search Engine Optimization) 友好
      • 缺点:通常 qps 较低,编写代码时需要考虑服务端渲染情况

    举例:

    HTML:

    const http = require('http')
    const port = 3000
    const server = http.createServer((req, res) => {
        res.setHeader('Content-Type', 'text/html')
        res.end(`
        <!DOCTYPE html>
        <html>
        	<head>
        		<title>Title</title>
        	</head>
        	<body>
        		<p>Content</p>
        	</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('p', {
            children: 'Hello'
        })
    }
    const port = 3000
    const server = http.createServer((req, res) => {
        res.setHeader('Content-Type', 'text/html')
        res.end(`
        <!DOCTYPE html>
        <html>
        	<head>
        		<title>Title</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')

      2. 需要思考前端代码在服务端运行时的逻辑

        async componentDidMount() {
            const res = await fetch('http://my.server.domain')
        }
        
      3. 移除对服务端无意义的副作用,或重置环境

  5. 适用 Inspector 进行调试、诊断

    • V8 Inspector
      • node --inspect
      • open http://localhost:9229/json
    • 场景
      • 查看console.log()内容
      • 断点
      • 高 CPU、死循环:cpuprofile
      • 高内存占用:heapasnapshot
      • 性能分析
  6. 部署

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

0x4 延申

  1. Node.js 贡献代码

    • 好处
      • 理解底层细节
      • 自我证明
      • 解决社区问题
    • 难点
      • 费时
  2. 编译 Node.js

    • 从认知角度:发生问题时能有迹可循
    • 是贡献代码的第一步
    • 如何编译
      • ./config && make install
  3. 诊断 / 追踪

    • 诊断

      • 低频但重要,充满挑战性的方向
      • 利于企业衡量是否可依赖某种语言的重要参考
    • 难点

      • 需要理解 Node.js 底层、操作系统以及各种工具

      • 需要经验

  4. WASM、NAPI

    • WASM:WebAssembly
    • NAPI:NewAPI

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

-End-

标签:Node,http,res,server,port,const,js,前端开发
From: https://www.cnblogs.com/SRIGT/p/17595715.html

相关文章

  • Next.js 实战
    0x1CSR,SSR,SSGCSR客户端渲染(Client-SideRendering)。常见B端Web应用开发模式,前后端分离,服务器压力相对更轻,渲染工作在客户端进行,服务器直接返回不加工的HTML用户在后续访问操作缺点:首屏时间长SSR服务端渲染(Server-SideRendering)。JSP/PHP已经体现了服务器端渲染,......
  • Android上基于JSON的数据交互应用
    JSON的定义:一种轻量级的数据交换格式,具有良好的可读和便于快速编写的特性。业内主流技术为其提供了完整的解决方案(有点类似于正则表达式,获得了当今大部分语言的支持),从而可以在不同平台间进行数据交换。JSON采用兼容性很高的文本格式,同时也具备类似于C语言体系的行为。–Json.org......
  • android网络通讯数据封装之 json
    Demo程序包括客户端和服务端客户端按json数据格式封装数据传至服务端。服务端为简单的servlet程序,负责接收客户端传到json数据,然后按原数据返回客户端.实例代码如下:publicstaticStringcmdLogIn(){StringurlString="http://192.168.8.75:89/webroot/jsontest";HttpPo......
  • JSONP前端流程
    JSONP前端流程JSONP总体思路后端先给前端一个接口文档。如https://www.baidu.com/sugrec?prod=pc&wd=用户输入的文字&cb=后端要调用的前端定义的全局函数名。前端会封装一个jsonp函数:它的作用是传入特定参数,返回一个Promise实例。会用jsonp的方式来请求后端数据,把后端......
  • [SWPUCTF 2022 新生赛]js_sign
    [SWPUCTF2022新生赛]js_sign题目来源:nssctf题目类型:web涉及考点:JS分析1.题目给了一个传入口,不管传入什么都回显‘fuckoff’查看源代码:看到一个base64编码,先解码看看:2.搜了下发现tapcode是个编码方式,于是对flag进行tapcode解码把它构造成flag的形式即可:NS......
  • node js版本管理工具---NVM
    一、前言nvm(NodeVersionManager)是一个node的版本管理工具,可以快捷的进行node版本的安装、切换、卸载、查看等。它能够在项目开发中根据不同需求轻松切换所依赖不同版本的Node.js,从而让开发者可以在不同的环境之间进行切换,从而更好地保证软件的稳定性运行。二、安装1、linux或......
  • JS截取url中?后面的参数值的两种方法
    方法一:例如:得到的url varurl=window.location.href;varquerys=url.substring(url.indexOf('?')+1).split('&');varresult=[];for(vari=0;i<querys.length;i++){vartemp=querys[i].split('=');if(temp.le......
  • js日期格式化的两种方法
    1.当我们想先获取当前的时间时,这是第一种方法特别简单:返回格式 ThuJul28202215:04:32GMT+0800(中国标准时间)newdateNow=newDate();//ThuJul28202215:04:32GMT+0800(中国标准时间)科普下时间的时分秒及星期:date.getYear();//获取当......
  • 递归获取嵌套json 的所有key及value值
    importjsonclassGet_Dict_All_Keyvalue: """递归获取多维嵌套字典所有层级的key和value""" def__init__(self,analysis_dict): #判断类型,如果是str的需要进行loads处理 self.res_dict={} self.key_name_set=set() #self.key_name_unique=True ......
  • 记录--一个好用的轮子 turn.js 实现仿真翻书的效果
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助国际惯例,官网链接官网传送门Github地址github上有几个demos例子,介绍了基础用法。 我参考官网的例子,写了一个demo示例 安装turn.js依赖jquery库,所以需要先安装jquerynpminstalljquery--save引......