如果我使用RxJS或类似的内容（例如，marble图）观察到的视频流：
----1------2------3--4---|
如何将其序列化为NDJSON之类的格式，以便将其保存在数据库中？保存后，如何将其重构为可观察的？
对于上下文，我想捕获DOM中的用户操作流（例如鼠标拖动等），然后在稍后的时间完全与用户最初执行操作时相同地重放它们。
如何对可观察到的JS进行序列化/反序列化？
•
问答
zhoujiemy 回答：如何对可观察到的JS进行序列化/反序列化？
如果时间很重要，则可能需要将时间值与事件本身一起存储。
小POC：
import { fromEvent,Observable,of,timer } from "rxjs";
import {
map,tap,mergeMap,concatMap,takeUntil,mapTo
} from "rxjs/operators";
let latestCache: Array<{ time: number; event: MouseEvent }>;
fromEvent(document.getElementById("start-cache"),"click")
.pipe(
concatMap(() => {
const source = fromEvent(window,"mousemove").pipe(
tap((x: MouseEvent) => console.log(x.clientX,x.clientY)),takeUntil(timer(1000)),store( newCache => (latestCache = newCache))
);
function store(
onCacheCreated: (
cache: Array<{ time: number; event: MouseEvent }>
) => void
) {
const cache = [];
let lastTime = Date.now();
return tap({
next: (x: MouseEvent) => {
cache.push({ time: Date.now() - lastTime,event: x });
lastTime = Date.now();
},complete: () => onCacheCreated(cache)
});
}
return source;
})
)
.subscribe();
fromEvent(document.getElementById("replay-cache"),"click")
.pipe(
concatMap(() => {
if (!latestCache) {
console.error("no cache yet");
}
return of(...latestCache).pipe(
concatMap(x => timer(x.time).pipe(mapTo(x.event))),tap((x: MouseEvent) => console.log(x.clientX,x.clientY))
);
})
)
.subscribe();
<h1>RxJS playground</h1>
<p>Open the console below to see results</p>
<button id="start-cache">Start Cache </button>
<button id="replay-cache">Replay Cache </button>
https://stackblitz.com/edit/rxjs-vxwurq?file=index.ts
从这里开始，您可以使用onCacheCreated函数存储所需的数组。