Theo's Typesafe Cult•2y ago

ChatGPT - Server Sent Events SSE

Hi y'all, I'm trying to replicate ChatGPT using their less powerful GPT3 apis. It turns out ChatGPT is doing SSE under the hood so that you don't get 10+ seconds of nothing on screen. But I couldn't quite figure out how to do the 'typing animation', aka GPT's message updating on screen as it comes in. Mine only shows the final message, which kinda defeats the purpose. Any help is appreciated 🙏 Here's the code: event3.tsx:

export const Event3 = () => {
  const [source, setSource] = useState<EventSource | null>(null);
  const [isConnected, setIsConnected] = useState(false);
  const [data, setData] = useState("");

  const handleConnect = () => {
    setSource(new EventSource("http://localhost:3000/api/event3"));
    setIsConnected(true);
  };
  const handleDisconnect = () => {
    if (source) {
      source.close();
      setIsConnected(false);
    }
  };

  useEffect(() => {
    if (source) {
      source.onmessage = (event) => {
        setData(`${data} ${event.data}`);
      };
      source.onerror = (event) => {
        console.log(event);
        setIsConnected(false);
      };
      return () => {
        source.close();
      };
    }
  }, [source]);

  return (
    <>
      <div className="">{data}</div>
      <button className="" onClick={isConnected ? handleDisconnect : handleConnect}>
        {isConnected ? "Disconnect" : "Connect"}
      </button>
      {isConnected ? <div>Con</div> : <div>Dis</div>}
    </>
  );
};

export const Event3 = () => {
  const [source, setSource] = useState<EventSource | null>(null);
  const [isConnected, setIsConnected] = useState(false);
  const [data, setData] = useState("");

  const handleConnect = () => {
    setSource(new EventSource("http://localhost:3000/api/event3"));
    setIsConnected(true);
  };
  const handleDisconnect = () => {
    if (source) {
      source.close();
      setIsConnected(false);
    }
  };

  useEffect(() => {
    if (source) {
      source.onmessage = (event) => {
        setData(`${data} ${event.data}`);
      };
      source.onerror = (event) => {
        console.log(event);
        setIsConnected(false);
      };
      return () => {
        source.close();
      };
    }
  }, [source]);

  return (
    <>
      <div className="">{data}</div>
      <button className="" onClick={isConnected ? handleDisconnect : handleConnect}>
        {isConnected ? "Disconnect" : "Connect"}
      </button>
      {isConnected ? <div>Con</div> : <div>Dis</div>}
    </>
  );
};

event3.ts:

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  res.writeHead(200, {
    Connection: "keep-alive",
    "Cache-Control": "no-cache, no-transform",
    "Content-Encoding": "none",
    "Content-Type": "text/event-stream",
  });

  for (let i = 1; i <= 2000; i += 1) {
    const val = Math.random();
    res.write("data: " + i + " " + val + "\n\n");
  }
}

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  res.writeHead(200, {
    Connection: "keep-alive",
    "Cache-Control": "no-cache, no-transform",
    "Content-Encoding": "none",
    "Content-Type": "text/event-stream",
  });

  for (let i = 1; i <= 2000; i += 1) {
    const val = Math.random();
    res.write("data: " + i + " " + val + "\n\n");
  }
}

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

ChatGPT - Server Sent Events SSE