blob: 3a0d85319420d237b0bd9a1f530782759e51d8fb (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
<!DOCTYPE html>
<html>
<body>
<h1> Graffiti x JS </h1>
<p id="ID"></p>
<h2 id="status">Unsubscribed</h2>
<button onclick="Subscribe()">
Subscribe
</button>
<button onclick="Unsubscribe()">
Unsubscribe
</button>
<button onclick="Update()">
Update
</button>
<button onclick="Remove()">
Remove
</button>
<button onclick="LogOut()">
Log Out
</button>
<script type="module">
import Graffiti from "./graffiti.js"
// Connect to a local Graffiti instance
// (see the server README for how to run locally)
const graffiti = new Graffiti("http://localhost:5001")
await graffiti.initialize()
// Log in automatically if not already
// and supply a log out button
if (!graffiti.myID) graffiti.toggleLogIn()
window.LogOut = ()=> graffiti.toggleLogIn()
document.getElementById('ID').innerHTML = `Your Graffiti ID is: ${graffiti.myID}`
// Create a display counter
let count = 0
function displayCount() {
document.getElementById('status').innerHTML = `Subscribed: ${count} Objects`
}
// From here to below we're going to
// define functions that can be activated
// with button presses, corresponding to
// each of the four Graffiti primitives.
// Create an object containing a special string
const special = crypto.randomUUID()
const usedIDs = []
window.Update = async function() {
usedIDs.unshift(crypto.randomUUID())
await graffiti.update({
_id: usedIDs[0],
_by: graffiti.myID,
special
}, {})
}
// Remove an existing object
window.Remove = async function() {
if ( usedIDs.length ) {
await graffiti.remove( usedIDs.pop() )
}
}
// Subscribe to objects containing the special string
let queryID = null
window.Subscribe = async function() {
if (queryID) return
count = 0
queryID = await graffiti.subscribe(
{ special },
(obj)=> { count++; displayCount() },
(obj)=> { count--; displayCount() }
)
displayCount()
}
// Unsubscribe to the existing query
window.Unsubscribe = async function() {
if (queryID) {
await graffiti.unsubscribe(queryID)
queryID = null
document.getElementById('status').innerHTML = "Unsubscribed"
}
}
</script>
</body>
</html>
|
