forked from
pds.ls/pdsls
atmosphere explorer
batch update during relay streaming
+29
-6
+29
-6
src/views/stream.tsx
+29
-6
src/views/stream.tsx
···
19
19
let socket: WebSocket;
20
20
let firehose: Firehose;
21
21
let formRef!: HTMLFormElement;
22
+
let pendingRecords: any[] = [];
23
+
let rafId: number | null = null;
24
+
25
+
const addRecord = (record: any) => {
26
+
pendingRecords.push(record);
27
+
if (rafId === null) {
28
+
rafId = requestAnimationFrame(() => {
29
+
setRecords(records().concat(pendingRecords).slice(-LIMIT));
30
+
pendingRecords = [];
31
+
rafId = null;
32
+
});
33
+
}
34
+
};
22
35
23
36
const connectSocket = async (formData: FormData) => {
24
37
setNotice("");
25
38
if (connected()) {
26
39
if (streamType === "jetstream") socket?.close();
27
40
else firehose?.close();
41
+
if (rafId !== null) {
42
+
cancelAnimationFrame(rafId);
43
+
rafId = null;
44
+
}
45
+
pendingRecords = [];
28
46
setConnected(false);
29
47
return;
30
48
}
···
79
97
socket.addEventListener("message", (event) => {
80
98
const rec = JSON.parse(event.data);
81
99
if (searchParams.allEvents === "on" || (rec.kind !== "account" && rec.kind !== "identity"))
82
-
setRecords(records().concat(rec).slice(-LIMIT));
100
+
addRecord(rec);
83
101
});
84
102
socket.addEventListener("error", () => {
85
103
setNotice("Connection error");
···
105
123
since: commit.since,
106
124
op: op,
107
125
};
108
-
setRecords(records().concat(record).slice(-LIMIT));
126
+
addRecord(record);
109
127
}
110
128
});
111
129
firehose.on("identity", (identity) => {
112
-
setRecords(records().concat(identity).slice(-LIMIT));
130
+
addRecord(identity);
113
131
});
114
132
firehose.on("account", (account) => {
115
-
setRecords(records().concat(account).slice(-LIMIT));
133
+
addRecord(account);
116
134
});
117
135
firehose.on("sync", (sync) => {
118
136
const event = {
···
122
140
seq: sync.seq,
123
141
time: sync.time,
124
142
};
125
-
setRecords(records().concat(event).slice(-LIMIT));
143
+
addRecord(event);
126
144
});
127
145
firehose.start();
128
146
}
···
139
157
if (searchParams.instance) connectSocket(formData);
140
158
});
141
159
142
-
onCleanup(() => socket?.close());
160
+
onCleanup(() => {
161
+
socket?.close();
162
+
if (rafId !== null) {
163
+
cancelAnimationFrame(rafId);
164
+
}
165
+
});
143
166
144
167
return (
145
168
<div class="flex w-full flex-col items-center">