From 21ed11b2fd64ccd1aad34baf9918dea6cbd9fe2a Mon Sep 17 00:00:00 2001
From: nerdchanii <nerdchanii@gmail.com>
Date: Fri, 29 May 2026 10:34:08 +0900
Subject: [PATCH] docs: gate getting started send until open

---
 docs/public/index.md | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/docs/public/index.md b/docs/public/index.md
index 9af005b..8c3d051 100644
--- a/docs/public/index.md
+++ b/docs/public/index.md
@@ -36,17 +36,22 @@ type ChatSchema = {
   };
 };
 
-function ChatMessages() {
+function ChatMessages({ canSend }: { canSend: boolean }) {
   const [messages, sendTalk] = useSocket<ChatSchema, "talk">("talk");
 
   return (
-    <button type="button" onClick={() => sendTalk("hello")}>
+    <button
+      type="button"
+      disabled={!canSend}
+      onClick={() => sendTalk("hello")}
+    >
       Messages: {messages.length}
     </button>
   );
 }
 
 export function ChatBoundary() {
+  const [canSend, setCanSend] = useState(false);
   const [store, setStore] = useState<ISocketStore<ChatSchema> | null>(null);
 
   useEffect(() => {
@@ -59,9 +64,13 @@ export function ChatBoundary() {
       ),
     ]) as unknown as ISocketStore<ChatSchema>;
 
+    socket.addEventListener("open", () => setCanSend(true));
+    socket.addEventListener("close", () => setCanSend(false));
+
     setStore(nextStore);
 
     return () => {
+      setCanSend(false);
       socket.close();
     };
   }, []);
@@ -72,7 +81,7 @@ export function ChatBoundary() {
 
   return (
     <SocketProvider store={store}>
-      <ChatMessages />
+      <ChatMessages canSend={canSend} />
     </SocketProvider>
   );
 }