vielle.dev
forked from
pds.ls/pdsls
atproto explorer
cleanup stream component
handle.invalid
+10
-20
src/views/stream.tsx
+10
-20
src/views/stream.tsx
···
8
8
9
9
const LIMIT = 25;
10
10
type Parameter = { name: string; param: string | string[] | undefined };
11
-
enum StreamType {
12
-
JETSTREAM,
13
-
FIREHOSE,
14
-
}
15
11
16
12
const StreamView = () => {
17
13
const [searchParams, setSearchParams] = useSearchParams();
18
14
const [parameters, setParameters] = createSignal<Parameter[]>([]);
19
-
const streamType =
20
-
useLocation().pathname === "/firehose" ? StreamType.FIREHOSE : StreamType.JETSTREAM;
21
-
15
+
const streamType = useLocation().pathname === "/firehose" ? "firehose" : "jetstream";
22
16
const [records, setRecords] = createSignal<Array<any>>([]);
23
17
const [connected, setConnected] = createSignal(false);
24
-
const [allEvents, setAllEvents] = createSignal(false);
25
18
const [notice, setNotice] = createSignal("");
26
19
let socket: WebSocket;
27
20
let firehose: Firehose;
···
30
23
const connectSocket = async (formData: FormData) => {
31
24
setNotice("");
32
25
if (connected()) {
33
-
if (streamType === StreamType.JETSTREAM) socket?.close();
26
+
if (streamType === "jetstream") socket?.close();
34
27
else firehose?.close();
35
28
setConnected(false);
36
29
return;
···
38
31
setRecords([]);
39
32
40
33
let url = "";
41
-
if (streamType === StreamType.JETSTREAM) {
34
+
if (streamType === "jetstream") {
42
35
url =
43
36
formData.get("instance")?.toString() ?? "wss://jetstream1.us-east.bsky.network/subscribe";
44
37
url = url.concat("?");
···
57
50
});
58
51
59
52
const cursor = formData.get("cursor")?.toString();
60
-
if (streamType === StreamType.JETSTREAM) {
53
+
if (streamType === "jetstream") {
61
54
if (cursor?.length) url = url.concat(`cursor=${cursor}`);
62
55
if (url.endsWith("&")) url = url.slice(0, -1);
63
56
}
64
57
65
-
if (searchParams.allEvents === "on") setAllEvents(true);
66
-
67
58
setSearchParams({
68
59
instance: formData.get("instance")?.toString(),
69
60
collections: formData.get("collections")?.toString(),
···
81
72
]);
82
73
83
74
setConnected(true);
84
-
if (streamType === StreamType.JETSTREAM) {
75
+
if (streamType === "jetstream") {
85
76
socket = new WebSocket(url);
86
77
socket.addEventListener("message", (event) => {
87
78
const rec = JSON.parse(event.data);
88
-
if (allEvents() || (rec.kind !== "account" && rec.kind !== "identity"))
79
+
if (searchParams.allEvents === "on" || (rec.kind !== "account" && rec.kind !== "identity"))
89
80
setRecords(records().concat(rec).slice(-LIMIT));
90
81
});
91
82
socket.addEventListener("error", () => {
···
177
168
name="instance"
178
169
value={
179
170
searchParams.instance ??
180
-
(streamType === StreamType.JETSTREAM ?
171
+
(streamType === "jetstream" ?
181
172
"wss://jetstream1.us-east.bsky.network/subscribe"
182
173
: "wss://bsky.network")
183
174
}
184
175
class="grow"
185
176
/>
186
177
</label>
187
-
<Show when={streamType === StreamType.JETSTREAM}>
178
+
<Show when={streamType === "jetstream"}>
188
179
<label class="flex items-center justify-end gap-x-1">
189
180
<span class="min-w-[5rem]">Collections</span>
190
181
<textarea
···
196
187
/>
197
188
</label>
198
189
</Show>
199
-
<Show when={streamType === StreamType.JETSTREAM}>
190
+
<Show when={streamType === "jetstream"}>
200
191
<label class="flex items-center justify-end gap-x-1">
201
192
<span class="min-w-[5rem]">DIDs</span>
202
193
<textarea
···
217
208
class="grow"
218
209
/>
219
210
</label>
220
-
<Show when={streamType === StreamType.JETSTREAM}>
211
+
<Show when={streamType === "jetstream"}>
221
212
<div class="flex items-center justify-end gap-x-1">
222
213
<input
223
214
type="checkbox"
224
215
name="allEvents"
225
216
id="allEvents"
226
217
checked={searchParams.allEvents === "on" ? true : false}
227
-
onChange={(e) => setAllEvents(e.currentTarget.checked)}
228
218
/>
229
219
<label for="allEvents" class="select-none">
230
220
Show account and identity events