AngularJS együttműködési tábla a Socket.io-val

  • Szükséges tudás: Közbülső JavaScript
  • Igényel: Node.js, NPM
  • Projekt idő: 2 óra

Az AngularJS különösen jól használható gazdag kliensoldali alkalmazások létrehozásához a böngészőben, és amikor egy kis Socket.io fájlt ad hozzá a keverékhez, a dolgok nagyon érdekessé válnak. Ebben a cikkben egy valós idejű együttműködési táblát fogunk építeni, amely az AngularJS-t használja a kliensoldali alkalmazáshoz és a Socket.io-t az összes csatlakoztatott kliens közötti állapot megosztásához.

Beszéljünk egy kis háztartással, mielőtt nekilátnánk. Feltételezem, hogy Önnek alapvető ismerete van a HTML-ben és a JavaScript-ben, mivel nem fogom lefedni a kód minden kis sarkát. Például nem fogom felhívni azokat a CSS és JavaScript fájlokat, amelyeket a HTML fájl fejébe tettem, mivel nincsenek új információk.

Továbbá arra biztatlak fogd meg a kódot a GitHub-fiókomból hogy kövessem. Jó barátom, Brian Ford is kiváló Socket.io mag , amelyre néhány eredeti elképzelésemet alapoztam.

Az együttműködési táblán a négy fő tulajdonság a jegyzet készítésének képessége, olvassa el a jegyzeteket, frissítsen egy jegyzetet, töröljön egy jegyzetet, és szórakozásból helyezzen át egy jegyzetet a táblára. Igen, ez így van, a standard CRUD funkciókra összpontosítunk. Úgy gondolom, hogy ezekre az alapvető jellemzőkre összpontosítva elegendő kódot fogunk lefedni a minták megjelenéséhez, hogy azokat átvehesse és másutt is alkalmazhassa.

01. A szerver

Először a Node.js szerverrel fogunk kezdeni, mivel ez szolgál majd alapul arra, hogy minden mást felépítsünk.

Node.js szervert fogunk építeni az Express és a Socket.io szolgáltatásokkal. Azért használjuk az Express-t, hogy szép mechanizmust biztosít egy statikus eszközszerver beállításához a Node.js-en belül. Az Express egy csomó igazán fantasztikus funkcióval rendelkezik, de ebben az esetben arra fogjuk használni, hogy az alkalmazást tisztán kettévágjuk a szerver és az ügyfél között.

(Feltételezem, hogy telepítve van a Node.js és az NPM. A gyors Google-keresés megmutatja, hogyan lehet ezeket telepíteni, ha nem.)

02. A csupasz csontok

Tehát a szerver csupasz csontjainak felépítéséhez pár dolgot kell elvégeznünk, hogy elindulhassunk.



// app.js

A.1
var express = igényel ('express'),
app = express ();
szerver = igény ('http'). createServer (alkalmazás),
io = igényel ('socket.io'). figyel (szerver);

A.2
app.configure (function () {
app.use (express.static (__ dirname + '/ public'));
});

A.3
szerver.listen (1337);

A.1 Nyilatkozunk és példányosítjuk Node.js moduljainkat, hogy felhasználhassuk őket az alkalmazásunkban. Deklaráljuk az Express-t, példányosítjuk az Express-t, majd létrehozunk egy HTTP-kiszolgálót, és elküldjük az Express példányba. Innentől kezdve a Socket.io-t példányosítjuk, és azt mondjuk neki, hogy tartsa szemmel a szerver példányunkat.

A.2 Ezután azt mondjuk az Express alkalmazásunknak, hogy a nyilvános könyvtárunkat használja a fájlok kiszolgálására.

A.3 Elindítjuk a szervert, és megadjuk neki, hogy hallgassa a porton 1337 .

Eddig ez elég fájdalommentes és gyors volt. Úgy gondolom, hogy kevesebb, mint 10 sor van a kódban, és már van egy funkcionális Node.js szerverünk. Tovább!

03. Nyújtsa be függőségeit

// csomagok.json
{
„név”: „szögletes kollaborációs tábla”,
„description”: „AngularJS együttműködési tanács”,
'verzió': '0.0.1-1',
„privát”: igaz,
'függőségek': {
„express”: „3.x”,
'socket.io': '0.9.x'
}
}

