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. Windows 编译安装 nginx 服务器 + rtmp 模块

    有关博客: <Windows 编译安装 nginx 服务器 + rtmp 模块>.<Ubuntu 编译安装 nginx>.<Arm-Linux 移植 Nginx> ...

  2. ubuntu 安装和配置 GitLab

    一.概述 GitLab 是一个基于 Web 的开源 Git 软件仓库管理器,用 Ruby 编写,包括 wiki,问题管理,代码审查,监控以及持续集成和部署.它使开发人员能够创建,审查和部署他们的项目. ...

  3. Scala 系列（三）—— 流程控制语句

    一.条件表达式if Scala 中的 if/else 语法结构与 Java 中的一样,唯一不同的是,Scala 中的 if 表达式是有返回值的. object ScalaApp extends App ...

  4. MySQL数据库之互联网常用架构方案

    一.数据库架构原则 高可用 高性能 一致性 扩展性 二.常见的架构方案 方案一:主备架构,只有主库提供读写服务,备库冗余作故障转移用 jdbc:mysql://vip:3306/xxdb 高可用分析: ...

  5. vue学习(1) vue-cli 项目搭建

    vue学习(1)  vue-cli 项目搭建 一.windows环境 1. 下载node.js安装包 官网:https://nodejs.org/en/download/ 选择LTS下载 2. 安装 ...

  6. AppDir【创建缓存目录】【建议使用这个工具类】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 创建缓存目录 public static String APP_CACHE = "";// /storage/e ...

  7. scrapy爬虫中间件-urlLength

    浏览器里面能输入的最大url是有限制的 safari 最多 一万多 ie最少  2083 urllength中间件源码 谷歌和火狐正常 八千多 """ Url Lengt ...

  8. JavaScript 解决 url 中的中文乱码问题

    页面传值过程中,通过 url 传值,发现中文会乱码. 以下是解决方法: 1.传的页面: encodeURI(url + "?userName=" + userName); //en ...

  9. Github 上 36 个最实用的 Vue 开源库

    任何一个开发者,都是十分喜欢使用开源软件包的.因为它使开发工作变得更快速.高效.容易.如果没有开源软件包,开发工作将变得疲惫不堪,不断的重复造轮子! 下面整理了 Github 上 36 个实用的 Vu ...

  10. linux服务器中安装VSCode

    Centos7系统 步骤:在linux系统中安装VSCode(Visual Studio Code) 1.从官网下载压缩包访问Visual Studio Code官网 https://code.vis ...