V tomto 15minutovém tutoriálu vytvoříme jednoduchou decentralizovanou chatovací aplikaci, která běží výhradně ve webovém prohlížeči.
Vše, co budete potřebovat, je textový editor , webový prohlížeč a základní znalosti o ukládání HTML soubory a otevřete je v prohlížeči.
Budeme používat Bugout, JavaScriptovou knihovnu, která se stará o peer-to-peer sítě a kryptografii.
- Pokud chcete pouze soubory, stáhněte si index.html v tomto úložišti.
Dobře, můžeme začít!
Začněte standardem HTML
Aby byl tento tutoriál jednoduchý, uděláme vše v jednom .html soubor pomocí čistého Javascriptu. Nebudeme používat žádné nástroje pro sestavování, minifikátory, transpilátory jazyků atd. Tyto věci pravděpodobně budete potřebovat, když budete sestavovat něco složitějšího, ale pro účely tohoto tutoriálu zůstaneme u starého dobrého HTML a JavaScriptu.
První věc, kterou potřebujeme, je základní standardní webová stránka, do které můžeme začít budovat naši aplikaci. Potřebujeme také jednoduchou funkci pro výstup textu na obrazovku. Zde je kód HTML, pomocí kterého můžete začít:
<!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>
Pokračujte a uložte úryvek výše do souboru s názvem index.html a poté tento soubor otevřete ve svém webovém prohlížeči.
Měli byste vidět slova "Ahoj světe!" bílým textem v horní části obrazovky.
Skvělé, máme základní webovou stránku a log() funkce, která vytiskne text na obrazovku.
Importovat chybu
Nyní naimportujeme knihovnu Bugout, abychom ji mohli použít k propojení prohlížečů lidí dohromady ve stylu peer-to-peer. Knihovnu načteme přímo z její stránky GitHub.
Přidejte toto <script> tag do <head> část HTML těsně před koncovou </head> tag:
<script src="https://chr15m.github.io/bugout/bugout.min.js" type="application/javascript"></script>
Uložte si index.html soubor znovu a stiskněte tlačítko Obnovit v prohlížeči. Pokud víte, jak používat vývojářskou konzoli, můžete zkontrolovat kartu sítě a ověřit bugout.min.js soubor se načítá. Pokud ne, nebojte se, tento krok přeskočte a pokračujte.
Vytvořit objekt chyby
Udělejme objekt Bugout, který můžeme použít ke komunikaci s jinými prohlížeči. Přidejte následující kód na konec souboru ve značce skriptu poté, co říká „Váš kód jde sem!“:
var b = Bugout(); log(b.address() + " [ me ]");
Nyní, když stisknete znovu načíst, měli byste vidět "Ahoj světe!" jako předtím a na dalším řádku byste měli vidět adresu této instance Bugout. Bude to vypadat nějak takto:bKpdPiLJjPmwrYWoZYXVWbJFcEMUpfh6BN [ me ] .
Můžete si všimnout, že tato adresa vypadá trochu jako bitcoinová adresa. Je to proto, že Bugout používá podobný typ kryptografické techniky k vytvoření adresy z interního páru kryptografických klíčů. Kryptografie je způsob, jak si uzly Bugout mohou být jisti, že přijímají informace z uzlu, o kterém si myslí, že je přijímají. V síti se mohou uzly chyby najít a identifikovat pomocí těchto adres.
Připojte svou instanci Bugout
Nyní, když máme na naší webové stránce spuštěnou instanci Bugout, jak ji propojíme s dalšími instancemi Bugout spuštěnými na stránkách na počítačích jiných lidí?
V reálném životě, když se chcete s někým setkat, sdílejte adresu místa, kde se setkáte. Počítače jsou stejné. Kdykoli chcete propojit dva počítačové programy přes síť, potřebujete nějaký typ adresy. Chcete-li se například dostat na tuto webovou stránku, použili jste odkaz na její adresu URL a váš počítač načetl tuto stránku z této adresy.
Instance chyb se připojují k adresám nazývaným „identifikátory“, které si můžete představit jako názvy místností. První argument předán do Bugout() instance je identifikátor nebo název místnosti, ke které se má připojit.
Pokud nezadáte argument názvu místnosti, instance Bugout se připojí k vlastnímu .address() ve výchozím stavu. To znamená, že bude naslouchat dalším instancím Bugout, které se k němu připojí. Ostatní instance se mohou připojit předáním .address() vaší instance Bugout jako jejich první argument.
Pro naši chatovací místnost chceme propojit všechny instance Bugout dohromady v jedné místnosti. Uděláme to tak, že použijeme stejný název místnosti jako první argument.
Aktualizujte kód tak, aby předal argument "bugout-chat-tutorial" jako název místnosti. Nainstalujeme také obslužnou rutinu události, která se spustí pokaždé, když uvidíme další instanci Bugout připojující se ke stejné místnosti pomocí b.on("seen") .
Nahraďte řádek var b = Bugout(); s následujícím kódem. Nechte tam řádek pro protokolování adresy.
var b = Bugout("bugout-chat-tutorial");
b.on("seen", function(address) { log(address + " [ seen ]"); });
Když nyní obnovíte stránku, můžete vidět připojení dalších instancí Bugout – to jsou další lidé, kteří dělají stejný návod! Můžete otevřít index.html na jiné kartě nebo v prohlížeči a po několika sekundách v obou oknech byste měli vidět dvě instance chyby, které se navzájem objevují a vydávají ...ADDRESS... [ seen ] se vzájemnou adresou.
Přijímání zpráv
Nyní, když se připojují instance Bugout, můžeme mezi nimi posílat data. Nejprve se vypořádejme s přijímáním zpráv. Když naše instance Bugout obdrží zprávu, chceme ji přidat přímo do protokolu, abychom viděli, jaké zprávy lidé do místnosti posílají.
Přidejte tento fragment JavaScriptu pod instanční kód Bugout, který jste přidali dříve:
b.on("message", function(address, message) {
log(address + ": " + message);
}); Tento kód zaznamená každou zprávu, kterou naše instance Bugout obdrží, s adresou odesílatele.
Pokud v tomto okamžiku obnovíte stránku, můžete začít vidět zprávy od někoho jiného, kdo provedl tento tutoriál a posílá zprávy, protože jste ve stejné místnosti s názvem "bugout-chat-tutorial" .
Odesílání zpráv
Odeslání zprávy je stejně snadné. Můžeme použít b.send("Hello world!"); pro odeslání zprávy do místnosti nebo b.send(address, "Hello you."); odeslat do konkrétní instance chyby. Pokud použijete druhý způsob, přenos bude zašifrován klíčem dodaným přijímající instancí (pokud je druhá strana online).
Než však přidáme funkci odesílání, potřebujeme způsob, jak mohou uživatelé zadávat zprávy, které chtějí odeslat, takže si uděláme malou odbočku v uživatelském rozhraní.
Získejte uživatelský vstup
Potřebujeme nějaký druh vstupu, aby uživatelé mohli psát zprávy, které chtějí odeslat.
Nejprve vytvořte vstup, do kterého mohou psát. Přidejte následující značku těsně pod <pre id="log"> tag:
<pre id="input" contenteditable="true"></pre>
Nyní přidejte nějaký styl, aby bylo jasné, že se jedná o vstup, do kterého může uživatel psát. Přidejte toto do <style> sekce záhlaví:
#input { border-bottom: 1px solid #ccc; background-color: #383838; padding: 0.25em; outline: 0; }
#input::before { content: "> "; } Konečně to všechno můžeme propojit. Přidáme obslužnou rutinu události, která odešle zprávu, kterou uživatel zadal, jakmile stiskne klávesu enter. Přidejte toto do značky JavaScript za jiný kód, který jste dosud přidali:
document.getElementById("input").onkeydown = function(ev) {
if (ev.keyCode == 13) {
if (b.lastwirecount) {
b.send(ev.target.textContent);
ev.target.textContent = "";
}
ev.preventDefault();
}
}
Zde je třeba poznamenat několik dalších věcí. Kontrolujeme kód klíče 13 (klíč enter) a také kontrolujeme lastwirecount abychom se ujistili, že zprávu odešleme až poté, co uvidíme další instanci chyby, do které ji můžeme odeslat. Budete tedy potřebovat dvě různé kopie index.html načteno v různých kartách nebo prohlížečích, aby to fungovalo.
Obnovte znovu a jakmile uvidíte [ seen ] zprávy můžete začít psát zprávy mezi okny. Můžete dokonce vidět zprávy přicházející od jiných lidí, kteří provádějí tento tutoriál.
Takže to je vše, náš super minimální decentralizovaný chatovací klient je hotový. Užijte si to!
Pokud byl tento tutoriál užitečný a chcete se dozvědět více o decentralizovaných věcech, které stavím, najdete mě zde:
- Přihlaste se k odběru mého zpravodaje
- Sledujte mě na Twitteru na @mccrmx
- Pošlete mi e-mail (také jsem na volné noze)
- Postupujte podle značky kryptografie/decentralizace na mém blogu
Další informace
Více o Bugoutu se můžete dozvědět na stránce projektu GitHub. Můžete také npm install pokud je to vaše věc.
Existuje také dokumentace API, kde můžete vyhledat všechny metody, události a vlastnosti chyby.
Pokud chcete podrobnější decentralizovaný webový chat inspirovaný IRC, podívejte se na dirc.
Jděte dále
Bystrí čtenáři budou mít v tomto bodě několik otázek.
- Není signalizace WebRTC stále centralizovaná?
- Co se stane se zprávami, když někdo přejde do režimu offline?
- Jak můžeme zacházet s identitami, když neexistuje žádný centrální server?
Některá možná řešení poslední otázky najdete v mém příspěvku o propojení decentralizované identity.
Na prvních dvou otázkách aktivně pracuji. Pokud se chcete dozvědět více a držet krok s tím, co stavím, najdete mě na výše uvedených odkazech.
Rád bych od vás také slyšel o decentralizovaných věcech, které budujete!