使用rrweb 进行web 操作录制以及回放
2024-09-05 23:55:58
rrweb 是使用typescript 开发的web 操作录制以及回放框架,包含了比较完整的系统组件
- rrweb-snapshot 进行dom 与操作实践的关联处理
- rrweb 主要包含了
record
以及replay
- rrweb-player rrweb 的UI 提供了方便的基于UI的操作,比如暂停,时间段选择
简单使用
使用docker-compose 运行,同时使用openresty提供了一个简单的rest api(就是request 以及response没有具体的存储操作)
- docker-compose 文件
version: "3"
services:
app:
image: openresty/openresty:alpine-fat
ports:
- "8080:8080"
volumes:
- "./nginx_lua/:/opt/app/"
- "./index.html:/usr/local/openresty/nginx/html/index.html"
- "./nginx.conf:/usr/local/openresty/nginx/conf/nginx.conf"
- nginx.conf 配置
worker_processes 1;
user root;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
root html;
gzip on;
lua_package_path '/opt/app/?.lua;;';
lua_code_cache off;
lua_need_request_body on;
real_ip_header X-Forwarded-For;
real_ip_recursive on;
server {
listen 8080;
server_name localhost;
charset utf-8;
ssi on;
default_type text/html;
location / {
index index.html index.html;
}
location /api {
content_by_lua_block {
require("api/api")()
}
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
- 基于openresty 的简单api
nginx_lua/api/api.lua 文件
-- 很简单就是获取request body,后边的处理就可以有好多方法了
local json = require("cjson")
function init()
ngx.req.read_body()
local body = ngx.req.get_body_data()
if not body then
if ngx.req.get_body_file() then
return nil, "request body did not fit into client body buffer, consider raising 'client_body_buffer_size'"
else
return ""
end
end
local res = {
code = 1,
message ="ok"
}
ngx.log(ngx.ERR, body)
ngx.say(json.encode(res))
end
return init
- 集成rrweb 的index.html 页面
代码很简单,就是点击
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>rrweb demo web site</title>
<script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js"></script>
<script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/record/rrweb-record.min.js"></script>
<link rel="stylesheet" crossorigin="anonymous"
href="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css" />
<script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js"></script>
</head>
<body>
<h1 class="some-title">this is some title for test</h1>
<input type="button" value="record action" onclick="record()" />
<br />
<input type="button" value="replay action" onclick="replay()" />
<div id="replaycontent">
</div>
<script>
window.events = [];
function record() {
rrweb.record({
emit(event) {
// 将 event 存入 events 数组中
events.push(event);
},
});
}
function replay() {
new rrwebPlayer({
target: document.getElementById("replaycontent"), // 可以自定义 DOM 元素
data: {
events,
},
});
}
// save 函数用于将 events 发送至后端存入,并重置 events 数组
function save() {
const body = JSON.stringify(window.events);
events = [];
fetch("http://localhost:8080/api", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body,
});
}
// 每 10 秒调用一次 save 方法,避免请求过多
setInterval(save, 10 * 1000);
</script>
</body>
</html>
启动&&试用
- 启动
docker-compose up -d
- 效果
说明
从目前的使用上还有莫名有一个奇怪的bug,但是还是一个不错的开源方案,很值得学习使用下
参考资料
https://github.com/rrweb-io/rrweb
https://www.rrweb.io/
https://github.com/rongfengliang/rrweb-basic-learning
最新文章
- IIS与Apache共用80端口
- it小小鸟
- luogg_java学习_04_数组
- [LintCode] Binary Tree Paths 二叉树路径
- The main concepts
- VS.net中快捷键收缩和展开代码段
- JAVA类型擦除
- Shell 读取用户输入
- 删除外部dwg中指定的块定义
- 模拟stringBeanFactory解析xml
- 为什么23种设计模式没有 MVC
- 多核CPU配合负载均衡可以这样用,为老板省点钱
- Python - requests https请求的坑
- Win10 安装 digits
- C# Directory.GetFiles()获取多个类型格式的文件
- socket 995 错误 boost
- 高并发分布式系统中生成全局唯一(订单号)Id js返回上一页并刷新、返回上一页、自动刷新页面 父页面操作嵌套iframe子页面的HTML标签元素 .net判断System.Data.DataRow中是否包含某列 .Net使用system.Security.Cryptography.RNGCryptoServiceProvider类与System.Random类生成随机数
- FFmpeg(8)-打开音视频解码器,配置解码器上下文(avcodec_find_decoder()、avcodec_alloc_context3())
- Linux IO模型
- 银行业务-Excel文件的拆分逻辑
热门文章
- [python 2.x] xml.etree.ElementTree module
- 配置安全web服务
- bootstrap-paginator + ajax 实现动态翻页功能
- 解决fiddler不能抓取firefox浏览器包的问题(转)
- mysql 删除表中多余的重复记录
- WPF 的命令的自动刷新时机——当你 CanExecute 会返回 true 但命令依旧不可用时可能是这些原因
- 1、C#多线程基础理论
- 阿里巴巴 Java 开发手册(三): 代码格式
- win10系统驱动备份及还原
- 一个超实用的python爬虫功能使用 requests BeautifulSoup