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. Migrate to AndroidX 遇到的坑

    Androidx 迁移方法: 首先把 gradle 版本改为3.2.0以上,以及 compileSdkVersion 为28以上 然后 Android Studio 菜单栏 Refactor -> ...

  2. Unity 代码提示符和UGUI屏幕自适应

    [Header]("提示字符") Canvas Scaler  屏幕自适应

  3. [洛谷P4385][COCI2009]Dvapravca（咕咕咕）

    题目大意:很早以前做的题 题解: 卡点: C++ Code: #pragma GCC optimize("Ofast") #pragma GCC optimize("un ...

  4. C# Socket keeplive 心跳检测实例

    版权声明:本文为CSDN博主「b哈利路亚d」的原创文章,重新编辑发布,请尊重原作者的劳动成果,转载的时候附上原文链接:https://blog.csdn.net/lanwilliam/article/ ...

  5. dump net core windbg 安装

    安装 1.下载工具windbg 地址:https://www.microsoft.com/zh-cn/p/windbg-preview/9pgjgd53tn86?SilentAuth=1&rt ...

  6. 分页工具类PageResult

    1.工具类 public class PageResult implements Serializable { private Long total;//总记录数 private List rows; ...

  7. Python进阶(五)----内置函数Ⅱ 和 闭包

    Python进阶(五)----内置函数Ⅱ 和 闭包 一丶内置函数Ⅱ ####内置函数#### 特别重要,反复练习 ###print() 打印输入 #sep 设定分隔符 # end 默认是换行可以打印到 ...

  8. centos7#yum install ffmpeg

    yum install ffmpeg rpm --import http://li.nux.ro/download/nux/RPM-GPG-KEY-nux.ro rpm -Uvh http://li. ...

  9. nginx+rsync实现本地yum源以及公网yum源

    1.配置nginx的autoindex模块,开启目录浏览功能 2.使用rsync同步公网源上的软件包,至本地目录中 3.配置客户端指向即可 1.nginx提供目录浏览功能 [root@xuliangw ...

  10. js基本包装类型及Math对象(八)

    一.基本包装类型[继承于Object类型]1.Number().String().Boolean()引用数据类型[包装类型]分别对应的基本数据类型为number.string.boolean. 2.当 ...