Afterlifepro/jetstream.html

## jetstream.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Firehose Test</title>
    <script type="module" async>
      const starter = document.getElementById("starter");
      const closer = document.getElementById("closer");
      const ws = new WebSocket(
        "wss://jetstream2.us-west.bsky.network/subscribe"
      );

      closer.addEventListener("click", () => {
        ws.close();
      });

      starter.addEventListener("click", () => {
        const docFH = document.getElementById("firehose");

        ws.onmessage = async (event) => {
          const data = JSON.parse(event.data);

          if (
            data.commit &&
            data.commit.operation === "create" &&
            [
              "app.bsky.feed.post",
              "app.bsky.feed.like",
              "app.bsky.graph.follow",
              "app.bsky.feed.repost",
              "app.bsky.actor.profile",
            ].includes(data.commit.collection)
          ) {
            console.log(data);
            try {
              docFH.innerHTML =
                `<tr data-collection="${
                  data.commit.collection
                }"><td style="font-family: monospace">${data.did}</td> <td>${
                  data.commit.collection === "app.bsky.feed.post"
                    ? data.commit.record.text
                    : data.commit.collection === "app.bsky.feed.like"
                    ? `❤️ ${data.commit.record.subject.uri}`
                    : data.commit.collection === "app.bsky.graph.follow"
                    ? `🫂 ${data.commit.record.subject}`
                    : data.commit.collection === "app.bsky.feed.repost"
                    ? `🔄 ${data.commit.record.subject.uri}`
                    : data.commit.collection === "app.bsky.actor.profile"
                    ? `🥳 Joined!`
                    : JSON.stringify(data.commit)
                }</td></tr>` + docFH.innerHTML;
            } catch (e) {
              console.log(e, data);
            }
          } else console.log(data);
        };
      });
    </script>

    <style>
      * {
        font-family: sans-serif;
      }

      tr {
        display: none;
      }
      #post:checked ~ table tr[data-collection="app.bsky.feed.post"] {
        display: block;
      }
      #repost:checked ~ table tr[data-collection="app.bsky.feed.repost"] {
        display: block;
      }
      #like:checked ~ table tr[data-collection="app.bsky.feed.like"] {
        display: block;
      }
      #follow:checked ~ table tr[data-collection="app.bsky.graph.follow"] {
        display: block;
      }
      #profile:checked ~ table tr[data-collection="app.bsky.actor.profile"] {
        display: block;
      }
    </style>
  </head>
  <body>
    <input type="checkbox" checked id="post" /><label for="post">Posts</label>
    <input type="checkbox" id="repost" /><label for="repost">Reposts</label>
    <input type="checkbox" id="like" /><label for="like">Likes</label>
    <input type="checkbox" id="follow" /><label for="follow">Follows</label>
    <input type="checkbox" id="acct" /><label for="acct">New Account</label>
    <br />
    <button id="starter">START CONNECTION</button>
    <button id="closer">CLOSE CONNECTION</button>
    <table>
      <tbody id="firehose"></tbody>
    </table>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Firehose Test</title>
	<script type="module" async>
	const starter = document.getElementById("starter");
	const closer = document.getElementById("closer");
	const ws = new WebSocket(
	"wss://jetstream2.us-west.bsky.network/subscribe"
	);

	closer.addEventListener("click", () => {
	ws.close();
	});

	starter.addEventListener("click", () => {
	const docFH = document.getElementById("firehose");

	ws.onmessage = async (event) => {
	const data = JSON.parse(event.data);

	if (
	data.commit &&
	data.commit.operation === "create" &&
	[
	"app.bsky.feed.post",
	"app.bsky.feed.like",
	"app.bsky.graph.follow",
	"app.bsky.feed.repost",
	"app.bsky.actor.profile",
	].includes(data.commit.collection)
	) {
	console.log(data);
	try {
	docFH.innerHTML =
	`<tr data-collection="${
	data.commit.collection
	}"><td style="font-family: monospace">${data.did}</td> <td>${
	data.commit.collection === "app.bsky.feed.post"
	? data.commit.record.text
	: data.commit.collection === "app.bsky.feed.like"
	? `❤️ ${data.commit.record.subject.uri}`
	: data.commit.collection === "app.bsky.graph.follow"
	? `🫂 ${data.commit.record.subject}`
	: data.commit.collection === "app.bsky.feed.repost"
	? `🔄 ${data.commit.record.subject.uri}`
	: data.commit.collection === "app.bsky.actor.profile"
	? `🥳 Joined!`
	: JSON.stringify(data.commit)
	}</td></tr>` + docFH.innerHTML;
	} catch (e) {
	console.log(e, data);
	}
	} else console.log(data);
	};
	});
	</script>

	<style>
	* {
	font-family: sans-serif;
	}

	tr {
	display: none;
	}
	#post:checked ~ table tr[data-collection="app.bsky.feed.post"] {
	display: block;
	}
	#repost:checked ~ table tr[data-collection="app.bsky.feed.repost"] {
	display: block;
	}
	#like:checked ~ table tr[data-collection="app.bsky.feed.like"] {
	display: block;
	}
	#follow:checked ~ table tr[data-collection="app.bsky.graph.follow"] {
	display: block;
	}
	#profile:checked ~ table tr[data-collection="app.bsky.actor.profile"] {
	display: block;
	}
	</style>
	</head>
	<body>
	<input type="checkbox" checked id="post" /><label for="post">Posts</label>
	<input type="checkbox" id="repost" /><label for="repost">Reposts</label>
	<input type="checkbox" id="like" /><label for="like">Likes</label>
	<input type="checkbox" id="follow" /><label for="follow">Follows</label>
	<input type="checkbox" id="acct" /><label for="acct">New Account</label>
	<br />
	<button id="starter">START CONNECTION</button>
	<button id="closer">CLOSE CONNECTION</button>
	<table>
	<tbody id="firehose"></tbody>
	</table>
	</body>
	</html>