ably · tbedford · Feb 18, 2021 · Feb 18, 2021 · Feb 18, 2021 · Feb 18, 2021
diff --git a/index.html b/index.html
@@ -0,0 +1,29 @@
+<html>
+
+<head>
+    <title>** Inband Channel Occupancy Events **</title>
+    <script src="https://cdn.ably.io/lib/ably.min-1.js" crossorigin="anonymous"></script>
+</head>
+
+<body style="padding: 60px; font-family:Arial, Helvetica, sans-serif; text-align: center;">
+    Ably Inband Channel Occupancy Events - Demo
+    <br/>
+    <br/>
+    <div style="text-align: center; padding: 10px;">
+        <button style="padding: 5px; width: 150px" id="add-publisher-instance" onclick="addPublisherInstance()">Add publisher instance</button>
+        <button style="padding: 5px; width: 150px" id="add-subscriber-instance" onclick="addSubscriberInstance()">Add subscriber instance</button>
+    </div>
+    <div style="text-align: center; padding: 10px;">
+        <button style="padding: 5px; width: 150px" id="add-publisher-instance-presence" onclick="addPublisherInstanceWithPresence()">Add publisher instance and enter presence</button>
+        <button style="padding: 5px; width: 150px" id="add-subscriber-instance-presence" onclick="addSubscriberInstanceWithPresence()">Add subscriber instance and enter presence</button>
+    </div>
+    <div>
+        <br>
+        <textarea id="result" rows="30" style="width: 100%; margin-top: 10px; font-family: courier, courier new; background-color: #333; color: orange;  overflow-y: scroll;"
+            disabled>
+        </textarea>
+    </div>
+    <script src="main.js"></script>
+</body>
+
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,94 @@
+const apiKey = '<YOUR_ABLY_KEY>'
+const ably = new Ably.Realtime({
+    key: apiKey,
+})
+
+const regularChannelName = 'channel-' + Math.random().toString(36).substr(2, 16)
+const channelOpts = { params: { occupancy: 'metrics' } }
+const channel = ably.channels.get(regularChannelName, channelOpts)
+const resultArea = document.getElementById('result')
+resultArea.scrollTop = resultArea.scrollHeight
+
+function localLog(msg) {
+    const logDate = new Date().toLocaleTimeString()
+    const template = `\n\n[LOCAL LOG - ${logDate}] - ${msg}\n`
+    resultArea.value += template
+    console.log(msg)
+}
+
+function logData(channelName, metrics) {
+    const logDate = new Date().toLocaleTimeString()
+    const prompt = `\n\n[METADATA - ${logDate}] - Occupancy on channel ${channelName} has been updated: \n`
+    const template = `Connections: ${metrics.connections}
+Publishers: ${metrics.publishers}
+Subscribers: ${metrics.subscribers}
+Presence Connections: ${metrics.presenceConnections}
+Presence Members: ${metrics.presenceMembers}
+Presence Subscribers: ${metrics.presenceSubscribers}`
+
+    return prompt + template
+}
+
+channel.subscribe('[meta]occupancy', (msg) => {
+    const occupancyMetrics = msg.data.metrics
+    if (occupancyMetrics && msg.name.includes('[meta]')) {
+        resultArea.value += logData(regularChannelName, occupancyMetrics)
+        resultArea.scrollTop = resultArea.scrollHeight
+    }
+})
+
+function addPublisherInstance() {
+    const str = 'Adding new publisher instance'
+    localLog(str)
+    const ably = new Ably.Realtime({
+        key: apiKey,
+    })
+    const regularChannel = ably.channels.get(regularChannelName)
+    regularChannel.publish('test-data', {
+        data: 'Dummy Data',
+        time: Date.now(),
+    })
+}
+
+function addSubscriberInstance() {
+    const str = 'Adding new subscriber instance'
+    localLog(str)
+    const ably = new Ably.Realtime({
+        key: apiKey,
+    })
+    const regularChannel = ably.channels.get(regularChannelName)
+    regularChannel.subscribe('test-data', (data) => {
+        console.log('Subscription working')
+    })
+}
+
+function addPublisherInstanceWithPresence() {
+    const str = 'Adding new publisher instance with presence'
+    localLog(str)
+    const myId = 'clientId-' + Math.random().toString(36).substr(2, 16)
+    const ably = new Ably.Realtime({
+        key: apiKey,
+        clientId: myId,
+    })
+    const regularChannel = ably.channels.get(regularChannelName)
+    regularChannel.publish('test-data', {
+        data: 'Dummy Data',
+        time: Date.now(),
+    })
+    regularChannel.presence.enter()
+}
+
+function addSubscriberInstanceWithPresence() {
+    const str = 'Adding new subscriber instance with presence'
+    localLog(str)
+    const myId = 'clientId-' + Math.random().toString(36).substr(2, 16)
+    const ably = new Ably.Realtime({
+        key: apiKey,
+        clientId: myId,
+    })
+    const regularChannel = ably.channels.get(regularChannelName)
+    regularChannel.subscribe('test-data', (data) => {
+        console.log('Subscription working')
+    })
+    regularChannel.presence.enter()
+}