Hi everyone,
I recently created this library called y-presence to add multiplayer presence like live cursors, live avatars, etc to a React application. Lately, I’ve been working on refactoring some of the code so that the library can be used with any web framework. I came up with the @y-presence/client package (6.08kb gzipped) which exposes some helper methods to easily subscribe to presence information about other users or self. I’d love to hear some feedback on the library. Here’s a brief use case of the package:
// create a new y-presence `Room` object by passing in the provider awareness
const room = new Room(provider.awareness)
// update the self presence whenever mouse position changes
document.onmousemove = (e) => {
room.setPresence({ x: e.pageX, y: e.pageY });
}
// listen to changes in other users' presence
room.subscribe('others', (users) => {
// log the number of other users or iterate over them
console.log("Number of other users: " + users.length);
users.map((user) => {
console.log(user.x);
console.log(user.y);
})
})
Other methods that are exposed by the room class are:
// listen to changes in all users' presence
room.subscribe('users', (users) => {
// do something
})
// listen to changes in self presence
room.subscribe('self', (user) => {
// do something
})