Share
Dacă site-ul dvs. se bazează pe datele trimise clienților, puteți crește performanța acestuia utilizând șabloane de pe partea clientului și WebSockets. În acest tutorial, vă voi arăta cum.
Vom începe prin transformarea unei aplicații preexistente pentru a fi mai rapidă și mai durabilă în condiții de trafic intens. Vă voi arăta cum să localizați bucăți de cod care ar putea fi modificate pentru a îmbunătăți aplicația. Începeți prin descărcarea aplicației de probă pe care am pregătit-o. Este foarte simplu, afișează mesaje aleatorii redate pe server, dar va face bine pentru acest tutorial.
Dezarhivați aplicația pe care ați descărcat-o anterior într-un director sau o locație preferată și rulați-o:
Acum navigați la http: // localhost: 8080 / și aruncați o privire. Ar trebui să vezi doar un buton. De asemenea, va trebui să utilizați un browser cu instrumente pentru dezvoltatori, astfel încât să puteți vedea dimensiunea solicitărilor HTTP. Deschideți instrumentele dezvoltatorului și mergeți la Reţea tab. Apoi, faceți clic pe buton de câteva ori și aruncați o privire la dimensiunea / getpost cerere:
Sunt doar aproximativ 830 octeți dreapta? Ei bine, imaginați-vă că acest site devine foarte popular și un milion de utilizatori doresc să vadă acest post. Se ajunge la aproximativ 830 megaocteți. Per post! Nu mai este un număr prea mic.
În acest pas vă voi arăta cum să găsiți codul care poate fi modificat pentru a stimula aplicația. În pasul anterior, ați găsit solicitarea utilizată pentru a obține postarea. Acum va trebui să găsiți modul în care este servit în cod. Deschideți index.js fișier în editorul dvs. de cod preferat. Acum mergeți la linia 16-20:
Accentsconagua
var postTemplate = punct (fs.readFileSync ('./ post.dot')); app.get ('/ getpost', funcția (req, res) res.end (postTemplate (posturi [Math.floor (Math.random () * 3)]));); Aici este! În primul rând, șablonul postului este compilat în postTemplate variabil. Apoi, pe / getpost Cereți GET șablonul este difuzat. Nimic fantezist, doar o abordare clasică a problemei. Va trebui să schimbăm acest lucru pentru a-i îmbunătăți performanța.
Pentru a începe îmbunătățirile, instalați mai întâi Socket.IO. În tipul dvs. de terminal:
npm instalare socket.io
Așteptați finalizarea comenzii. Solicitați-o în cod prin adăugarea următoarei linii după ce toate sunt necesare index.js:
var sio = cer ('socket.io'); Acum va trebui să schimbați setarea Express, pentru a lucra cu Socket.IO. În primul rând, după aplicaţia definiție, adăugați aceasta:
var server = cer ('http') createServer (aplicație); var io = necesită ('socket.io'). asculta (server); server.listen (8080); Și eliminați ultimul rând din acest fișier:
app.listen (8080);
Trebuie să faceți acest lucru, deoarece Socket.IO necesită ca serverul HTTP să funcționeze, nu aplicația Express.
Acum, dacă rulați aplicația, ar trebui să vedeți așa ceva în terminalul dvs.:
Pentru a începe să îmbunătățiți aplicația, va trebui să salvați șablonul compilat din partea clientului. Fișierele Javascript sunt stocate în cache, deci vor fi descărcate o singură dată. Pentru a compila șablonul, accesați http://olado.github.io/doT/index.html și derulați în jos până la folosire secțiune. Deoarece nu va fi nevoie să compilați șablonul de fiecare dată când utilizatorul vizitează site-ul dvs., puteți adăuga funcția compilată la cod. Deschide post.dot fișier și lipiți conținutul său în Format domeniu ca acesta:
Acum copiați conținutul câmpului și inserați-l în câmpul statice / main.js fișier înainte de toate cod acolo. Schimbați sau eliminați anonim numele funcției și alocați-l postTemplate variabilă în felul următor:
var postTemplate = funcția (it) ...
Acum du-te la index.js fișier și eliminați linii neutilizate, pentru că nu veți mai crea șabloane pe partea de server:
var dot = cer ('punct'). var fs = cer ('fs'); ... var postTemplate = punct (fs.readFileSync ('./ post.dot')); post.dot fișierul poate fi, de asemenea, șters.
În loc să folosim AJAX pentru a comunica cu serverul, vom folosi acum WebSockets. Cel mai bine este să faceți acest lucru utilizând Socket.IO, deoarece API-ul WebSocket în sine nu oferă nicio defecțiune în cazul în care browserul utilizatorului nu îl acceptă. Serverul este deja configurat, deci acum trebuie să ne conectăm. Mai întâi, adăugați aceasta în cap din static / index.html fișier (înainte main.js):
Apoi, deschideți statice / main.js fișier și după definiția șablonului, adăugați acest cod:
Var socket = io.connect ();
Se va conecta la serverul Socket.IO (observați că ați adăugat scriptul Socket.IO la pagina anterioară). Deoarece serverul se află pe aceeași gazdă ca și clientul, nu este necesar să furnizați parametri funcției. Acum, trebuie să adăugați un ascultare a evenimentelor la soclu, așa că știm când ajunge postul. Adăugați-o imediat după linia anterioară:
socket.on ('getpost', funcție (date) $ ('buton') după (postTemplate (data));); După cum puteți vedea, inversarea apelului arată la fel ca și succes apel invers în jQuery $ .Ajax () dar rulează mai întâi funcția de șablon pe date. Acum, înlocuiți-l $ .Ajax () apelați cu aceasta:
socket.emit ( 'getpost');
Această linie va notifica serverul că utilizatorul dorește să afișeze un post nou. Desigur, într-o aplicație din lumea reală, serverul va trimite posturile când vor fi publicate.
Deocamdată, clientul se poate conecta la server și poate solicita o postare, dar serverul nu va trimite nimic încă. Aveți nevoie de soclul serverului pentru a asculta getpost eveniment și să răspundă cu un post aleatoriu. Mergeți la index.js fișier și modificați-l la acesta:
app.get ('/ getpost', funcția (req, res) res.end (postTemplate (posturi [Math.floor (Math.random () * 3)]));); La acest:
io.sockets.on ("conexiune", functie (socket) socket.on ('getpost', function () socket.emit ('getpost', mesaje [Math.floor (Math.random () * 3)] ););); Acest lucru va face ca serverul sa ataseze getpost handler pentru fiecare client care se conectează la acesta și îl răspunde cu un post aleator. Acum puteți rula aplicația din nou și încercați. Apoi du-te la instrumentele de dezvoltator din browser-ul dvs. din nou, du-te la Reţea filă, filtrați-o astfel încât să puteți vedea doar WebSockets și faceți clic pe cel care este vizibil acolo. Ar trebui să vedeți datele trimise între browser și server și să observați că este mult mai mic decât a fost cu șablonul de pe server și AJAX (lungimea este în octeți):
După cum puteți vedea, utilizarea șabloanelor WebSockets și a celor de pe client poate (și probabil va) îmbunătăți performanța și durabilitatea aplicației dvs. Sunt sigur că există o mulțime de site-uri care ar putea fi susținute de această tehnică și sper că o veți folosi pentru a oferi o experiență mai bună utilizatorilor, atât pentru utilizatorii dvs. de telefonie mobilă, cât și pentru utilizatorii de pe desktop.
