Tutorial Avançado de Chat em Tempo Real com WebRTC e Scaledrone (2023)

Introdução

O WebRTC (Web Real-Time Communication) é uma coleção de protocolos e APIs que possibilitam conexões ponto a ponto em tempo real dentro do navegador. Este tutorial abordará os fundamentos do WebRTC, fornecendo uma compreensão sólida e prática. Além disso, mostraremos como criar um chat de texto 1-para-1, onde os usuários podem inserir seus nomes de usuário e serem atribuídos um avatar de emoji aleatório.

O que é WebRTC?

WebRTC é ideal para jogos multiplayer, chat, videoconferências, chamadas de voz e compartilhamento de arquivos. Suportado por Chrome, Firefox, Edge e Opera (exceto Safari em desenvolvimento), WebRTC permite comunicação direta entre pares sem a necessidade de servidores para codificação.

Termos do WebRTC

Sinalização

O processo de descoberta e negociação de pares no WebRTC é chamado de sinalização. Para que dois dispositivos em redes diferentes se encontrem, é necessário um servidor de sinalização. Neste tutorial, utilizamos o Scaledrone, um serviço de mensagens em tempo real, para sinalização, eliminando a necessidade de código do servidor.

Candidatos ICE

Os pares trocam candidatos ICE até encontrarem um método de comunicação comum. Após o estabelecimento da conexão, os candidatos ICE podem ser trocados novamente para melhorar a comunicação.

Servidor STUN

Servidores STUN são usados para obter um endereço de rede externo e contornar firewalls.

Estrutura do HTML

O chat terá duas seções: a de mensagens, onde as bolhas de chat aparecem, e o rodapé, de onde é possível inserir e enviar mensagens.

<div class="content">
  <div class="messages"></div>
  <form class="footer" onsubmit="return false;">
    <input type="text" placeholder="Sua mensagem..">
    <button type="submit">Enviar</button>
  </form>
</div>

Para renderizar as mensagens recebidas, utilizaremos um elemento de modelo (template) acessível por código JavaScript.

<template data-template="message">
  <div class="message">
    <div class="message__name"></div>
    <div class="message__bubble"></div>
  </div>
</template>

Configuração JavaScript

Vamos configurar variáveis iniciais, como emojis aleatórios para avatares, solicitar o nome do usuário e gerar um hash de chat exclusivo para cada conversa.

const possibleEmojis = [...];  // Lista de emojis
const emoji = randomEmoji();  // Função para obter emoji aleatório
const name = prompt("Qual é o seu nome?");
const chatHash = location.hash.substring(1) || Math.floor(Math.random() * 0xFFFFFF).toString(16);

Agora, definiremos variáveis globais para o RTC (Real-Time Communication) e iniciaremos a conexão com o servidor de sinalização Scaledrone.

const configuration = { iceServers: [{ url: 'stun:stun.l.google.com:19302' }]};
let pc;  // Instância RTCPeerConnection
let dataChannel;  // Canal de dados RTCDataChannel
const drone = new ScaleDrone('SEU_ID_DO_CANAL_NO_SCALEDRO...');  // Substituir pelo seu ID de canal
const roomName = 'observable-' + chatHash;
let room;

drone.on('open', error => {
  // Configuração do Scaledrone
  // ...
});

// Função para enviar mensagens de sinalização via Scaledrone
function sendSignalingMessage(message) {
  drone.publish({ room: roomName, message });
}

// Início do WebRTC
function startWebRTC(isOfferer) {
  // Configuração do WebRTC
  // ...
}

// Configuração do canal de dados e manipuladores de eventos
function setupDataChannel() {
  // Configuração do canal de dados
  // ...
}

// Função para ouvir mensagens de sinalização
function startListentingToSignals() {
  // Ouvir dados do Scaledrone
  // ...
}

// Função chamada quando uma descrição local é criada
function localDescCreated(desc) {
  // Atualizar descrição local e enviar mensagem de sinalização
  // ...
}

// Inserção de mensagens no DOM
function insertMessageToDOM(options, isFromMe) {
  // Renderizar mensagens no DOM
  // ...
}

// Configuração do formulário para envio de mensagens
const form = document.querySelector('form');
form.addEventListener('submit', () => {
  // Envio de mensagens via RTCDataChannel
  // ...
});

// Inserir mensagem informativa sobre a URL do chat
insertMessageToDOM({content: 'URL do chat: ' + location.href});

Conclusão

Este tutorial abrange os aspectos essenciais para a implementação de um chat em tempo real utilizando WebRTC e Scaledrone. Ao seguir estas instruções, você poderá criar uma experiência de chat interativa e dinâmica para seus usuários. Não se esqueça de conferir a demo ao vivo e o código-fonte completo para mais detalhes.

🎉 Confira a e o .

Ao seguir este guia, você estará preparado para criar chats envolventes e escaláveis utilizando tecnologias de ponta.