尼采般地抒情

公告栏

此网站主题为本人手写主题, 主题待开源···

站点信息

文章总数目: 297
已运行时间: 955

文章分类

目录
  1. cnpm+淘宝镜像
  2. nodemon 模块
  3. gulp 模块
  4. cross-env 模块
  5. sharedb 模块
  6. sharedb-mongo 模块
  7. uuid 模块
  8. nanoid 模块生成随机路径
  9. mkdirp
  10. ws 模块
    1. 服务端
    2. 客户端
    3. Buffer类型转换

尼采般地抒情

尼采般地抒情

公告栏

此网站主题为本人手写主题, 主题待开源···

站点信息

文章总数目: 297
已运行时间: 955

第三方模块的两种存在形式:

  1. 以js文件的形式存在,提供实现项目具体功能的API接口。

比如使用jQuery,html中引入CDN超链接即可使用。

  1. 以命令行工具形式存在,辅助项目开发。

比如VUE-CLI工具。

npm是用来管理模块的一个node工具,它会伴随着node的下载而一同下载。


node生态的繁荣多益于很多优秀的三方模块的存在,具体可以查看 NoderSurvey 2021 年度报告 的相关统计与调研。在此记录一下在学习以及实际开发过程中自己所学习到的三方模块,特别地,express三方模块是一个web应用框架,需要学习的点较多,单独拿出来详细学习。

cnpm+淘宝镜像

因为npm是处于国外的服务器,下载模块有时候可能会较慢,特别是文件比较多的模块。以下是临时使用淘宝镜像下载的命令。

npm --registry https://registry.npm.taobao.org install

如果不想改变npm源,也可以直接使用cnpm(推荐)

// 安装cnpm命令,不会改变npm的源

npm install -g cnpm --registry=https://registry.npm.taobao.org

//使用
cnpm install

//查看源,可以看到设置过的所有的源
npm config get registry

nodemon 模块

cnpm install nodemon –g

作用:在开发过程中,修改了文件,控制台命令行就会根据文件的修改自动运行

使用方法:将运行命令中的 node 换成 nodemon

gulp 模块

基于 node 平台开发的前端构建工具,将机械化操作编写成任务,想要执行机械化操作时执行一个命令行命令任务就能自动执行了,用机器代替手工,提高开发效率。

具体的还有 webpack,后续继续学习。


作用:

  • 项目上线,HTML、CSS、JS 文件压缩合并
  • 语法转换(es6、less ...)
  • 公共文件抽离
  • 修改文件浏览器自动刷新


glup 本身提供的 api 函数很少,官网到目前更新只有下面几个,具体使用方法,使用的时候去查


gulp 生态也有很多插件,根据插件下载相应需要的功能插件

  • gulp-htmlmin :html 文件压缩
  • gulp-csso :压缩 css
  • gulp-babel :JavaScript 语法转化
  • gulp-less: less 语法转化
  • gulp-uglify :压缩混淆 JavaScript
  • gulp-file-include 公共文件包含
  • browsersync 浏览器实时同步

cross-env 模块

windows 不支持 NODE_ENV=development 的设置方式

所以使用该模块来进行跨平台地使用环境变量,兼容各平台使用

sharedb 模块

ShareDB 是一个整合了前后端的 OT 框架,可以很方便地自行搭建服务端和客户端。框架基于 Node.JS 实现。


OT(Operational transformation)是一种支持高级协作软件系统中的一系列协作功能的技术。OT 最初是为了在纯文本文档的协作编辑中实现一致性维护和并发控制而发明的。它的功能已得到扩展,其应用程序已扩展至包括组撤消、锁定、冲突解决、操作通知和压缩、组感知、HTML/XML 和树状结构文档编辑、协作办公生产力工具、应用程序共享和协作计算机- 辅助媒体设计工具。[1] 2009 年,OT 被采用为 Apache Wave 协作功能背后的核心技术和谷歌文档。

sharedb-mongo 模块

uuid 模块

生成唯一的一个字符串

  • v3:基于名字的 用相同的名字,会生成相同的 uuid 出来

npm 的 node-uuid 和 uuid

  • 官网配置教程:https://editor.aomao.com/zh-CN/config/ot
  • 运行方式:将ot-server文件夹复制到项目根目录,将其处于运行状态,然后再运行主项目(localhost 实质上就是指向 127.0.0.1 这个本地 IP 地址。)

nanoid 模块生成随机路径

因为 uuid 生成的字符串太长,不便于作为 url 路径使用,所以使用 nanoid 来作为随机 url 路径

mkdirp

const mkdirp = require('mkdirp')

// return value is a Promise resolving to the first directory created
mkdirp('/tmp/foo/bar/baz').then(made =>
console.log(`made directories, starting with ${made}`))

ws 模块

ws(GitHub 地址)是 Node.js 的 npm 实现,以便在项目中使用。

什么是 WebSocket?

WebSocket 是一个长连接,客户端可以给服务端发送消息,服务端也可以给客户端发送消息,两者频繁的发送消息,全双工通信模式。

参考:https://blog.csdn.net/LiMubai_CN/article/details/81844156

服务端

const ws = require('ws')

// 创建一个 WebSocket 服务器,监听的是 30002 端口
const webSocketServer = new ws.Server({
port: 30002,
});

// 监听的是 WebSocket 服务开始监听的事件
webSocketServer.on('listening', (socket) => {
console.log('服务端连接成功');
});

// 监听的是 WebSocket 服务被客户端连接上的事件
webSocketServer.on('connection', (socket, req) => {

socket.on('message', (data) => {
console.log('收到来自客户端的消息: ', data.toString('utf8'));
// 如果客户端发送的数据为 from_client_sended 服务端会关闭当前连接
if (data.toString('utf8') === 'from_client_sended') {
socket.close(); // 异步 微任务类型
// console.log('判断 socket.close 语句是否为微任务类型')
setTimeout(() => {
console.log('----------------------')
webSocketServer.close();
}, 3000);
}
});

// 监听的是,服务端收到了客户端关闭连接的事件,由客户端发起的关闭
socket.on('close', (code, reason) => {
console.log('服务端关闭',code, reason);
});

// 监听的是,WebSocket 通信过程中出错的事件
socket.on('error', (error) => {
console.log('服务端出错:', error);
});

socket.send('服务端发送的消息+');

});

客户端

const ws = require('ws')

// 创建 WebSocket 客户端,连接的是本机的 30002 的 WebSocket 服务
const webSocketClient = new ws('ws://127.0.0.1:30002');

// 监听的是 客户端获知 WebSocket 连接成功后的事件
webSocketClient.on('open', () => {
console.log('客户端连接成功');
});

webSocketClient.on('message', (data) => {
// 客户端收到了来自服务端的消息 需要转义
console.log('收到来自服务端的消息: %s', data);
console.log('3 秒后主动给服务端发送消息')
setTimeout(() => {
// 客户端给服务端发送消息
webSocketClient.send('from_client_sended');
}, 3000);
});

// 监听的是 通信过程中出错的事件
webSocketClient.on('error', (error) => {
console.log('客户端出现错误', error);
});

// 监听的是 WebSocket 连接被关闭的事件,由服务端发起的关闭
webSocketClient.on('close', () => {
console.log('客户端关闭');
});

Buffer类型转换

ws send发送的数据类型是Buffer类型的(比如client发送给server)如下,server接收到的Buffer数据会影响处理

<Buffer 63 6c 69 65 6e 74 5f 73 65 6e 64 65 64>

评论区

Twikoo giscus

最新评论

Loading...