@yorkie-js/sdk 0.6.28 → 0.6.34
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/presence.html +140 -0
- package/dist/yorkie-js-sdk.d.ts +628 -347
- package/dist/yorkie-js-sdk.es.js +1949 -1071
- package/dist/yorkie-js-sdk.es.js.map +1 -1
- package/dist/yorkie-js-sdk.js +1948 -1070
- package/dist/yorkie-js-sdk.js.map +1 -1
- package/package.json +2 -2
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<title>Presence Example</title>
|
|
6
|
+
</head>
|
|
7
|
+
<body>
|
|
8
|
+
<div class="container">
|
|
9
|
+
<h1>Presence</h1>
|
|
10
|
+
<p class="subtitle">Real-time online user tracking with Yorkie</p>
|
|
11
|
+
|
|
12
|
+
<div class="info-box">
|
|
13
|
+
<p><strong>Key:</strong> <span id="room-id">key-123</span></p>
|
|
14
|
+
<p><strong>Client ID:</strong> <span id="client-id">-</span></p>
|
|
15
|
+
<p>
|
|
16
|
+
<strong>Status:</strong>
|
|
17
|
+
<span id="status" class="status disconnected">Disconnected</span>
|
|
18
|
+
</p>
|
|
19
|
+
</div>
|
|
20
|
+
|
|
21
|
+
<div class="counter-section">
|
|
22
|
+
<span class="counter-label">👥 Users Online</span>
|
|
23
|
+
<span class="counter-value" id="counter-value">0</span>
|
|
24
|
+
<button id="join-btn" class="join-btn">Join Room</button>
|
|
25
|
+
<button id="leave-btn" class="leave-btn" disabled>Leave Room</button>
|
|
26
|
+
</div>
|
|
27
|
+
|
|
28
|
+
<div class="events-log">
|
|
29
|
+
<h3>📋 Activity Log</h3>
|
|
30
|
+
<div id="events-container"></div>
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
33
|
+
|
|
34
|
+
<script type="module">
|
|
35
|
+
import yorkie from './src/yorkie.ts';
|
|
36
|
+
|
|
37
|
+
const roomId = 'room-123';
|
|
38
|
+
const client = new yorkie.Client({
|
|
39
|
+
rpcAddr: 'http://localhost:8080',
|
|
40
|
+
});
|
|
41
|
+
|
|
42
|
+
let presence = null;
|
|
43
|
+
const events = [];
|
|
44
|
+
|
|
45
|
+
const elements = {
|
|
46
|
+
clientId: document.getElementById('client-id'),
|
|
47
|
+
status: document.getElementById('status'),
|
|
48
|
+
counterValue: document.getElementById('counter-value'),
|
|
49
|
+
joinBtn: document.getElementById('join-btn'),
|
|
50
|
+
leaveBtn: document.getElementById('leave-btn'),
|
|
51
|
+
eventsContainer: document.getElementById('events-container'),
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
function updateStatus(isConnected) {
|
|
55
|
+
elements.status.textContent = isConnected
|
|
56
|
+
? 'Connected'
|
|
57
|
+
: 'Disconnected';
|
|
58
|
+
elements.status.className = isConnected
|
|
59
|
+
? 'status connected'
|
|
60
|
+
: 'status disconnected';
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
function updateCounter(count) {
|
|
64
|
+
elements.counterValue.textContent = count;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
function addEvent(message) {
|
|
68
|
+
const timestamp = new Date().toLocaleTimeString();
|
|
69
|
+
events.unshift(`[${timestamp}] ${message}`);
|
|
70
|
+
if (events.length > 10) events.pop();
|
|
71
|
+
|
|
72
|
+
elements.eventsContainer.innerHTML = events
|
|
73
|
+
.map((event) => `<div class="event-item">${event}</div>`)
|
|
74
|
+
.join('');
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
async function initialize() {
|
|
78
|
+
try {
|
|
79
|
+
await client.activate();
|
|
80
|
+
elements.clientId.textContent =
|
|
81
|
+
client.getID().substring(0, 8) + '...';
|
|
82
|
+
addEvent('Client activated successfully');
|
|
83
|
+
} catch (error) {
|
|
84
|
+
console.error('Failed to activate client:', error);
|
|
85
|
+
addEvent('❌ Failed to activate client');
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
elements.joinBtn.addEventListener('click', async () => {
|
|
90
|
+
try {
|
|
91
|
+
elements.joinBtn.disabled = true;
|
|
92
|
+
|
|
93
|
+
presence = new yorkie.Presence(roomId);
|
|
94
|
+
|
|
95
|
+
presence.subscribe((event) => {
|
|
96
|
+
console.log('Presence event:', event);
|
|
97
|
+
updateCounter(event.count);
|
|
98
|
+
|
|
99
|
+
if (event.type === yorkie.PresenceEventType.Initialized) {
|
|
100
|
+
addEvent(`✅ Joined room - ${event.count} user(s) online`);
|
|
101
|
+
} else if (event.type === yorkie.PresenceEventType.Changed) {
|
|
102
|
+
addEvent(`📊 Count updated - ${event.count} user(s) online`);
|
|
103
|
+
}
|
|
104
|
+
});
|
|
105
|
+
|
|
106
|
+
await client.attach(presence);
|
|
107
|
+
updateStatus(true);
|
|
108
|
+
elements.leaveBtn.disabled = false;
|
|
109
|
+
|
|
110
|
+
updateCounter(presence.getCount());
|
|
111
|
+
} catch (error) {
|
|
112
|
+
console.error('Failed to join room:', error);
|
|
113
|
+
addEvent('❌ Failed to join room');
|
|
114
|
+
elements.joinBtn.disabled = false;
|
|
115
|
+
}
|
|
116
|
+
});
|
|
117
|
+
|
|
118
|
+
elements.leaveBtn.addEventListener('click', async () => {
|
|
119
|
+
try {
|
|
120
|
+
elements.leaveBtn.disabled = true;
|
|
121
|
+
|
|
122
|
+
await client.detach(presence);
|
|
123
|
+
updateStatus(false);
|
|
124
|
+
elements.joinBtn.disabled = false;
|
|
125
|
+
|
|
126
|
+
addEvent(`👋 Left room - ${presence.getCount()} user(s) remaining`);
|
|
127
|
+
updateCounter(0);
|
|
128
|
+
presence = null;
|
|
129
|
+
} catch (error) {
|
|
130
|
+
console.error('Failed to leave room:', error);
|
|
131
|
+
addEvent('❌ Failed to leave room');
|
|
132
|
+
elements.leaveBtn.disabled = false;
|
|
133
|
+
}
|
|
134
|
+
});
|
|
135
|
+
|
|
136
|
+
// Initialize on load
|
|
137
|
+
initialize();
|
|
138
|
+
</script>
|
|
139
|
+
</body>
|
|
140
|
+
</html>
|