Profile Stack
The profile stack shows the list of users currently accessing the Document. Try adding and deleting users to see how the profile stack changes.
main.js
1import yorkie from 'yorkie-js-sdk';2import { getRandomName, getRandomColor } from './util.js';34async function main() {5 const client = new yorkie.Client(import.meta.env.VITE_YORKIE_API_ADDR, {6 apiKey: import.meta.env.VITE_YORKIE_API_KEY,7 // set the client's name and color to presence.8 presence: {9 name: getRandomName(),10 color: getRandomColor(),11 },12 });13 await client.activate();14 const myClientID = client.getID();1516 client.subscribe((event) => {17 if (event.type === 'peers-changed') {18 // get presence of all clients connected to the Document.19 // {<clientID>: {name: string, color: string}}20 const peers = event.value[doc.getKey()];2122 // show peer list23 displayPeerList(peers, myClientID);24 }25 });2627 const doc = new yorkie.Document('profile-stack');28 await client.attach(doc);2930 window.addEventListener('beforeunload', () => {31 client.deactivate();32 });33}3435const MAX_PEER_VIEW = 4;36const createPeer = (name, color, type) => {37 const $peer = document.createElement('div');38 $peer.className = 'peer';3940 if (type === 'main') {41 $peer.innerHTML = `42 <div class="profile">43 <img src="./images/profile-${color}.svg" alt="profile" class="profile-img"/>44 </div>45 <div class="name speech-bubbles">${name}</div>46 `;47 } else if (type === 'more') {48 $peer.innerHTML = `49 <img src="./images/profile-${color}.svg" alt="profile" class="profile-img"/>50 <span class="name">${name}</span>51 `;52 }53 return $peer;54};5556const displayPeerList = (peers, myClientID) => {57 const peerList = Object.entries(peers)58 .filter(([id]) => id !== myClientID)59 .filter(([, presence]) => presence.name && presence.color);60 const peerCount = peerList.length + 1;61 const hasMorePeers = peerCount > MAX_PEER_VIEW;62 const $peerList = document.getElementById('peerList');63 $peerList.innerHTML = '';64 const $peerMoreList = document.createElement('div');65 $peerMoreList.className = 'peer-more-list speech-bubbles';6667 const myInfo = peers[myClientID];68 const $me = createPeer(`${myInfo.name} (me)`, myInfo.color, 'main');69 $me.classList.add('me');70 $peerList.appendChild($me);71 peerList.forEach(([_, { name, color }], i) => {72 if (i < MAX_PEER_VIEW - 1) {73 const $peer = createPeer(name, color, 'main');74 $peerList.appendChild($peer);75 return;76 }77 const $peer = createPeer(name, color, 'more');78 $peerMoreList.appendChild($peer);79 });8081 if (hasMorePeers) {82 const $peer = document.createElement('div');83 $peer.className = 'peer more';84 $peer.innerHTML = `85 <div class="profile">86 +${peerCount - MAX_PEER_VIEW}87 </div>88 `;89 $peer.appendChild($peerMoreList);90 $peerList.appendChild($peer);91 }92};9394main();
- User 1
- User 2
- User 1
- User 2
Event Log