rrweb是一款对网页操作过程进行记录和回放的插件-BFW插件库

rrweb是一款对网页操作过程进行记录和回放的插件

rrweb是一款对网页操作过程进行记录和回放的插件，其原理就是将dom树的操作过程通过json数据来记录下来。rrweb适用场景：

用户行为分析；

远程debug；

录制操作；

实时协作；

使用方式：

第一步引插件

第二步录制

// rrweb行为录制
let events = [];
rrweb.record({
    emit(event) {
        // 用任意方式存储 event
        console.log(event);
        events.push(event);     
    },
});

这里的events就是一个json数据记录dom树的更改过程。这个events可以通过json序列后传给给后端保存。

三我们来回放过程。

new rrwebPlayer({
arget: document.body, // 可以自定义 DOM 元素
data: {
events,
},
});

完整代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/rrweb.min.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/rrweb-player.css">
    <style>
        #playIfrm {
          height: 400px;
          border: 1px solid;
        }
    </style>



</head>

<body>
    <button id="btnRecord">Record</button>
    <button id="btnPlay">Play</button>
    <button id="btnSave">Save</button>

    <form>
        <div>
            <label>名称</label>
            <input type="text">
        </div>
        <div>
            <label>年龄</label>
            <input type="number">
        </div>
        <div>
            <label>类型</label>
            <select>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
        </div>
        <div>
            <label>文件</label>
            <input type="file" />
        </div>
    </form>

    <div id="playIfrm2"></div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/rrweb.min.js"></script>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/rrweb-player.js"></script>
    <script>
        let timer,currentTime = 0,replayer,playState = 0;
        const loopTimer = () => {
          stopTimer();
          function update() {
            const meta = replayer.getMetaData();debugger;
            currentTime = replayer.getCurrentTime();
            if (currentTime < meta.totalTime) {
              timer = requestAnimationFrame(update);
            }
          }
          timer = requestAnimationFrame(update);
        };
        const stopTimer = () => {
          if (timer) {
            cancelAnimationFrame(timer);
            currentTime = 0;
            timer = null;
          }
        };
        const recordBtn = document.getElementById('btnRecord');
        
          const savedBtn = document.getElementById('btnSave');
        // We use a two-dimensional array to store multiple events array
        let events = [];
        let stopFn = null;
         savedBtn.addEventListener('click', function () {
             const body = JSON.stringify({ events });
             console.log(body);
        });
    
        recordBtn.addEventListener('click', function () {
          if (stopFn) {
            stopFn();
            stopFn = null;
            recordBtn.innerText = 'Record';
            playState = 0;
            return;
          }
          recordBtn.innerText = 'Stop';
          events = [];
          stopFn = rrweb.record({
            emit(event, isCheckout) {
              events.push(event);
            } });
        
        });
   
        const playBtn = document.getElementById('btnPlay');
        playBtn.addEventListener('click', function () {
            new rrwebPlayer({
						target:  document.getElementById('playIfrm2') , // 可以自定义 DOM 元素
						data: {
					    	events,
					  	},
					});
         
          
          

        });
    </script>



</body>

</html>

github地址：https://github.com/rrweb-io/rrweb