javascript - 我们如何保存记录的数据并使用rrweb再次回放？

Question

我正在将 rrweb 与 vue.js 一起使用，其中我遇到了一个问题，即当我记录数据并再次播放时它可以正常工作。但其中我想先保存数据，然后播放录制的项目。我有这样的数据:

rrweb(){
            let vm = this;
            let stopFn = rrweb.record({
                emit(event) {
                    if (vm.events.length > 200) {
                        vm.count = vm.count + 1;
                        stopFn();
                        vm.play()
                    }
                    // recording
                    vm.events.push(event)
                }
            })
        },
        play(){
            let vm = this;
            if(vm.count==1){
                new rrwebPlayer({
                    target: document.getElementById('replay'), // customizable root element
                    data: {
                        events: vm.events,
                        autoPlay: true,
                    },
                });
                vm.save(vm.events);
            }
            else{
                console.log('else statement');
            }
        },
        save(events) {
            const body = JSON.stringify({ events });
            // console.log(body);
            events = [];
            fetch('deadend/getrrbData', {
                method: 'POST',
                headers: {
                'Content-Type': 'application/json',
                },
                body,
            });
        }

首先我调用 rrweb 以及通过它调用的其他函数。但我对如何在我们这边保存数据然后再次播放感到困惑。链接供您引用。

https://github.com/rrweb-io/rrweb

https://gitlab.com/lbennett/vue-rrweb

Answer 1

1. 确保您的端点工作正常，除非您设置“deadend/getrrbData”以不泄露您的端点。使用 then 回调进行 fetch 的引用链接: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
2. 还有一点要提的是，由于 rrweb record 返回一个停止录制的函数，我不知道您是否能够播放录制的事件，因为您在停止录制事件后调用了 vm.play。
3. 除了 POST url 端点之外，我确实没有发现您的代码存在任何潜在问题，请检查此帖子获取请求示例

   // Example POST method implementation:
   
   try {
     const data = await postData('http://example.com/answer', { answer: 42 });
     console.log(JSON.stringify(data)); // JSON-string from `response.json()` call
   } catch (error) {
     console.error(error);
   }
   
   async function postData(url = '', data = {}) {
     // Default options are marked with *
     const response = await fetch(url, {
       method: 'POST', // *GET, POST, PUT, DELETE, etc.
       mode: 'cors', // no-cors, *cors, same-origin
       cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
       credentials: 'same-origin', // include, *same-origin, omit
       headers: {
         'Content-Type': 'application/json'
         // 'Content-Type': 'application/x-www-form-urlencoded',
       },
       redirect: 'follow', // manual, *follow, error
       referrer: 'no-referrer', // no-referrer, *client
       body: JSON.stringify(data) // body data type must match "Content-Type" header
     });
     return await response.json(); // parses JSON response into native JavaScript objects
   }

发送帖子请求后重播

您可以使用在 POST 正文中发送的相同事件

祝你好运!