added websocket example

mallpopstar · Aug 9, 2023 · 4b3b953 · 4b3b953
1 parent 0609556
commit 4b3b953
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 7 deletions.
diff --git a/.github/workflows/deploy-spa.yml b/.github/workflows/deploy-spa.yml
@@ -41,7 +41,7 @@ jobs:
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v1
         with:
-          path: './example'
+          path: './examples'
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v1
diff --git a/README.md b/README.md
@@ -110,7 +110,7 @@ sender.connect(channel)
 const documentSender = createDocumentSender(sender)
 
 documentSender.subscribe('form', 'submit', req => {
-  console.log('form submitted:', res)
+  console.log('form submitted:', req)
 }, { preventDefault: true })
 ```
 
@@ -137,11 +137,11 @@ npm run dev
 
 ## Roadmap
 
-- Better Documentation (right now, use examples in [src/main.ts](src/main.ts))
-- Intercept errors and reporting them (Think [LogRocket](https://logrocket.com/))
-- Example using WebSocket
-- Example using WebRTC
-- Example using Custom Channel - Connecting to a server
+- [ ] Better Documentation (right now, use examples in [src/main.ts](src/main.ts))
+- [ ] Intercept errors and reporting them (Think [LogRocket](https://logrocket.com/))
+- [X] Example using WebSocket (see [examples/websocket](examples/websocket))
+- [ ] Example using WebRTC
+- [ ] Example using Custom Channel 
 
 ## Alternatives to Remote Control
 

diff --git a/example/index.html → examples/index.html b/example/index.html → examples/index.html
diff --git a/example/index.js → examples/index.js b/example/index.js → examples/index.js
diff --git a/examples/websocket/index.html b/examples/websocket/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>WebSocket Example</title>
+    <script src="https://unpkg.com/@mallpopstar/partyline@latest/dist/partyline.min.js"></script>
+    <script src="https://unpkg.com/@mallpopstar/rc@latest/dist/rc.min.js"></script>
+  </head>
+  <body>
+    <form>
+      <input type="text" name="name" />
+      <input type="submit" value="Submit" />
+    </form>
+
+    <script>
+      const { createReceiver, createSender } = partyline
+      const { createDocumentReceiver, createDocumentSender } = remotecontrol
+      const subscribers = new Map()
+
+      const receiver = createReceiver()
+      receiver.connect(window)
+      createDocumentReceiver(receiver).start()
+
+      const sender = createSender()
+      sender.connect(window)
+      const documentSender = createDocumentSender(sender)
+
+      // Connect to web socket
+      const socket = new WebSocket('ws://localhost:8000')
+
+      socket.addEventListener('open', () => {
+        console.log('Connected to server')
+      })
+
+      socket.addEventListener('message', evt => {
+        const { type, selector, event } = JSON.parse(evt.data)
+        if (type === 'subscribe') {
+          const unsub = documentSender.subscribe(
+            selector,
+            event,
+            req => {
+              socket.send(JSON.stringify(req))
+            },
+            { preventDefault: true }
+          )
+          subscribers.set(`${selector}:${event}`, unsub)
+        } else if (type === 'unsubscribe') {
+          console.log('Unsubscribing', selector, event)
+          const unsub = subscribers.get(`${selector}:${event}`)
+          if(unsub) unsub()
+        } else {
+          console.log('Unknown message type', type)
+        }
+      })
+    </script>
+  </body>
+</html>
diff --git a/examples/websocket/server.ts b/examples/websocket/server.ts
@@ -0,0 +1,22 @@
+// deno run --allow-net server.ts
+Deno.serve(req => {
+  if (req.headers.get('upgrade') !== 'websocket') {
+    return new Response(null, { status: 501 })
+  }
+
+  const { socket, response } = Deno.upgradeWebSocket(req)
+  socket.addEventListener('open', () => {
+    console.log('a client connected!')
+    socket.send(JSON.stringify({ type: 'subscribe', selector: 'form', event: 'submit' }))
+  })
+
+  socket.addEventListener('message', event => {
+    const payload = JSON.parse(event.data)
+    console.log(payload)
+    if(payload.body.selector === 'form' && payload.body.type === 'submit') {
+      console.log('unsubscribing from form')
+      socket.send(JSON.stringify({ type: 'unsubscribe', selector: 'form', event: 'submit' }))
+    }
+  })
+  return response
+})