# rrweb

**Repository Path**: d_james/rrweb

## Basic Information

- **Project Name**: rrweb
- **Description**: rrweb：打开 web 页面录制与回放的黑盒子
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2021-08-03
- **Last Updated**: 2022-05-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# web页面录制与回放全栈小项目

> `你越是认真生活，你的生活就会越美好`——弗兰克·劳埃德·莱特
[《人生果实》经典语录](https://blog.csdn.net/weixin_42752574/article/details/104722252?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160510553219725255502073%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=160510553219725255502073&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v1~rank_blog_v1-1-104722252.pc_v1_rank_blog_v1&utm_term=%E4%BA%BA%E7%94%9F%E6%9E%9C%E5%AE%9E&spm=1018.2118.3001.4450)


## 技术栈
**前端**

`Vue`

**后端**

`Node Egg`

**数据库**

`mongo`

**录制与回访实现**

`rrweb  websocket`

## 相关文档
[rrweb：打开 web 页面录制与回放的黑盒子 rrweb - GitHub](https://zhuanlan.zhihu.com/p/60639266)

[rrweb中文文档](https://github.com/rrweb-io/rrweb/blob/master/README.zh_CN.md)

[rrweb使用指南](https://github.com/rrweb-io/rrweb/blob/master/guide.zh_CN.md)

[WebSocket - 网络通信协议](https://blog.csdn.net/weixin_42752574/article/details/113279388?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522161409381716780266215860%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=161409381716780266215860&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v1~rank_blog_v1-1-113279388.pc_v1_rank_blog_v1&utm_term=websocket)

[MongoDB 常用命令汇总](https://blog.csdn.net/weixin_42752574/article/details/111938743?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522161409384816780261934656%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=161409384816780261934656&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v1~rank_blog_v1-3-111938743.pc_v1_rank_blog_v1&utm_term=mongo)


[egg-websocket-plugin](ttps://github.com/flarestart/egg-websocket-plugin)  node里这个插件没引入成功，后面改用ws

## 项目代码
[web页面录制与回放全栈小项目代码仓库](https://gitee.com/WebJianHong/rrweb)
拉一下仓库，跟着`README.md文档`操作，本地安装一下依赖，就可以跑起来

## 项目效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210223233711876.gif)


## 本地启动
### 前端
项目路径

`rrweb/rrweb-web`

安装依赖

`npm install`

或者

`yarn`

跑服务

`npm run serve`

或者

`yarn serve`

### 后端node
项目路径

`rrweb/rrweb-node`

安装依赖

`npm install`

或者

`yarn`

启动服务

`npm run start`

或者

`yarn start`

停止服务

`npn run stop`


或者 

`yarn stop`


------------

```谢谢你阅读到了最后~```
```期待你关注、收藏、评论、点赞~```
`让我们一起 变得更强`


## 推荐阅读
[Vue源码学习完整目录](https://blog.csdn.net/weixin_42752574/article/details/105526570?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160655194619195265196320%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=160655194619195265196320&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v1~rank_blog_v1-1-105526570.pc_v1_rank_blog_v1&utm_term=vue%E6%BA%90%E7%A0%81&spm=1018.2118.3001.4450)