Az NPM egyik legszebb tulajdonsága az a képesség, hogy deklarálhatja a függőségeit a csomagok.json fájlt, majd automatikusan telepíti őket npm telepítés a parancssorban.

04. Csatlakoztassa a Socket.io szoftvert

Az alkalmazásban már meghatároztuk a kívánt alapvető funkciókat, ezért be kell állítanunk a Socket.io eseményhallgatókat és egy megfelelő lezárást az esemény kezeléséhez az egyes műveletekhez.

Az alábbi kódban észreveszi, hogy ez lényegében az esemény hallgatók és visszahívások konfigurációja. Az első esemény a kapcsolat esemény, amellyel a lezárás során bekötjük a többi eseményünket.

io.sockets.on ('kapcsolat', function (socket) {
socket.on ('createNote', függvény (adatok) {
socket.broadcast.emit ('onNoteCreated', adatok);
});

socket.on ('updateNote', function (adatok) {
socket.broadcast.emit ('onNoteUpdated', adatok);
});

socket.on ('deleteNote', függvény (adatok) {
socket.broadcast.emit ('onNoteDeleted', adatok);
});

socket.on ('moveNote', function (adatok) {
socket.broadcast.emit ('onNoteMoved', adatok);
});
});

Innen felvesszük a hallgatókat createNote , updateNote , deleteNote és moveMegjegyzés . A visszahívási funkcióban pedig egyszerűen közvetítjük, hogy mi történt, hogy minden ügyfél értesülhessen az eseményről.

Néhány dologra érdemes felhívni a figyelmet az egyes eseménykezelők visszahívási funkcióival kapcsolatban. Az egyik, ha mindenkinek szeretne eseményt küldeni, kivéve a beillesztett eseményt kibocsátó kliensnek adás előtte kibocsát függvényhívás. Másodsorban, egyszerűen továbbadjuk az esemény hasznos terheit az érdekelt feleknek, hogy azok a saját belátásuk szerint feldolgozhassák.

05. Indítsa el motorjait!

Most, hogy meghatároztuk függőségeinket, és beállítottuk a Node.js alkalmazást az Express és a Socket.io erőforrásokkal, a Node.js szerver inicializálása nagyon egyszerű.

Először telepítse a Node.js függőségeket, így:

npm telepítés

És akkor a következő módon indítja el a szervert:

csomópont app.js

És akkor! Mész ezt a címet a böngészőben. Bam!

06. Néhány őszinte gondolat, mielőtt továbblépnénk

Elsősorban egy frontend fejlesztő vagyok, és kezdetben kissé megfélemlítettek egy Node.js szerver csatlakoztatásával az alkalmazásomhoz. Az AngularJS rész egy pillanat alatt, de szerveroldali JavaScript volt? Állítsa be a hátborzongató zenét egy horror mozdulatából.

De teljesen felkészültem rá, hogy felfedezhessek egy statikus webszervert néhány kódsorban, és még néhány sorban használjam a Socket.io-t a böngészők közötti események kezelésére. És ez továbbra is csak a JavaScript volt! Az időszerűség kedvéért csak néhány funkcióval foglalkozunk, de remélem, hogy a cikk végére meglátja, hogy könnyű úszni - és a medence mély vége nem is olyan ijesztő.

07. Az ügyfél

Most, hogy megvan a szilárd alapja a szerverünkkel, térjünk át a kedvenc részemre - az ügyfélre! Az AngularJS-t, a jQueryUI-t fogjuk használni a húzható részhez, és a Twitter Bootstrap-et egy stílusalaphoz.

08. A csupasz csontok

Személyes preferenciákként, amikor új AngularJS alkalmazást indítok, szeretném gyorsan meghatározni azt a minimumot, amelyről tudom, hogy szükségem lesz az induláshoz, majd a lehető leggyorsabban el kell kezdeni az iterációt.

Minden AngularJS alkalmazást rendszerindítással kell ellátni, legalább egy vezérlő jelenlétében, ezért általában mindig itt kezdem.

Az alkalmazás automatikus indításához egyszerűen hozzá kell adnia ng-app a HTML csomópontra, amelyben az alkalmazást élni szeretné. Legtöbbször a HTML-címkéhez való hozzáadás tökéletesen elfogadható lesz. Hozzáadtam egy attribútumot is ehhez: ng-app hogy elmondjam neki, hogy a kb modul, amelyet csak egy pillanat alatt definiálok.

