diff --git a/index.html b/index.html
new file mode 100644
index 00000000..2e4864a6
--- /dev/null
+++ b/index.html
@@ -0,0 +1,29 @@
+
+
+
+ ** Inband Channel Occupancy Events **
+
+
+
+
+ Ably Inband Channel Occupancy Events - Demo
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/main.js b/main.js
new file mode 100644
index 00000000..e4301ad3
--- /dev/null
+++ b/main.js
@@ -0,0 +1,94 @@
+const apiKey = ''
+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()
+}