Peer Awareness
Peer Awareness is a feature often required in collaborative applications. With Peer Awareness, we can display information such as names and colors about peers who are editing a document together in the application. Example of Peer Awareness in CodePair:
This page shows how to implement Peer Awareness in your application.
How to implement
When creating a client, we can pass information of the client to other peers attaching the same document with presence.
const clientA = yorkie.createClient('localhost:8080', {
presence: {
username: 'alice',
color: 'blue',
},
});
await client.activate();
const docA = yorkie.createDocument('doc-1');
await clientA.attach(docA);
Then another client is created and attaches a document with the same name as before.
const clientB = yorkie.createClient('localhost:8080', {
presence: {
username: 'bob',
color: 'red',
},
});
await clientB.activate();
const docB = yorkie.createDocument('doc-1');
await clientB.attach(docB);
Once a new peer registers or leaves, peers-changed event is fired, and the other peer’s clientID and presence can be obtained from the event.
const unsubscribe = clientA.subscribe((event) => {
if (event.type === 'peers-changed') {
const peers = event.value[doc.getKey()];
for (const [clientID, presence] of Object.entries(peers)) {
console.log(clientID, presence); // e.g.) presence: {username: 'bob', color: 'red'}
}
}
});
In the example above, clientA will receive information from clientB.