Neste tutorial vamos te ensinar a construir um aplicativo de chat em tempo real usando o SuperViz. O chat em tempo real é um recurso crucial para aplicações web modernas, permitindo que os usuários se comuniquem instantaneamente. Quer você esteja construindo uma plataforma colaborativa, uma ferramenta de suporte ao cliente ou um site de rede social, adicionar chat em tempo real melhora a interação e o engajamento dos usuários.

Vamos demonstrar como configurar uma interface de chat simples, onde os participantes podem enviar e receber mensagens em tempo real. Ao final deste tutorial, você terá um aplicativo de chat totalmente funcional que poderá estender e personalizar conforme suas necessidades específicas. Vamos começar!

Pré-requisitos

Para seguir este tutorial, você precisará de uma conta SuperViz e de um token de desenvolvedor. Se você já possui uma conta e um token de desenvolvedor, pode passar para a próxima etapa.

Criar uma conta

Para criar uma conta, vá para https://dashboard.superviz.com/register e crie uma conta usando o Google ou um email/senha. É importante notar que, ao usar email/senha, você receberá um link de confirmação que precisará clicar para verificar sua conta.

Obtendo um Token de Desenvolvedor

Para usar o SDK, você precisará fornecer um token de desenvolvedor, pois este token é essencial para associar as requisições do SDK à sua conta. Você pode recuperar tanto tokens de desenvolvimento quanto de produção no painel de controle do SuperViz. Copie e salve o token de desenvolvedor, pois você precisará dele nas próximas etapas deste tutorial.

Passo 1: Configurar Sua Aplicação React

Para começar, você precisará configurar um novo projeto React, onde integraremos o SuperViz para comunicação em tempo real.

1. Criar um Novo Projeto React

Primeiro, crie uma nova aplicação React usando o Create React App com TypeScript.

npm create vite@latest realtime-chat -- --template react-ts
cd realtime-chat

2. Instalar Bibliotecas Necessárias

Em seguida, instale as bibliotecas necessárias para nosso projeto:

npm install @superviz/sdk uuid react-icons

• @superviz/sdk: Para integrar os recursos de comunicação em tempo real.
• uuid: Uma biblioteca para gerar identificadores únicos, útil para criar IDs únicos de participantes.
• react-icons: Uma biblioteca para incluir ícones em aplicativos React, usada aqui para o ícone do botão de envio.

3. Configurar o Tailwind

Neste tutorial, usaremos o framework Tailwind CSS. Primeiro, instale o pacote do Tailwind.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Depois, precisamos configurar o caminho do template. Abra o arquivo tailwind.config.js na raiz do projeto e insira o seguinte código:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

Em seguida, adicione as diretivas do Tailwind ao arquivo CSS global. (src/index.css)

@tailwind base;
@tailwind components;
@tailwind utilities;

4. Configurar Variáveis de Ambiente

Crie um arquivo .env na raiz do projeto e adicione sua chave de desenvolvedor do SuperViz. Esta chave será usada para autenticar sua aplicação com os serviços do SuperViz.

VITE_SUPERVIZ_API_KEY=YOUR_SUPERVIZ_DEVELOPER_KEY

Passo 2: Implementar a Aplicação Principal

Nesta etapa, vamos implementar a lógica principal da aplicação para inicializar o SuperViz e lidar com as mensagens de chat em tempo real.

1. Implementar o Componente App

Abra o arquivo src/App.tsx e configure o componente principal da aplicação usando o SuperViz para gerenciar a funcionalidade de chat.

import { v4 as generateId } from 'uuid';
import { useCallback, useEffect, useState, useRef } from "react";
import SuperVizRoom, { Realtime, RealtimeComponentEvent, RealtimeMessage } from '@superviz/sdk';
import { IoMdSend } from "react-icons/io";

Explicação:

• Imports: Importa os componentes necessários do React, SuperViz, UUID, e React Icons para gerenciar o estado, inicializar o SuperViz e renderizar a interface do chat.

2. Definir Constantes

Defina constantes para a chave da API, ID da sala e tipos de mensagem.

const apiKey = import.meta.env.VITE_SUPERVIZ_API_KEY as string;
const ROOM_ID = 'realtime-chat';

type Message = RealtimeMessage & {
  data: {
    participantName: string;
    message: string;
  }
}

Explicação:

• apiKey: Recupera a chave da API do SuperViz a partir das variáveis de ambiente.
• ROOM_ID: Define o ID da sala para a sessão do SuperViz.
• Message: Um tipo que estende o RealtimeMessage para incluir o nome do participante e o conteúdo da mensagem.

3. Criar o Componente App

Configure o componente principal App e inicialize as variáveis de estado e referências.

export default function App() {
  const participant = useRef({
    id: generateId(),
    name: 'participant-name',
  });
  const channel = useRef<any | null>(null);
  const [initialized, setInitialized] = useState(false);
  const [message, setMessage] = useState('');
  const [messages, setMessages] = useState<Message[]>([]);
}

Explicação:

• participant: Armazena o ID e o nome do participante atual usando useRef.
• channel: Armazena a referência para o canal de comunicação em tempo real.
• initialized: Rastreamento de se o SuperViz foi inicializado.
• message & messages: Gerencia a mensagem atual e a lista de mensagens do chat.

4. Inicializar o SuperViz

Crie uma função para inicializar o SuperViz e configurar o gerenciamento de mensagens em tempo real.

