Neste tutorial de 15 minutos, vamos criar um aplicativo de bate-papo descentralizado simples que é executado inteiramente em um navegador da Web.
Tudo o que o senhor precisará é de um editor de texto, a navegador da webe um conhecimento básico de como salvar HTML e abri-los no navegador.
Vamos usar o Bugout, uma biblioteca JavaScript que cuida da rede peer-to-peer e da criptografia.
- Se quiser apenas os arquivos, baixe index.html neste repositório.
Ok, vamos começar!
Comece com o boilerplate HTML
Para manter este tutorial simples, faremos tudo em um único .html usando Javascript puro. Não usaremos nenhuma ferramenta de compilação, minificadores, transpiladores de linguagem etc. O senhor provavelmente precisará dessas coisas quando construir algo mais complicado, mas, para os fins deste tutorial, vamos nos ater ao bom e velho HTML e JavaScript.
A primeira coisa de que precisamos é uma página da Web básica em que possamos começar a criar nosso aplicativo. Também precisamos de uma função simples para gerar texto na tela. Aqui está o HTML que o senhor pode usar para começar:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Bugout chat tutorial</title>
<style>
body { background-color: #333; font-size: 1.5em; padding: 0em 0.25em; }
pre { color: #fff; white-space: pre-wrap; word-wrap: break-word; text-shadow: 0 0 10px #ccc; }
</style>
<script>
function log(message) {
document.getElementById("log").textContent += message + "\n";
}
</script>
</head>
<body>
<pre id="log"></pre>
</body>
<script>
log("Hello world!");
/***** Your code goes here! *****/
</script>
</html>
Vá em frente e salve o snippet acima em um arquivo chamado index.html e, em seguida, abra esse arquivo em seu navegador da Web.
O senhor deve ver as palavras “Hello world!” em texto branco na parte superior da tela.
Ótimo, estamos prontos e funcionando com uma página da Web básica e um log() que imprimirá texto na tela.
Importar Bugout
Agora vamos obter o Bugout importada para que possamos usá-la para conectar os navegadores das pessoas em um estilo ponto a ponto. Carregaremos a biblioteca diretamente de sua página do GitHub.
Adicione o seguinte <script> na tag <head> da seção HTML, logo antes do fechamento </head> tag:
<script src="https://chr15m.github.io/bugout/bugout.min.js" type="application/javascript"></script>
Salve seu index.html novamente e pressione atualizar no navegador. Se o senhor souber como usar o console do desenvolvedor o senhor pode verificar a guia de rede para verificar o bugout.min.js está sendo carregado. Se isso não acontecer, não se preocupe, pule esta etapa e siga em frente.
Criar um objeto Bugout
Vamos criar um objeto Bugout que possamos usar para conversar com outros navegadores. Adicione o seguinte código no final do arquivo, na tag script, depois de dizer “Seu código vai aqui!”:
var b = Bugout(); log(b.address() + " [ me ]");
Agora, quando o senhor clicar em recarregar, deverá ver “Hello world!” como antes e, na próxima linha, deverá ver o endereço dessa instância do Bugout. Ele será parecido com o seguinte: bKpdPiLJjPmwrYWoZYXVWbJFcEMUpfh6BN [ me ].
O senhor pode notar que esse endereço se parece um pouco com um endereço de Bitcoin. Isso ocorre porque o Bugout usa um tipo semelhante de técnica criptográfica para criar seu endereço a partir de um par de chaves criptográficas internas. A criptografia é a forma pela qual os nós do Bugout podem ter certeza de que estão recebendo informações do nó do qual acham que estão recebendo. Na rede, os nós do Bugout podem encontrar e identificar uns aos outros usando esses endereços.
Conecte sua instância do Bugout
Agora que temos uma instância do Bugout em execução em nossa página da Web, como podemos conectá-la a outras instâncias do Bugout em execução em páginas nos computadores de outras pessoas?
Na vida real, quando queremos nos encontrar com alguém, compartilhamos o endereço do local de encontro. Com os computadores é a mesma coisa. Sempre que o senhor quiser conectar dois programas de computador em uma rede, precisará de algum tipo de endereço. Por exemplo, para chegar a esta página da Web, o senhor seguiu um link para o URL e seu computador carregou a página a partir desse endereço.
As instâncias do Bugout se conectam a endereços chamados “identificadores”, que o senhor pode considerar como nomes de salas. O primeiro argumento passado para a função Bugout() é o identificador ou o nome da sala ao qual o senhor deseja que ele se conecte.
Se o senhor não fornecer um argumento de nome de sala, a instância do Bugout se conectará ao seu próprio .address() por padrão. Isso significa que ela ouvirá outras instâncias do Bugout que se conectarem a ela. Outras instâncias podem se conectar passando o endereço .address() como primeiro argumento.
Para nossa sala de bate-papo, queremos conectar todas as instâncias do Bugout em uma única sala. Fazemos isso usando o mesmo nome de sala como primeiro argumento.
Atualize o código para passar um argumento "bugout-chat-tutorial" como o nome da sala. Também instalaremos um manipulador de eventos que será acionado sempre que virmos outra instância do Bugout conectando-se à mesma sala usando b.on("seen").
Substitua a linha var b = Bugout(); pelo código a seguir. Deixe a linha de registro de endereço lá.
var b = Bugout("bugout-chat-tutorial");
b.on("seen", function(address) { log(address + " [ seen ]"); });
Quando o senhor atualizar a página, poderá ver outras instâncias do Bugout se conectando – essas são outras pessoas fazendo esse mesmo tutorial! O senhor pode abrir o index.html em outra guia ou navegador e, após alguns segundos em ambas as janelas, o senhor verá as duas instâncias do Bugout descobrindo uma à outra e gerando ...ADDRESS... [ seen ] com o endereço um do outro.
Recebimento de mensagens
Agora que temos instâncias do Bugout conectadas, podemos enviar dados entre elas. Primeiro, vamos lidar com o recebimento de mensagens. Quando nossa instância do Bugout recebe uma mensagem, queremos adicioná-la diretamente ao registro para que possamos ver quais mensagens as pessoas estão enviando para a sala.
Adicione este trecho de JavaScript abaixo do código de instanciação do Bugout que o senhor adicionou anteriormente:
b.on("message", function(address, message) {
log(address + ": " + message);
});
Esse código registrará todas as mensagens que a instância do Bugout receber com o endereço do remetente.
Se atualizar a página neste ponto, poderá começar a ver mensagens de qualquer outra pessoa que tenha feito este tutorial e esteja enviando mensagens, já que vocês estão na mesma sala chamada "bugout-chat-tutorial".
Envio de mensagens
O envio de uma mensagem é igualmente fácil. Podemos usar o b.send("Hello world!"); para enviar uma mensagem para a sala ou para o b.send(address, "Hello you."); para enviar a uma instância específica do Bugout. Se o senhor usar o segundo método, a transmissão será criptografada com uma chave fornecida pela instância receptora (se a outra parte estiver on-line).
Mas antes de adicionarmos a funcionalidade de envio, precisamos de uma maneira de os usuários digitarem as mensagens que desejam enviar, portanto, vamos fazer um pequeno desvio na interface do usuário.
Obter entrada do usuário
Precisamos de algum tipo de entrada para que os usuários digitem as mensagens que desejam enviar.
Primeiro, crie uma entrada na qual os usuários possam digitar. Adicione a seguinte tag logo abaixo da tag <pre id="log"> :
<pre id="input" contenteditable="true"></pre>
Agora adicione um pouco de estilo para deixar claro que se trata de uma entrada na qual o usuário pode digitar. Adicione isso à tag <style> do cabeçalho:
#input { border-bottom: 1px solid #ccc; background-color: #383838; padding: 0.25em; outline: 0; }
#input::before { content: "> "; }
Finalmente, podemos conectar tudo isso. Adicionaremos um manipulador de eventos que enviará a mensagem que o usuário digitou assim que ele pressionar a tecla Enter. Adicione isso à tag JavaScript após o outro código que o senhor adicionou até agora:
document.getElementById("input").onkeydown = function(ev) {
if (ev.keyCode == 13) {
if (b.lastwirecount) {
b.send(ev.target.textContent);
ev.target.textContent = "";
}
ev.preventDefault();
}
}
Há algumas coisas extras a serem observadas aqui. Estamos verificando o código de tecla 13 (a tecla enter) e também estamos verificando lastwirecount para garantir que só enviaremos uma mensagem quando virmos outra instância do Bugout para a qual enviar. Portanto, o senhor precisará ter duas cópias diferentes de index.html carregadas em guias ou navegadores diferentes para que isso funcione.
Atualize novamente e, quando você vir o [ seen ] o senhor poderá começar a digitar mensagens entre as janelas. O senhor poderá até ver mensagens de outras pessoas que estão fazendo este tutorial.
Então é isso, nosso cliente de bate-papo descentralizado supermínimo está pronto. Aproveite!
Se este tutorial foi útil e o senhor quiser saber mais sobre o material descentralizado que estou criando, pode me encontrar aqui:
Saiba mais
O senhor pode saber mais sobre Bugout na página do projeto no GitHub. O senhor também pode npm install se o senhor gosta disso.
Há também o Documentação da API onde o senhor pode consultar todos os métodos, eventos e propriedades do Bugout.
Se o senhor quiser um bate-papo descentralizado na Web mais completo, inspirado no IRC, então dê uma olhada no dirc.
Ir além
Os leitores mais atentos terão algumas perguntas a esta altura.
- A sinalização do WebRTC ainda não é centralizada?
- O que acontece com as mensagens quando alguém fica off-line?
- Como podemos lidar com as identidades quando não há um servidor central?
Para obter algumas soluções possíveis para a última pergunta, o senhor pode conferir minha postagem em vinculação descentralizada de identidade.
Estou trabalhando ativamente nas duas primeiras perguntas. Se o senhor quiser saber mais e acompanhar o que estou construindo, pode me encontrar nos links acima.
Gostaria muito de ouvir o que o senhor tem a dizer sobre as coisas descentralizadas que está criando também!
Sobre Chris McCormick
Chris McCormick é um desenvolvedor de software freelancer que trabalha com tecnologia da Web descentralizada em seu tempo livre.