javascript / intermediate
Snippet
Streaming und Visualisierung binärer Datensätze mittels reaktiver Uint8Array-Slices
Die Verarbeitung hochfrequenter Binärdaten wie Audiostreams oder Sensortelemetrie erfordert typisierte Array-Views auf zusammenhängenden Speicherpuffern. Durch das Halten des ArrayBuffers in einer reaktiven Referenz und das Nachverfolgen von Byte-Offsets können Komponenten effiziente Subarrays (Uint8Array) berechnen, ohne Speicherblöcke kopieren zu müssen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { ref, computed } from 'vue';export function useBinaryStream(bufferCapacity = 256) {const rawBuffer = ref(new ArrayBuffer(bufferCapacity));const byteLength = ref(0);const uint8View = computed(() => new Uint8Array(rawBuffer.value, 0, byteLength.value));function appendChunk(chunk: Uint8Array): void {const available = bufferCapacity - byteLength.value;const copyLength = Math.min(available, chunk.byteLength);const targetView = new Uint8Array(rawBuffer.value);targetView.set(chunk.subarray(0, copyLength), byteLength.value);byteLength.value += copyLength;}function reset(): void {new Uint8Array(rawBuffer.value).fill(0);byteLength.value = 0;}return { uint8View, byteLength, appendChunk, reset };}
vue
Erklärung
1
const rawBuffer = ref(new ArrayBuffer(bufferCapacity));
Allokiert einen zusammenhängenden binären Speicherpuffer fester Größe in einer reaktiven Vue-Referenz.
2
const uint8View = computed(() => new Uint8Array(rawBuffer.value, 0, byteLength.value));
Berechnet eine typisierte Array-View auf den gültigen Byte-Bereich ohne Speicherduplikation.
3
targetView.set(chunk.subarray(0, copyLength), byteLength.value);
Kopiert die Bytes des eingehenden Slices an den aktuellen Offset-Index des Zielpuffers.
4
new Uint8Array(rawBuffer.value).fill(0);
Überschreibt alle Bytes des zugrunde liegenden Puffers beim Zurücksetzen mit Nullen.