const initialize = useCallback(async () => {
  if (initialized) return;

  const superviz = await SuperVizRoom(apiKey, {
    roomId: ROOM_ID,
    participant: participant.current,
    group: {
      id: 'realtime-chat',
      name: 'realtime-chat',
    },
  });

  const realtime = new Realtime();
  superviz.addComponent(realtime);
  setInitialized(true);

  realtime.subscribe(RealtimeComponentEvent.REALTIME_STATE_CHANGED, () => {
    channel.current = realtime.connect('message-topic');

    channel.current.subscribe('message', (data: Message) => {
      setMessages((prev) => [...prev, data].sort((a, b) => a.timestamp - b.timestamp));
    });
  });
}, [initialized]);

Explicação:

• initialize: Inicializa o SuperViz, configura o componente de comunicação em tempo real e assina o tópico de mensagens.
• Realtime: Gerencia a comunicação em tempo real para o chat.
• channel.current: Armazena a conexão com o canal ‘message-topic’, onde as mensagens são publicadas e recebidas.

5. Lidar com o Envio de Mensagens

Crie uma função para enviar mensagens para o chat.

const sendMessage = useCallback(() => {
  if (!channel.current) return;

  channel.current.publish('message', {
    message,
    participantName: participant.current!.name,
  });

  setMessage('');
}, [message]);

Explicação:

• sendMessage: Publica a mensagem atual no canal ‘message-topic’ e redefine o campo de mensagem.

6. Usar o Hook useEffect para Inicialização

Use o hook useEffect para acionar a função initialize ao montar o componente.

useEffect(() => {
  initialize();
}, [initialize]);

Explicação:

• useEffect: Chama a função initialize uma vez quando o componente é montado, configurando o ambiente do SuperViz e o chat em tempo real.

Passo 3: Renderizar a Interface do Chat

Por fim, retorne a estrutura JSX para renderizar a interface do chat.

return (
  <div className='w-full h-full bg-gray-200 flex items-center justify-center flex-col'>
    <header className='w-full p-5 bg-purple-400 flex items-center justify-between'>
      <h1 className='text-white text-2xl font-bold'>Realtime Chat</h1>
    </header>
    <main className='flex-1 flex w-full flex-col overflow-hidden'>
      <div className='flex-1 bg-gray-300 w-full p-2'>
        {
          messages.map((message) => (
            <div className={`${message.participantId === participant.current!.id ? 'justify-end' : 'justify-start'} w-full flex mb-2`}>
              <div className={`${message.participantId === participant.current!.id ? 'bg-purple-200' : 'bg-blue-300'} text-black p-2 rounded-lg max-w-xs`}>
                <div className={`${message.participantId === participant.current!.id ? 'text-right' : 'text-left'} text-xs text-gray-500`}>
                  {message.participantId === participant.current!.id ? 'Você' : message.data.participantName}
                </div>
                {message.data.message}
              </div>
            </div>
          ))
        }
      </div>
      <div className='p-2 flex items-center justify-between gap-2 w-full'>
        <input
          type="text"
          placeholder="Digite sua mensagem..."
          className="flex-1 border rounded-full px-4 py-2 focus:outline-none"
          value={message}
          onChange={(e) => setMessage(e.target.value)}
        />
        <button
          className='bg-purple-400 text-white px-4 py-2 rounded-full disabled:opacity-50'
          onClick={sendMessage}
          disabled={!message || !channel.current}
        >
          <IoMdSend />
        </button>
      </div>
    </main>
  </div>
)

Explicação:

• Interface do Chat: Exibe as mensagens do chat e um campo de entrada com um botão de envio. As mensagens são estilizadas de forma diferente, dependendo se foram enviadas pelo participante atual ou por outros.

Passo 4: Entendendo a Estrutura do Projeto

Aqui está uma visão geral de como a estrutura do projeto suporta uma aplicação de chat em tempo real:

• App.tsx:
  • Inicializa o SuperViz e configura a funcionalidade de chat em tempo real.
  • Gerencia o envio e o recebimento de mensagens de chat em tempo real.
• Interface do Chat: Exibe as mensagens em formato de balão de chat e fornece um campo de entrada e um botão de envio para os usuários enviarem mensagens.
• Comunicação em Tempo Real: Gerencia a comunicação em tempo real entre os participantes usando o SuperViz.

Passo 5: Executando a Aplicação

1. Iniciar a Aplicação React

Para rodar sua aplicação, use o seguinte comando no diretório do projeto:

npm run dev

Este comando iniciará o servidor de desenvolvimento e abrirá sua aplicação no navegador padrão. Você pode interagir com a interface de chat e ver as mensagens em tempo real à medida que outros participantes se conectam.

2. Testar a Aplicação

• Mensagens em Tempo Real: Abra a aplicação em várias janelas ou abas do navegador para simular vários participantes e verificar se as mensagens são enviadas e recebidas em tempo real.
• Interação Colaborativa: Teste a responsividade da aplicação enviando mensagens e observando como o chat é atualizado para todos os participantes.

Resumo

Neste tutorial, construímos um aplicativo de chat em tempo real usando o SuperViz. Configuramos uma aplicação React para lidar com mensagens em tempo real, permitindo que vários usuários se comuniquem de forma fluida. Esta configuração pode ser estendida e personalizada para se adequar a vários cenários onde a comunicação em tempo real é essencial.

Sinta-se à vontade para explorar o código completo e mais exemplos no repositório do GitHub para mais detalhes.