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

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

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");
  }
}

ChatGPT - Server Sent Events SSE

Here's the code:

event3.tsx

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

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");
  }
}

ChatGPT - Server Sent Events SSE

ChatGPT - Server Sent Events SSE

Similar Threads

Similar Threads

Similar Threads