@y-presence/client: Thin wrapper around provider awareness

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
})
3 Likes

This looks very nice and useful. I implemented something similar in PRSM, and one lesson I learned is that with more than a few users, the broadcast cursor position data can become overwhelming unless throttled. Hence, I changed my code to permit clients to send cursor positions no more than once every 200 ms, and then clients receiving these cursor positions use CSS transitions to smoothly move the cursor image from the previous position to the current one. This works well, and can support at least 20 simultaneous users (I haven’t had the opportunity to try it with more).

Just checked out PRSM. Looks very useful and thanks for open sourcing it. For the cursor interpolation problem, perfect-cursors provides a great library to interpolate cursor based on limited info due to throttling. Would definitely recommend checking it out.

Hi @nimeshnayaju,

Thank you so much for sharing! This indeed looks much easier to consume than the original Awareness object.

1 Like

Just discovered this suggestion (don’t know why I missed it before). Perfect-cursors looks perfect :slight_smile: .Thanks.