// public / index.html

Tudom, hogy legalább egy vezérlőre lesz szükségem, ezért ezt felhasználva felhívom ng-controller és tulajdonítunk neki egy tulajdonságot MainCtrl .

Tehát most egy modul nevű kampóján vagyunk kb és egy nevezett vezérlő MainCtrl . Menjünk előre, és hozzuk létre őket most.

A modul létrehozása meglehetősen egyszerű. Hívással határozhatja meg szögletes.modul és nevet ad neki. Jövőbeni felhasználás céljából az üres tömb második paramétere az, ahol az almodulokat injektálhatja az alkalmazásban való használatra. Ez nem tartozik az oktatóanyag körébe, de hasznos, ha az alkalmazás bonyolultabbá és igényesebbé válik.

// public / js / cooper.js
var app = szögletes.modul ('app', []);

Nyilatkozni fogunk néhány üres helyőrzőt a kb -vel kezdődő modul MainCtrl lent. Ezeket később kitöltjük, de már az elejétől kezdve szemléltetni akartam az alapszerkezetet.

app.controller ('MainCtrl', function ($ hatókör) {});

A Socket.io funkcionalitást a foglalat szolgáltatást, hogy az objektumot be tudjuk zárni, és ne hagyjuk lebegni a globális névtérben.

app.factory ('socket', function ($ rootScope) {});

És amíg itt tartunk, egy úgynevezett irányelvet fogunk deklarálni ragadós cetli amelyet a cetlik funkcionalitásának beágyazására fogunk használni.

app.directive ('stickyNote', function (socket) {});

Tekintsük át tehát, mit tettünk eddig. A rendszerindítóval feltöltjük az alkalmazást ng-app és deklarálta az alkalmazásvezérlőnket a HTML-ben. Meghatároztuk az alkalmazás modult és létrehoztuk a MainCtrl vezérlő, a foglalat szolgáltatás és a ragadós cetli irányelv.

09. Öntapadó jegyzet készítése

Most, hogy a helyén van az AngularJS alkalmazás csontváza, elkezdjük kiépíteni a létrehozási funkciót.

