Neste artigo vou mostrar como, em poucas linhas de código, adicionar indicadores de presença na sua página, como mostrar quem está online na página e visualização em tempo real dos cursores.

Tais indicadores estão presentes nas principais ferramentas que permitem colaboração em tempo real como Google Docs, Notion, Figma. Elas são parte essencial para novos produtos digitais que estão chegando ao mercado.

O conceito de uma sala

Quando falamos de permitir colaboração em tempo real com as pessoas online, primeiro precisamos definir uma sala. Ela é o ambiente em que todos que estiverem dentro dela serão vistos. No caso do Google Docs, cada documento aberto é uma sala. Fica a seu critério entender o que é uma sala, mas normalmente ela compartilha o mesmo caminho (URL) entre os participantes.

E como construir uma sala digitalmente? Para isso iremos utilizar a SuperViz, que é um SDK que permitirá criar uma sala rapidamente e adicionar os componentes desejados.

Após instalar o pacote @superviz/sdk e obter uma chave gratuitamente no painel da SuperViz, adicione o seguinte código a sua página:

// Import the SuperViz SDK
import SuperVizRoom from '@superviz/sdk';

// Create a room object
const room = await SuperVizRoom(DEVELOPER_KEY, {
  roomId: "<ROOM-ID>",
  group: {
    id: "<GROUP-ID>",
    name: "<GROUP-NAME>",
  },
  participant: {
    id: "<USER-ID>",
    name: "<USER-NAME>"
  },
});

Ao construir uma sala, você adiciona também informações do usuário que estará nesta sala. Com isso feito, podemos avançar para adicionar os nossos componentes na sala.

Mouse Pointers

Para adicionar a capacidade de visualizar os ponteiros do mouse em tempo real dos participantes na sua sala, precisamos criar um componente de Mouse Pointers, que pode ser adicionado à sua sala com apenas três linhas de código:

import { MousePointers } from "@superviz/sdk/lib/components"

const mousePointers = new MousePointers("meu-id");
room.addComponent(mousePointers);

Troque o meu-id pelo id de seu elemento canvas ou utilize um elemento HTML para determinar a área em que o ponteiro será rastreado. Para mais detalhes sobre como fazer isso, visualize a documentação do componente.

Com isso, cada vez que um usuário mover o mouse na tela, outros participantes conseguirão visualizar a localização em tempo real de seu ponteiro, conforme exibido na imagem abaixo.

Who-is-Online

O componente Who-is-Online é uma ótima maneira de saber quem está online na sala em tempo real. Para adicionar este componente à sua sala, você pode usar o seguinte código:

import { WhoIsOnline } from "@superviz/sdk/lib/components"

const whoIsOnline = new WhoIsOnline("participantes");
room.addComponent(whoIsOnline);

O Who-is-Online será exibido no elemento que conter o ID #participantes. Isso permitirá que todos na sala vejam quem está online, fortalecendo a experiência de colaboração em tempo real.

Em resumo, a adição de indicadores de presença como Mouse Pointers e Who-is-Online na sua página web consegue adicionar em pouco tempo funções essenciais para ferramentas modernas com poucas linhas de código.