Skip to content

Instantly share code, notes, and snippets.

View thisisjofrank's full-sized avatar

Jo Franchetti thisisjofrank

100 followers · 9 following
View GitHub Profile
@thisisjofrank
thisisjofrank / election_script6.ts
Created April 22, 2022 13:22
swarm.connect();
export { }; // required for vite to import the file
@thisisjofrank
thisisjofrank / election_script5.ts
Created April 22, 2022 13:21
swarm.onConnection = (channel: Types.RealtimeChannelPromise) => {
channel.subscribe("message", (message: Types.Message) => {
counter = message.data.counter;
counterUi.innerText = counter.toString();
});
};
@thisisjofrank
thisisjofrank / election_script4.ts
Created April 22, 2022 13:21
swarm.onElection = (channel: Types.RealtimeChannelPromise) => {
leaderUi.innerText = "true";
setInterval(() => {
counter++;
channel.publish("message", { counter: counter });
console.log("Sent counter", counter);
}, 5000);
};
@thisisjofrank
thisisjofrank / election_script3.ts
Created April 22, 2022 13:20
swarm.onSwarmPresenceChanged = (members: Types.PresenceMessage[]) => {
presenceUi.innerText = JSON.stringify(members);
};
@thisisjofrank
thisisjofrank / election_script2.ts
Created April 22, 2022 13:19
const swarm = new Swarm("some-channel-name");
clientIdUi.innerText = swarm.id;
leaderUi.innerText = "false";
@thisisjofrank
thisisjofrank / election_script.ts
Created April 22, 2022 13:18
import { Types } from "ably";
import Swarm from "./Swarm";
let counter = 0;
const counterUi = document.getElementById("counter-value");
const clientIdUi = document.getElementById("client-id");
const leaderUi = document.getElementById("leader");
const presenceUi = document.getElementById("presence-members");
@thisisjofrank
thisisjofrank / election_index2.html
Created April 22, 2022 13:16
The UI of this demo is very simple - a couple of paragraphs that display the current browsers ClientId and whether or not this client is the leader.
...
<body>
<h1>Leader Election Demo</h1>
<p>Client Id: <span id="client-id"></span></p>
<p>Leader?: <span id="leader"></span></p>
<p>Current Counter Value: <span id="counter-value"></span></p>
<div id="presence-members">
Waiting to load presence....
</div>
</body>
@thisisjofrank
thisisjofrank / election_index1.html
Created April 22, 2022 13:15
Notice the reference to ./script.ts uses type="module" in the script tag. ES Modules makes it possible for the browser to import script.ts as a module in the front end. (This means that we can use browser native import statements in the JavaScript code).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example</title>
<script src="./script.ts" type="module"></script>
</head>
...
@thisisjofrank
thisisjofrank / Swarm7.ts
Created April 22, 2022 13:13
If there is no leader, we sort the members array alphabetically, using the clientId property of each PresenceMessage:
...
const sortedMembers = members.sort(
(a, b) => (a.connectionId as any) - (b.connectionId as any)
);
if (sortedMembers[0].clientId === this.id) {
await this.channel.presence.update("leader");
this.onElection(this.channel);
}
}
@thisisjofrank
thisisjofrank / Swarm6.ts
Created April 22, 2022 13:13
The election logic is implemented in ensureLeaderElected. We use the members array to determine if a client is the leader. First, it checks the members array passed to the function, and if there is already a leader (someone with the presence data of "leader"), it will stop and return early. There's already a leader, so nothing further needs to b…
private async ensureLeaderElected(members: Types.PresenceMessage[]) {
const leader = members.find(s => s.data === "leader");
if (leader) {
return;
}
...