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

使用rrweb 进行web 操作录制以及回放的更多相关文章

  1. rrweb 用户操作录制和还原

    rrweb 用户操作录制和还原 demos https://www.rrweb.io/replay refs https://www.rrweb.io/ xgqfrms 2012-2020 www.c ...

  2. Linux下script命令录制、回放和共享终端操作script -t 2> timing.log -a output.session # 开始录制

    Linux下script命令录制.回放和共享终端操作 [日期:2018-09-04] 来源:cnblogs.com/f-ck-need-u  作者:骏马金龙 [字体:大 中 小]   另一篇终端会话共 ...

  3. Fms3和Flex打造在线视频录制和回放

    本博推荐文章快速导航: Sql Server2005 Transact-SQL 新兵器学习MCAD学习 代码阅读总结 ASP.NET状态管理 DB(数据库)WAPWinFormFlex,Fms aie ...

  4. LoadRunner11web压力测试录制、回放、负载前的准备

    以前都是利用LoadRunner进行接口测试.自动化测试.压力测试.最近要对web系统做录制压测,因此花费了很长时间来研究这方面的工作.以下是我web端录制.压测过程的流程以及遇到的坑. 一.启动Vi ...

  5. monkeyrunner之录制与回放（七）

    monkeyrunner为我们提供了录制 回放的功能. 录制与回放使用原因:实际项目,需求变更频繁,且测试任务多,我们没有足够时间去写测试脚本,这是就可以进行录制脚本,然后通过回放,跑完需要的流程. ...

  6. Android自动化学习笔记之MonkeyRunner：MonkeyRunner的录制和回放

    ---------------------------------------------------------------------------------------------------- ...

  7. Unity-Animator深入系列---录制与回放

    回到 Animator深入系列总目录 Animator自带了简单的动画录制,回放功能.但可惜的是不支持持久化的数据输出.因而不能作为录像保存 不过这种可以作为竞速,格斗类游戏在结束时经常出现的游戏回放 ...

  8. Linux下利用script命令录制并回放终端会话

    Linux下利用script命令录制并回放终端会话 核心命令 script 和 scriptreplay 录制屏幕 script -t 2>timescript typescript 命令解释: ...

  9. Monkeyrunner 录制脚本&回放

    本文主要解释如何使用monkeyrunner来实现脚本的录制和回放 一:准备条件 在电脑端配置 Android SDK环境   java 环境 下载好 SDK后添加环境变量   E:\android- ...

随机推荐

  1. LOJ #3103. 「JSOI2019」节日庆典

    题意 给定字符串 \(S\) ,对于 \(S\) 的每个前缀 \(T\) 求 \(T\) 所有循环同构串的字典序最小的串,输出其起始下标.(如有多个输出最靠前的) \(|S| \le 3 \times ...

  2. nginx+lua访问流量实时上报kafka

    在nginx这一层,接收到访问请求的时候,就把请求的流量上报发送给kafka storm才能去消费kafka中的实时的访问日志,然后去进行缓存热数据的统计 从lua脚本直接创建一个kafka prod ...

  3. sqoop与hbase导入导出数据

    环境:sqoop1.4.6+hadoop2.6+hbase1.1+mysql5.7 说明: 1.文中的导入导出的表结构借鉴了网上的某篇博客 2.mysql导入hbase可以直接通过sqoop进行 3. ...

  4. 阿里巴巴 Java 开发手册 (八) 注释规约

    1. [强制]类.类属性.类方法的注释必须使用 Javadoc 规范,使用/**内容*/格式,不得使用 //xxx 方式. 说明:在 IDE 编辑窗口中,Javadoc 方式会提示相关注释,生成 Ja ...

  5. .NET core Quartz 定时任务框架 demo

    开始先建个空的web项目. 创建一个新类 QuartzFactory 狠狠的复制就完事了. public class QuartzFactory : IJobFactory { private rea ...

  6. mysql-多表联查(实例)

    目录 多表查询 笛卡尔积查询 内连接查询 左外连接查询 右外连接查询 全外连接查询 多表查询 笛卡尔积查询 笛卡尔积查询:就是两张表相乘,若左边表有M条信息,右边表有N条信息,那么查询显示的信息总共为 ...

  7. 换个语言学一下 Golang （8）——指针

    定义 所谓指针其实你可以把它想像成一个箭头,这个箭头指向(存储)一个变量的地址. 因为这个箭头本身也需要变量来存储,所以也叫做指针变量. Go的指针不支持那些乱七八糟的指针移位.它就表示一个变量的地址 ...

  8. Mysql中use filesort的误区

    误区一字面误区 use filesort排序,字面上理解是外部排序. 误区二人云亦云 百度上多被大家否定不是外部排序,认为和file这个关键字没关系.用的是快速排序.但是总觉得不可能这么无缘无故叫fi ...

  9. 【转】Flex 布局教程：语法篇

    作者: 阮一峰 日期: 2015年7月10日 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + floa ...

  10. Linux内核同步机制之completion

    内核编程中常见的一种模式是,在当前线程之外初始化某个活动,然后等待该活动的结束.这个活动可能是,创建一个新的内核线程或者新的用户空间进程.对一个已有进程的某个请求,或者某种类型的硬件动作,等等.在这种 ...