feat: add example

Related: socketio/socket.io-client#1605
socketio · Jan 26, 2024 · 8fb9f0e · 8fb9f0e
1 parent 3acd6a4
commit 8fb9f0e
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/public/index.html b/public/index.html
@@ -5,6 +5,9 @@
     <title>Socket.IO Fiddle</title>
   </head>
   <body>
+    <p>State: <span id="connection-status"></span></p>
+    <button id="connection-toggle"></button>
+
     <script src="/socket.io/socket.io.js"></script>
     <script src="/main.js"></script>
   </body>

diff --git a/public/main.js b/public/main.js
@@ -2,9 +2,13 @@
 
 (function() {
 
-  const socket = io();
+  const socket = io({
+    autoConnect: false
+  });
 
   socket.on("connect", () => {
+    statusSpan.innerText = "Connected";
+    toggleBtn.innerText = "Disconnect";
     console.log(`connect ${socket.id}`);
   });
 
@@ -13,7 +17,23 @@
   });
 
   socket.on("disconnect", (reason) => {
+    statusSpan.innerText = "Disconnected";
+    toggleBtn.innerText = "Connect";
     console.log(`disconnect due to ${reason}`);
   });
 
+  const statusSpan = document.getElementById("connection-status");
+  const toggleBtn = document.getElementById("connection-toggle");
+
+  statusSpan.innerText = "Disconnected";
+  toggleBtn.innerText = "Connect";
+
+  toggleBtn.addEventListener("click", () => {
+    if (socket.connected) {
+      socket.disconnect();
+    } else {
+      socket.connect();
+    }
+  });
+
 })();