Commiting example Pusher client with private channels

2019-09-30 15:48:55 +02:00 · 2019-09-30 15:48:55 +02:00 · bff90358f3
commit bff90358f3
1 changed files with 90 additions and 0 deletions
--- a/www/html/index.html
+++ b/www/html/index.html
@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Pusher Test</title>
+  </head>
+  <body>
+    <h1>Pusher Test</h1>
+    <p>
+      <form onSubmit="submit">
+        <input type="text" required name="token" placeholder="Paste your vibitno api auth token"
+          value="eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjFiMWY5NWE1NmZhNTQ0ZDYyODYzZWFhNmE4N2FhMDA1MjQzMzIzM2RkOGIwOTNlY2MwZTJjMDEzZmU1OTA0NTg1YjFmODRmZWE4OTY5MTRjIn0.eyJhdWQiOiI1IiwianRpIjoiMWIxZjk1YTU2ZmE1NDRkNjI4NjNlYWE2YTg3YWEwMDUyNDMzMjMzZGQ4YjA5M2VjYzBlMmMwMTNmZTU5MDQ1ODViMWY4NGZlYTg5NjkxNGMiLCJpYXQiOjE1NjkwMTYyMzksIm5iZiI6MTU2OTAxNjIzOSwiZXhwIjoxNjAwNjM4NjM5LCJzdWIiOiIyMjYiLCJzY29wZXMiOltdfQ.Z5nLzRLOXuL8A5pMGKvOoMyMmaJz4tH1rwTkopXFtREaZhRyd7gZ7tv6FyC2HFQqGleOcw023GyeyuMZHk9sK37_XxxDZRKSyKbIjHSQxuktD1HOHyN9nu38i4uSaTf5MLvbrq1ImO4JYzd2vF4nfMNM2Q-Wyc-4ctfWpIjFyn8zTxWHmlR7xrODVevxQ5VI-4YjOX-N_VaQTGC8IXvqojmbCj-hk-pu826xkIdgn_VM3N6nZWLEXppe8QXbRiVj2YSmtf__K_XJr3ESiTyzvC8U9lmIRwcrjMyWZOSR1pp0KvIVqe4BMdTkGhnzoXuJoauopICQZYxuexPOt7X59SHv5FsBWfsupahWM89avVui00oILT9f5WW_QcMsp2UFB_EWTUvTL3xxgyXcuNWt-odJFYYl3B5UeKQhhFqiqbelvvWld-vKvQfwvTQgAjRo4rB2VGdNp0RoQPuAFY6DxhJNhi3uL-yjiDKBTVXS1t7DeFTUTnf9lTN8jMwfbg8a5qDYFg67tf1ruKzEoUZj9GOwcgw7pT5ExzEzuVlvW3oVCXWrlrN2hymMg5MFJxepCTpUVxO4RlEMhdObperG4GAWmSxyTP3nZQezFY-R-PvlTqgYX3n1vZUmQDg65JiLefCS-d5OQZ5fDiCAlamw9iSJsl_feO1XN4D4l0CChYs"
+        />
+        <button type="submit">
+          Connect
+        </button>
+      </form>
+    </p>
+    <script src="https://js.pusher.com/5.0/pusher.min.js"></script>
+    <script>
+      const apiServerAddr = 'api.vibitno.io';
+      // const apiServerAddr = 'vibitno-api.xeen.dev';
+      const userEndpoint = `https://${apiServerAddr}/api/user`;
+      const authEndpoint = `https://${apiServerAddr}/api/broadcasting/auth`;
+      const pusherInfo = {
+        appKey: 'd23c11c08060681b4785',
+      };
+
+      /*
+      ()(userInfo, pusherInfo.appKey);
+      */
+      (function (form) {
+        function connect(userInfo, pusherKeyId) {
+          // Message types
+          const messageAvailable = 'message-available';
+          const messageUpdated = 'message-updated';
+          const newUserOnboarded = 'new-user';
+          const subscriptionSucceeded = 'pusher:subscription_succeeded';
+
+          // Channel Names
+          const accountChannelName = `private-account-${userInfo.accountId}`;
+          const userChannelName = `private-user-${userInfo.userId}`;
+
+          // Enable pusher logging - don't include this in production
+          Pusher.logToConsole = true;
+
+          const pusher = new Pusher(pusherKeyId, {
+            cluster: 'mt1',
+            forceTLS: true,
+            authEndpoint,
+            auth: {
+              headers: {
+                'Authorization': `Bearer ${userInfo.accessToken}`,
+              },
+            },
+          });
+
+          // Subscribe to account-wide events
+          const accountChannel = pusher.subscribe(accountChannelName);
+          accountChannel.bind(subscriptionSucceeded, () => console.log('account sub ok'));
+          accountChannel.bind(newUserOnboarded, ({ userId, userName }) => alert(`New User: ${userName}`));
+
+          // Subscribe to user-specific events
+          const userChannel = pusher.subscribe(userChannelName);
+          userChannel.bind(messageAvailable, ({ messageId }) => alert(`New message with Id: ${messageId}`));
+          userChannel.bind(subscriptionSucceeded, () => console.log('user sub ok'));
+        }
+        function fetchUserInfo(token) {
+          return fetch(userEndpoint, { headers: { 'Authorization': `Bearer ${token}` } })
+            .then(response => response.json())
+            .then(userInfo => ({
+              userId: userInfo.id,
+              accountId: userInfo.accounts[0].id,
+              accessToken: token,
+            }));
+        }
+        function submit(ev) {
+          ev.preventDefault();
+          const form = ev.target;
+          const token = form.querySelector('[type=text]').value;
+          fetchUserInfo(token)
+            .then(userInfo => connect(userInfo, pusherInfo.appKey));
+
+          form.parentNode.removeChild(form);
+        }
+
+        form.addEventListener('submit', submit);
+      })(document.querySelector('form'));
+    </script>
+  </body>
+</html>