Bluesky - Firehose Websocket Example for ReactJS

BlueskyFirehoseExample.tsx

import React, { useEffect, useRef } from "react";

const FireHoseExample = () => {
  const firehoseSocket = useRef<WebSocket | null>(null);

  useEffect(() => {
    firehoseSocket.current = new WebSocket(
      "wss://jetstream2.us-east.bsky.network/subscribe?wantedCollections=app.bsky.feed.post"
    );

    if (firehoseSocket.current)
      firehoseSocket.current.onmessage = (event) => {
        // console.log("event", event.data);
        try {
          const data = JSON.parse(event.data);

          const post = data.commit.record;
          // Get text from the post (might be undefined)
          const text = post.text;
          console.log("text", text);

          // Get image from the post
          const hasImages =
            post.embed?.$type && post.embed.$type == "app.bsky.embed.images";
          const images = hasImages ? post.embed?.images : [];
          hasImages && console.log("images", images);
        } catch (error) {
          console.log("Couldnt parse data", error);
        }
      };

    return () => {
      firehoseSocket.current.close();
    };
  }, []);

  return <></>;
};