From d6af7f918cafe21eab79d951e446ff7939568df2 Mon Sep 17 00:00:00 2001 From: Tony Bedford Date: Thu, 18 Feb 2021 10:11:18 +0000 Subject: [PATCH 1/7] Step 3 - Basic HTML page to display inband occupancy results. --- index.html | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 index.html 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 +
+
+
+ + +
+
+ + +
+
+
+ +
+ + + + From 1758c24a9106dc8dc33c76a54cd28beed3c457ec Mon Sep 17 00:00:00 2001 From: Tony Bedford Date: Thu, 18 Feb 2021 10:13:59 +0000 Subject: [PATCH 2/7] Step 4 - Instantiating the Ably realtime library --- main.js | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 main.js diff --git a/main.js b/main.js new file mode 100644 index 00000000..683d203b --- /dev/null +++ b/main.js @@ -0,0 +1,35 @@ +let apiKey = 'YOUR_API_KEY'; +let ably = new Ably.Realtime({ + key: apiKey, +}); + +let regularChannelName = "channel-" + Math.random().toString(36).substr(2, 16); +let channelOpts = { params: { occupancy: "metrics" } }; +let channel = ably.channels.get(regularChannelName, channelOpts); +let resultArea = document.getElementById("result"); +resultArea.scrollTop = resultArea.scrollHeight; + +channel.subscribe("[meta]occupancy", (msg) => { + let msgJSONobj = JSON.parse(JSON.stringify(msg)); + console.log("MSG: " + msg); + //extract occupancy data from the message returned in the callback + let occupancyMetrics = msgJSONobj.data.metrics; + if (occupancyMetrics && msgJSONobj.name.includes("[meta]")) { + resultArea.value += + "\n\n[METADATA - " + + new Date().toLocaleTimeString() + + ' ]: Occupancy on channel "' + + regularChannelName + + '" has been updated. New data is as follows:\n'; + resultArea.value += "Connections: " + occupancyMetrics.connections + " \n"; + resultArea.value += "Publishers: " + occupancyMetrics.publishers + " \n"; + resultArea.value += "Subscribers: " + occupancyMetrics.subscribers + " \n"; + resultArea.value += + "Presence Connections: " + occupancyMetrics.presenceConnections + " \n"; + resultArea.value += + "Presence Members: " + occupancyMetrics.presenceMembers + " \n"; + resultArea.value += + "Presence Subscribers: " + occupancyMetrics.presenceSubscribers + " \n"; + resultArea.scrollTop = resultArea.scrollHeight; + } +}); From 8685d4dbeeee0eda479727aafbd5bc180b2339d7 Mon Sep 17 00:00:00 2001 From: Tony Bedford Date: Thu, 18 Feb 2021 10:16:39 +0000 Subject: [PATCH 3/7] Step 5 - Add button callbacks --- main.js | 101 ++++++++++++++++++++++++++++++++++++++------------------ 1 file changed, 68 insertions(+), 33 deletions(-) diff --git a/main.js b/main.js index 683d203b..a6ccf9c2 100644 --- a/main.js +++ b/main.js @@ -1,35 +1,70 @@ -let apiKey = 'YOUR_API_KEY'; -let ably = new Ably.Realtime({ - key: apiKey, -}); +function addPublisherInstance() { + console.log("API KEY: " + apiKey); + resultArea.value += + "\n[LOCAL LOG - " + + new Date().toLocaleTimeString() + + " ]: Adding new publisher instance\n"; + let ably = new Ably.Realtime({ + key: apiKey, + }); + let regularChannel = ably.channels.get(regularChannelName); + console.log("adding publisher instance"); + regularChannel.publish("test-data", { + data: "Dummy Data", + time: Date.now(), + }); +} -let regularChannelName = "channel-" + Math.random().toString(36).substr(2, 16); -let channelOpts = { params: { occupancy: "metrics" } }; -let channel = ably.channels.get(regularChannelName, channelOpts); -let resultArea = document.getElementById("result"); -resultArea.scrollTop = resultArea.scrollHeight; +function addSubscriberInstance() { + resultArea.value += + "\n[LOCAL LOG - " + + new Date().toLocaleTimeString() + + " ]: Adding new subscriber instance\n"; + let ably = new Ably.Realtime({ + key: apiKey, + }); + let regularChannel = ably.channels.get(regularChannelName); + console.log("adding subscriber instance"); + regularChannel.subscribe("test-data", (data) => { + //do whatever + console.log("Subscription working"); + }); +} -channel.subscribe("[meta]occupancy", (msg) => { - let msgJSONobj = JSON.parse(JSON.stringify(msg)); - console.log("MSG: " + msg); - //extract occupancy data from the message returned in the callback - let occupancyMetrics = msgJSONobj.data.metrics; - if (occupancyMetrics && msgJSONobj.name.includes("[meta]")) { - resultArea.value += - "\n\n[METADATA - " + - new Date().toLocaleTimeString() + - ' ]: Occupancy on channel "' + - regularChannelName + - '" has been updated. New data is as follows:\n'; - resultArea.value += "Connections: " + occupancyMetrics.connections + " \n"; - resultArea.value += "Publishers: " + occupancyMetrics.publishers + " \n"; - resultArea.value += "Subscribers: " + occupancyMetrics.subscribers + " \n"; - resultArea.value += - "Presence Connections: " + occupancyMetrics.presenceConnections + " \n"; - resultArea.value += - "Presence Members: " + occupancyMetrics.presenceMembers + " \n"; - resultArea.value += - "Presence Subscribers: " + occupancyMetrics.presenceSubscribers + " \n"; - resultArea.scrollTop = resultArea.scrollHeight; - } -}); +function addPublisherInstanceWithPresence() { + resultArea.value += + "\n[LOCAL LOG - " + + new Date().toLocaleTimeString() + + " ]: Adding new publisher instance\n"; + let myId = "clientId-" + Math.random().toString(36).substr(2, 16); + let ably = new Ably.Realtime({ + key: apiKey, + clientId: myId, + }); + let regularChannel = ably.channels.get(regularChannelName); + console.log("adding publisher instance"); + regularChannel.publish("test-data", { + data: "Dummy Data", + time: Date.now(), + }); + regularChannel.presence.enter(); +} + +function addSubscriberInstanceWithPresence() { + resultArea.value += + "\n[LOCAL LOG - " + + new Date().toLocaleTimeString() + + " ]: Adding new subscriber instance\n"; + let myId = "clientId-" + Math.random().toString(36).substr(2, 16); + let ably = new Ably.Realtime({ + key: apiKey, + clientId: myId, + }); + let regularChannel = ably.channels.get(regularChannelName); + console.log("adding subscriber instance"); + regularChannel.subscribe("test-data", (data) => { + //do whatever + console.log("Subscription working"); + }); + regularChannel.presence.enter(); +} From c16e98cd2afb39170d219a3ef5cbf8324d1bf3bb Mon Sep 17 00:00:00 2001 From: Tony Bedford Date: Thu, 18 Feb 2021 10:17:49 +0000 Subject: [PATCH 4/7] Complete code --- main.js | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/main.js b/main.js index a6ccf9c2..7b9803a0 100644 --- a/main.js +++ b/main.js @@ -1,3 +1,39 @@ +let apiKey = 'YOUR_API_KEY'; +let ably = new Ably.Realtime({ + key: apiKey, +}); + +let regularChannelName = "channel-" + Math.random().toString(36).substr(2, 16); +let channelOpts = { params: { occupancy: "metrics" } }; +let channel = ably.channels.get(regularChannelName, channelOpts); +let resultArea = document.getElementById("result"); +resultArea.scrollTop = resultArea.scrollHeight; + +channel.subscribe("[meta]occupancy", (msg) => { + let msgJSONobj = JSON.parse(JSON.stringify(msg)); + console.log("MSG: " + msg); + //extract occupancy data from the message returned in the callback + let occupancyMetrics = msgJSONobj.data.metrics; + if (occupancyMetrics && msgJSONobj.name.includes("[meta]")) { + resultArea.value += + "\n\n[METADATA - " + + new Date().toLocaleTimeString() + + ' ]: Occupancy on channel "' + + regularChannelName + + '" has been updated. New data is as follows:\n'; + resultArea.value += "Connections: " + occupancyMetrics.connections + " \n"; + resultArea.value += "Publishers: " + occupancyMetrics.publishers + " \n"; + resultArea.value += "Subscribers: " + occupancyMetrics.subscribers + " \n"; + resultArea.value += + "Presence Connections: " + occupancyMetrics.presenceConnections + " \n"; + resultArea.value += + "Presence Members: " + occupancyMetrics.presenceMembers + " \n"; + resultArea.value += + "Presence Subscribers: " + occupancyMetrics.presenceSubscribers + " \n"; + resultArea.scrollTop = resultArea.scrollHeight; + } +}); + function addPublisherInstance() { console.log("API KEY: " + apiKey); resultArea.value += From 797d4faab689a9c077fff98e1549c65d57dbda07 Mon Sep 17 00:00:00 2001 From: Tony Bedford Date: Fri, 19 Feb 2021 11:33:22 +0000 Subject: [PATCH 5/7] Step 4 - Instantiating the Ably realtime library --- main.js | 130 ++++++++++++++------------------------------------------ 1 file changed, 31 insertions(+), 99 deletions(-) diff --git a/main.js b/main.js index 7b9803a0..6d640be0 100644 --- a/main.js +++ b/main.js @@ -1,106 +1,38 @@ -let apiKey = 'YOUR_API_KEY'; -let ably = new Ably.Realtime({ - key: apiKey, -}); - -let regularChannelName = "channel-" + Math.random().toString(36).substr(2, 16); -let channelOpts = { params: { occupancy: "metrics" } }; -let channel = ably.channels.get(regularChannelName, channelOpts); -let resultArea = document.getElementById("result"); -resultArea.scrollTop = resultArea.scrollHeight; +const apiKey = '' +const ably = new Ably.Realtime({ + key: apiKey, +}) -channel.subscribe("[meta]occupancy", (msg) => { - let msgJSONobj = JSON.parse(JSON.stringify(msg)); - console.log("MSG: " + msg); - //extract occupancy data from the message returned in the callback - let occupancyMetrics = msgJSONobj.data.metrics; - if (occupancyMetrics && msgJSONobj.name.includes("[meta]")) { - resultArea.value += - "\n\n[METADATA - " + - new Date().toLocaleTimeString() + - ' ]: Occupancy on channel "' + - regularChannelName + - '" has been updated. New data is as follows:\n'; - resultArea.value += "Connections: " + occupancyMetrics.connections + " \n"; - resultArea.value += "Publishers: " + occupancyMetrics.publishers + " \n"; - resultArea.value += "Subscribers: " + occupancyMetrics.subscribers + " \n"; - resultArea.value += - "Presence Connections: " + occupancyMetrics.presenceConnections + " \n"; - resultArea.value += - "Presence Members: " + occupancyMetrics.presenceMembers + " \n"; - resultArea.value += - "Presence Subscribers: " + occupancyMetrics.presenceSubscribers + " \n"; - resultArea.scrollTop = resultArea.scrollHeight; - } -}); +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 addPublisherInstance() { - console.log("API KEY: " + apiKey); - resultArea.value += - "\n[LOCAL LOG - " + - new Date().toLocaleTimeString() + - " ]: Adding new publisher instance\n"; - let ably = new Ably.Realtime({ - key: apiKey, - }); - let regularChannel = ably.channels.get(regularChannelName); - console.log("adding publisher instance"); - regularChannel.publish("test-data", { - data: "Dummy Data", - time: Date.now(), - }); +function localLog(msg) { + const logDate = new Date().toLocaleTimeString() + const template = `\n\n[LOCAL LOG - ${logDate}] - ${msg}\n` + resultArea.value += template + console.log(msg) } -function addSubscriberInstance() { - resultArea.value += - "\n[LOCAL LOG - " + - new Date().toLocaleTimeString() + - " ]: Adding new subscriber instance\n"; - let ably = new Ably.Realtime({ - key: apiKey, - }); - let regularChannel = ably.channels.get(regularChannelName); - console.log("adding subscriber instance"); - regularChannel.subscribe("test-data", (data) => { - //do whatever - console.log("Subscription working"); - }); -} +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}` -function addPublisherInstanceWithPresence() { - resultArea.value += - "\n[LOCAL LOG - " + - new Date().toLocaleTimeString() + - " ]: Adding new publisher instance\n"; - let myId = "clientId-" + Math.random().toString(36).substr(2, 16); - let ably = new Ably.Realtime({ - key: apiKey, - clientId: myId, - }); - let regularChannel = ably.channels.get(regularChannelName); - console.log("adding publisher instance"); - regularChannel.publish("test-data", { - data: "Dummy Data", - time: Date.now(), - }); - regularChannel.presence.enter(); + return prompt + template } -function addSubscriberInstanceWithPresence() { - resultArea.value += - "\n[LOCAL LOG - " + - new Date().toLocaleTimeString() + - " ]: Adding new subscriber instance\n"; - let myId = "clientId-" + Math.random().toString(36).substr(2, 16); - let ably = new Ably.Realtime({ - key: apiKey, - clientId: myId, - }); - let regularChannel = ably.channels.get(regularChannelName); - console.log("adding subscriber instance"); - regularChannel.subscribe("test-data", (data) => { - //do whatever - console.log("Subscription working"); - }); - regularChannel.presence.enter(); -} +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 + } +}) From 6463c38899e0c4aea6eb6647a543745d43fbfacd Mon Sep 17 00:00:00 2001 From: Tony Bedford Date: Fri, 19 Feb 2021 11:34:51 +0000 Subject: [PATCH 6/7] Step 5 - Add button callbacks --- main.js | 83 ++++++++++++++++++++++++++++++++++----------------------- 1 file changed, 50 insertions(+), 33 deletions(-) diff --git a/main.js b/main.js index 6d640be0..c220b5f3 100644 --- a/main.js +++ b/main.js @@ -1,38 +1,55 @@ -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 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 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}` +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') + }) +} - return prompt + template +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() } -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 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() +} From 5d4ac11b28662d4a756ebfa1e15c83801659d26e Mon Sep 17 00:00:00 2001 From: Tony Bedford Date: Fri, 19 Feb 2021 11:37:13 +0000 Subject: [PATCH 7/7] Complete Code --- main.js | 39 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/main.js b/main.js index c220b5f3..e4301ad3 100644 --- a/main.js +++ b/main.js @@ -1,3 +1,42 @@ +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)