Postavil jsem věc, tweetoval o tom a slíbil, že o tom napíšu. Do teď jsem to neudělal.
V tomto tutoriálu vytvoříme grafický editor pro spolupráci v reálném čase, který napodobí funkce ikonického programu Microsoft Paint ve Windows XP. Používáme základní funkce editorů pro manipulaci s pixely a rozšiřujeme je na více uživatelů, což umožňuje spolupráci v reálném čase. Kromě toho chceme být schopni sledovat počet uživatelů spolupracujících na projektu v určitou dobu a také pro ně vytvořit médium pro komunikaci prostřednictvím chatu.
Na konci tohoto tutoriálu byste měli mít v prohlížeči grafický editor, který vypadá takto.
Vyzkoušejte si ukázku.
Cílem projektu je umožnit spolupráci v reálném čase s možnými případy použití v distribuovaných konstrukčních týmech nebo do učeben. Pohánějící naši spolupráci v reálném čase je PubNub, poskytuje bezpečnou, škálovatelnou a spolehlivou infrastrukturu v reálném čase pro napájení jakékoli aplikace prostřednictvím její globální sítě Data Stream Network. K připojení více klientů pomocí grafického editoru použijeme sadu PubNub JavaScript SDK. Cílem je provést změny na obrazovkách klientů, aby se projevily na všech ostatních.
Předpoklady pro vytváření kolaborativního Microsoft Paint
- Základní znalost JavaScriptu
- Uzel a NPM
- Prohlížeč jako Chrome, Firefox nebo Safari
Pro začátek budeme muset vytvořit několik souborů a složek. Musíme vytvořit src a vytvořte dva nové soubory - main.css a app.js , k těm se vrátíme o něco později. Budeme potřebovat několik obrazových podkladů, aby grafický editor vypadal přitažlivě. V kořenovém adresáři vytvořte složku s názvem images , stáhněte si obrazové prostředky a vložte je do složky obrázků. Nyní vytvoříme index.html soubor v kořenovém adresáři a vložte následující kód:
V index.html , <header> podrží lištu nabídky aplikací s uložit tlačítko, které nám umožňuje lokálně uložit naši práci. Hned po <header> máme <section> kde jsou umístěny ovládací prvky našeho editoru, použijeme pouze možnost štětce. <section> za ním následuje <div> tag s ID sketch ve kterém je umístěn náš <canvas> s ID paint , <canvas> tag je důležitý, protože nám umožňuje kreslit grafiku v prohlížeči. Poznamenejte si ID obou, protože na ně budeme muset odkazovat při přidávání funkcí do našeho grafického editoru pomocí JavaScriptu. Další věc, kterou musíme vzít na vědomí, je <footer> tag, který obsahuje pár <div> tagy, které nám umožní měnit barvu štětce a kreslit více barvami. Na konci <footer> , máme <h1> tag, který budeme používat ke sledování počtu spolupracovníků online.
Chcete-li do naší aplikace přidat styl, musíme do src> main.css vložit následující
Post styling, musíme přidat funkčnost do naší aplikace. Za tímto účelem vložíme následující do src> app.js a projděte si, co tento kód dělá.
Naše app.js definuje funkcionalitu našeho grafického editoru. Na prvním řádku inicializujeme PubNub a potřebujeme přidat naše klíče PubNub Publish a Subscribe. Pokud nemáte účet PubNub, zaregistrujte si bezplatný účet a vytvořte si klíče API. Zaregistrujte se a přihlaste se pomocí formuláře níže:
Poté definujeme objekt s názvem mspaint která má různé vlastnosti. V start vlastnost, používáme funkci, která inicializuje naše plátno provedením několika věcí:
- Kontext jsme nastavili na „2d“, protože budeme kreslit pouze ve 2d
- Nastavíme výšku a šířku našeho plátna
Zde používáme subscribe() způsob, jak se přihlásit k odběru kanálu, kreslit které jsme definovali dříve. Poté definujeme funkci zpětného volání drawFromStream() který shromažďuje kresby vytvořené jinými uživateli a umožňuje, aby se tyto kresby odrážely na uživatelském plátně. Dále inicializujeme PubNub Presence, abychom měli přehled o počtu uživatelů používajících grafický editor najednou.
Máme také několik posluchačů událostí, které sledují, kdy se tlačítko myši zvedne, pohne a vrátí dolů. Posluchači události převádějí tyto pohyby do kreseb na plátně. Když uživatel dokončí kreslení, chceme, aby se aktivita uživatele na jeho plátně objevila na plátnech každého dalšího uživatele, se kterým spolupracuje. Víme, že uživatel kreslí, když se jeho tlačítko myši vrátí zpět. Využíváme tedy posluchače událostí, který sleduje, kdy se zvedne tlačítko myši uživatele. Zde přidáváme publish() metodu ze sady PubNub JavaScript SDK, aby se kresba uživatele odrážela i na plátně všech ostatních uživatelů.
Abychom mohli spustit náš grafický editor, musíme soubory obsluhovat lokálně. K tomu budeme muset nainstalovat http-server spuštěním npm -g i http-server . V kořenovém adresáři našich projektů spusťte http-server ve vašem terminálu a máme funkční editor.
Dokončili jsme část spolupráce v reálném čase, nyní chceme umožnit komunikaci mezi spolupracovníky prostřednictvím chatu. PubNub Chat je škálovatelné a spolehlivé rozhraní In-App Messaging API, které podporuje zážitky založené na chatu.
Implementujeme to přidáním další položky do naší nabídky, která otevře modal obsahující sekci chatu. V index.html přidejte <li><a href="#" id="openModal">Chat</a></li> na <header> hned za poslední <li> štítek. Nyní, když máme další položku na liště nabídek, musíme tento kód, který tvoří náš modal, vložit hned za uzavírací </header> štítek.
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Type your message and Press Enter.</p>
<input id="input" placeholder="Your Message Here" />
<p>Forum:</p>
<p></p>
<div id="box"></div>
</div>
</div>
Modal obsahuje vstupní pole, kam mohou uživatelé psát zprávy, které si chtějí posílat. Odeslané a přijaté zprávy jsou zobrazeny v <div> tag s ID box , bereme toto ID na vědomí, protože jej používáme k aktualizaci <div> s novými zprávami v chatu. V app.js , níže uvedený kód přidává funkcionalitu do modalu.
let modal = document.getElementById("myModal");
let btn = document.getElementById("openModal");
let span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
};
span.onclick = function() {
modal.style.display = "none";
};
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
};
Tento kód nám dává různé způsoby interakce a používání modalu. Nyní, když to funguje, musíme pracovat na propojení chatů různých uživatelů pomocí PubNub. V dolní části app.js , máme funkci chat() která se přihlásí k odběru dat chatových zpráv v našem grafickém editoru pro spolupráci a také funkci zpětného volání - publishMessages() který publikuje data zpráv do chatovacího kanálu a zpřístupňuje všechny odeslané zprávy všem uživatelům chatu v grafickém editoru. Poté inicializujeme proměnné - box pro <div> tag, který obsahuje odpovědi na chat, vstup který zpracovává data z <input> tag a kanál, kde probíhá komunikace v datovém toku PubNub. Poté se přihlásíme k odběru kanálu pomocí subscribe() a přidejte posluchač, který uživatelům aktualizuje nejnovější zprávy z chatu tím, že je vloží do našeho chatovacího modu. Máme také eventListener() způsob publikování zpráv na kanálu stisknutím klávesy. Potom použijeme onload() způsob, abyste se ujistili, že funkce chatu je povolena při načítání okna. Spusťte http-server a mít pracovní chat, který můžete přidat do našeho grafického editoru pro spolupráci.
Nyní máme web Microsoft Paint pro spolupráci v reálném čase, který dokáže sledovat počet online uživatelů a propojovat je prostřednictvím chatu. Pokud máte nějaké dotazy, neváhejte mě kontaktovat na Twitteru.
Omlouvám se, že mi trvalo tak dlouho, než jsem to vydal. Doufám, že vám to bylo užitečné.