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. T100 GR 报表常见知识点 (含套版制作)

    轉載至赫非域 > T100 GR 报表常见知识点 前端操作 bron1984 7小时前 5浏览 0评论 8.9.1 注意事项 字体: 如果字型没选对,会造成没设对字型的数据汇出 PDF 格式乱掉 ...

  2. Oracle数据库Schema的简介

    百度文库中 Schema 的解释: 数据库中的Schema,为数据库对象的集合,一个用户一般对应一个schema. 官方定义如下: A schema is a collection of databa ...

  3. 《JAVA高并发编程详解》-七种单例模式

  4. Visual Studio 2019 XAML Hot Reload功能介绍

    Visual Studio 2019提供了XAML Hot Reload功能,这个功能可以让WPF程序运行以后仍然可以修改XAML代码,并实时显示. XAML Hot Reload功能在Blend F ...

  5. vs配置opencv（只需一次）

    一.配置环境变量(bin) 二.配置属性表 1.配置包含(include)目录 2.配置库(lib)目录 3.配置依赖项(.lib)

  6. win10下jupyter修改默认路径的办法

    查了很多资料,发现都不管用,最后亲测找到一种方法. 实现的方法就是修改快捷方式标签的目标栏,如下图: 后面有一个%USERPROFILE% 将%USERPROFILE%改成你要的路径就可以了 然后应用 ...

  7. json_rpc_2 implementation

    https://stackoverflow.com/questions/52670255/flutter-json-rpc-2-implementation import 'dart:convert' ...

  8. iOS之集成GoogleMap定位、搜索注意事项

    简介: 最近花了些时间看了GoogleMap官方文件并集成到国际版app中,网上关于GoogleMap for iOS的讲解相对Android来说少一点,比较有帮助的几乎全是英文文档.下面是我开发过程 ...

  9. sublime中Vue高亮插件安装

    1.准备语法高亮插件vue-syntax-highlight. 下载地址: https://github.com/vuejs/vue-syntax-highlight 下载页面并下载: 解开压缩包vu ...

  10. js事件(十二)

    一.事件三要素1.事件目标[谁触发的该事件(引起该事件触发的源头:target)]2.事件处理程序[处理相应事件的函数]3.事件对象[触发事件产生的携带事件信息的对象] 二.事件流[从页面中接受事件的 ...