Docs

Docs

Handle User Presence

Collaboration Kit includes a manager to set the user presence in a topic, keep track of users who are present, and react to changes in the presence. It provides a simple and flexible way to manage topic data related to user presence, and makes it easy to create custom components with collaborative features.

The following example has a custom component that shows the list of active users in a topic using the presence manager:

VerticalLayout users = new VerticalLayout();

UserInfo localUser = new UserInfo("john");

PresenceManager manager = new PresenceManager(users, localUser,
        "my-topic"); 1

manager.markAsPresent(true); 2

manager.setPresenceHandler(context -> { 3
    Component card = createUserCard(context.getUser());
    users.add(card);
    return () -> users.remove(card); 4
});

  1. Creating a PresenceManager takes a component to bind the manager connection context to the UI, an instance of UserInfo that represents the current local user, and the topic identifier on which to connect.

  2. The markAsPresent() method is used to configure the manager to mark the local user as present in the topic as soon as a connection is established.

  3. The setPresenceHandler method sets a callback to handle a new user joining the topic. The UserInfo for the new user is provided by the context passed as the argument to the callback.

  4. The callback returns another callback, a registration, that’s called to remove the same user when the user leaves the topic.

3087B264-5D09-43C6-A195-07FAFF288CA7