app.controller ('MainCtrl', function ($ hatókör, socket) {// B.1
$ hatókör.jegyzetek = []; B.2

// Beérkező
socket.on ('onNoteCreated', function (adatok) {// B.3
$ hatókör.jegyzetek.push (adatok);
});

// Kimenő
$ scope.createNote = function () {// B.4
var note = {
id: new Date (). getTime (),
cím: „Új jegyzet”,
törzs: „Függőben”
};

$ hatókör.jegyzetek.push (megjegyzés);
socket.emit ('createNote', megjegyzés);
};

B.1 Az AngularJS beépített függőség-injektálási funkcióval rendelkezik, ezért a $ hatókör tárgy és a foglalat szolgáltatás. A $ hatókör Az objektum ViewModel-ként szolgál, és alapvetően egy JavaScript-objektum, amelybe egyes események bele vannak sütve a kétirányú adatbázis-összekapcsolás lehetővé tétele érdekében.

B.2 Kijelentjük azt a tömböt, amelyben a nézetet lekötjük.

B.3 Felveszünk egy hallgatót a onNoteCreated esemény a foglalat szolgáltatás és az esemény hasznos terhelésének a $ hatókör.jegyzetek sor.

B.4 Kijelentettük a createNote metódus, amely létrehoz egy alapértelmezettet jegyzet tárgyat és belöki a $ hatókör.jegyzetek sor. Használja a foglalat szolgáltatás kibocsátására createNote esemény, és adja át a új jegyzet objektum mentén.

Tehát most, hogy van módszerünk a jegyzet létrehozására, hogyan hívhatjuk? Ez jó kérdés! A HTML fájlban hozzáadjuk a beépített AngularJS irányelvet kattintson a gombra, majd adja hozzá a createNote metódushívás attribútumértékként.

Hozzon létre jegyzetet

Ideje egy gyors áttekintés az eddigiekről. Hozzáadtunk egy tömböt a $ hatókör objektum a MainCtrl ez fogja tartani az alkalmazás összes jegyzetét. Hozzáadtuk a createNote módszer a $ hatókör objektumot egy új helyi jegyzet létrehozásához, majd a jegyzet továbbítását a többi ügyfélhez a foglalat szolgáltatás. Eseményfigyelőt is felvettünk a foglalat szolgáltatást, hogy megtudhassuk, mikor készítettek más ügyfelek jegyzetet, hogy hozzáadhassuk gyűjteményünkhöz.

10. A cetlik megjelenítése

Most már képesek vagyunk létrehozni egy jegyzetobjektumot és megosztani azt a böngészők között, de hogyan jelenítsük meg valójában? Itt jönnek be az irányelvek.

Az irányelvek és azok bonyolultsága óriási téma, de a rövid változat az, hogy lehetőséget nyújtanak az elemek és attribútumok egyéni funkciókkal való kibővítésére. Az irányelvek a kedvenc részem az AngularJS-ről, mivel lehetővé teszik, hogy HTML-ben létrehozzon egy teljes DSL-t (tartományspecifikus nyelv) az alkalmazás körül.

Természetes, hogy mivel cetliket fogunk készíteni az együttműködési fórumunk számára, ezért létre kell hoznunk a ragadós cetli irányelv. Az irányelveket úgy definiáljuk, hogy meghívjuk az irányelv metódust egy deklarálandó modulon, és átadunk egy olyan nevet és függvényt, amely egy direktíva definíciós objektumot ad vissza. Az irányelvdefiníció objektumnak számos lehetséges tulajdonsága van, amelyeket meghatározhat rajta, de itt csak néhányat használunk céljainkra.

Javaslom, hogy nézze meg az AngularJS dokumentációt, hogy megtekinthesse a tulajdonságok teljes listáját, amelyeket meghatározhat az irányelvdefiníció objektumon.

app.directive ('stickyNote', function (socket) {
var linker = function (hatókör, elem, attrs) {};

var vezérlő = függvény ($ hatókör) {};

Visszatérés {
korlátozás: „A”, // C.1
link: linker, // C.2
vezérlő: vezérlő, // C.3
hatókör: {// C.4
megjegyzés: '=',
ondelete: '&'
}
};
});

C.1 Szűkítheti az irányelvét egy bizonyos típusú HTML elemre. A két leggyakoribb az elem vagy az attribútum, amelyet deklarálva használ IS és NAK NEK illetőleg. Szűkítheti CSS osztályra vagy megjegyzésre is, de ezek nem annyira gyakoriak.

C.2 A link funkció az a hely, ahová az összes DOM manipulációs kódot beírja. Van néhány kivétel, amelyet találtam, de ez mindig igaz (az esetek legalább 99 százaléka). Ez az AngularJS alapvető alapszabálya, ezért hangsúlyoztam.

C.3 A vezérlő funkció ugyanúgy működik, mint a fő vezérlő, amelyet az alkalmazáshoz definiáltunk, de a $ hatókör az általunk átadott objektum a DOM elemre jellemző, amelyen az irányelv él.

C.4. Az AngularJS az elszigetelt hatókör fogalmával rendelkezik, amely lehetővé teszi, hogy kifejezetten meghatározza, hogyan kommunikál egy irányelv hatálya a külvilággal. Ha nem jelentettük volna ki a hatályt, az irányelv implicit módon örökölte volna a szülő hatóköréből a szülő-gyermek kapcsolatot. Sok esetben ez nem optimális. A hatókör elkülönítésével csökkentjük annak esélyét, hogy a külvilág akaratlanul és hátrányosan befolyásolhatja az Ön irányelvének állapotát.

Kétirányú adat-kötelezőnek nyilvánítottam a jegyzet a ... val = szimbólum és egy ehhez kapcsolódó kifejezés hullámocska a ... val & szimbólum. Kérjük, olvassa el az AngularJS dokumentációját az elszigetelt hatókör teljes magyarázatához, mivel ez a keret egyik bonyolultabb témája.

Tehát adjunk hozzá egy cetlit a DOM-hoz.

Mint minden jó keretrendszer, az AngularJS valóban remek funkciókkal rendelkezik, már a dobozból. Az egyik legkézenfekvőbb tulajdonság az ng-ismétlés . Ez az AngularJS irányelv lehetővé teszi az objektumok tömbjének átadását, és sokszorosítja az összes címkét, ahány elem van a tömbben. Az alábbi esetben iterálunk a jegyzetek tömb és a div elem és gyermekei a jegyzetek sor.


×