Skip to content

Inband occupancy #93

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Inband occupancy #93

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d6af7f9
Step 3 - Basic HTML page to display inband occupancy results.
tbedford Feb 18, 2021
1758c24
Step 4 - Instantiating the Ably realtime library
tbedford Feb 18, 2021
8685d4d
Step 5 - Add button callbacks
tbedford Feb 18, 2021
c16e98c
Complete code
tbedford Feb 18, 2021
797d4fa
Step 4 - Instantiating the Ably realtime library
tbedford Feb 19, 2021
6463c38
Step 5 - Add button callbacks
tbedford Feb 19, 2021
5d4ac11
Complete Code
tbedford Feb 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
106 changes: 106 additions & 0 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
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 +=
"\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 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 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();
}