(patch): updated example

example/index.html

@@ -73,6 +73,12 @@
         color: white;
         text-align: center;
       }
+
+      .grid {
+        display: grid;
+        gap: 1rem;
+        text-align: center;
+      }
     </style>
 
     <script>
@@ -124,5 +130,11 @@
         type="text"
         name="text" placeholder="Type anything" />
     </div>
+
+    <div class="grid ">
+      <a href="?connect=window">Connect using window</a>
+      <a href="?connect=message">Connect using MessageChannel</a>
+      <a href="?connect=broadcast">Connect using BroadcastChannel</a>
+    </div>
   </body>
 </html>

example/index.js

@@ -26,16 +26,26 @@ function htmlToDOM(htmlString) {
 }
 
 function connect() {
-  // receiver.connect(window)
-  // sender.connect(window)
-
-  // const broadcastChannel = new BroadcastChannel('rc')
-  const messageChannel = new MessageChannel()
-  receiver.connect(messageChannel.port1)
-  // receiver.connect(broadcastChannel)
-
-  sender.connect(messageChannel.port2)
-  // sender.connect(broadcastChannel)
+  const params = new URLSearchParams(window.location.search)
+  const connType = params.get('connect')
+  switch (connType) {
+    case 'message':
+      console.log('using MessageChannel')
+      const messageChannel = new MessageChannel()
+      receiver.connect(messageChannel.port1)
+      sender.connect(messageChannel.port2)
+      break
+    case 'broadcast':
+      console.log('using BroadcastChannel - open another window to connect')
+      const broadcastChannel = new BroadcastChannel('rc')
+      receiver.connect(broadcastChannel)
+      sender.connect(broadcastChannel)
+      break
+    default:
+      console.log('using window')
+      receiver.connect(window)
+      sender.connect(window)
+  }
 }
 
 async function main() {