Share
Hvis nettstedet ditt er avhengig av data som sendes til klienter, kan du øke ytelsen ved hjelp av kundesidemaler og WebSockets. I denne opplæringen vil jeg vise deg hvordan.
Vi vil begynne med å transformere et tidligere eksisterende program for å være raskere og mer holdbart under høy trafikk. Jeg vil vise deg hvordan du finner kodenes kode som kan endres for å forbedre appen. Start med å laste ned prøveapplikasjonen som jeg har utarbeidet. Det er veldig enkelt, det viser tilfeldige innlegg gjengitt på serveren, men det vil fungere bra for denne opplæringen.
Pakke ut appen du lastet ned tidligere, til en foretrukket mappe eller plassering, og kjør den:
Gå nå til http: // localhost: 8080 / og ta en titt. Du bør bare se en knapp. Du må også bruke en nettleser med utviklerverktøy, slik at du kan se størrelsen på HTTP-forespørslene. Åpne utviklerverktøyene og gå til Network fane. Deretter klikker du på knappen et par ganger og ser på størrelsen på / getpost be om:
Det er bare omtrent 830 byte rett? Vel, tenk at dette nettstedet blir veldig populært, og en million brukere vil se dette innlegget. Det kommer til ca 830 megabyte. Per innlegg! Ikke så lite et nummer mer.
I dette trinnet vil jeg vise deg hvordan du finner kode som kan endres for å øke appen. I forrige trinn har du funnet forespørselen som brukes til å få innlegget. Du må nå finne ut hvordan den serveres i koden. Åpne opp index.js filen i favorittkodeditoren din. Nå går du til linjene 16-20:
Accentsconagua
var postTemplate = dot (fs.readFileSync ('./ post.dot')); app.get ('/ getpost', funksjon (req, res) res.end (postTemplate (innlegg [Math.floor (Math.random () * 3)]);; Her er det! Først blir innleggets mal sammensatt i postTemplate variabel. Så, på / getpost GET forespørsel malen blir servert. Ikke noe fancy, bare en klassisk tilnærming til problemet. Vi må endre dette for å forbedre ytelsen.
For å starte forbedringene, installer du først Socket.IO. I din terminaltype:
npm installere socket.io
Vent på at kommandoen skal fullføres. Krev det i koden ved å legge til følgende linje tross alt krever inn index.js:
var sio = krever ('socket.io'); Nå må du endre Express-oppsettet, for å jobbe med Socket.IO. Først etter app definisjon, legg til dette:
var server = krever ('http'). createServer (app); var io = krever ('socket.io'). lytt (server); server.listen (8080); Og fjern den siste linjen i denne filen:
app.listen (8080);
Du må gjøre dette fordi Socket.IO krever at HTTP-serveren skal fungere, ikke Express-appen.
Nå, hvis du kjører appen, bør du se noe slikt i terminalen din:
For å begynne å øke appen må du lagre kompilert mal på klientsiden. Javascript-filer er hurtigbufret, så det blir bare lastet ned én gang. For å kompilere malen, gå til http://olado.github.io/doT/index.html og bla ned til bruk seksjon. Fordi det ikke er behov for å kompilere malen hver gang brukeren besøker nettstedet ditt, kan du bare legge til kompilert funksjon til koden. Åpne post.dot fil og lim inn innholdet i Mal felt som dette:
Kopier nå innholdet til feltet og lim det inn i statisk / main.js filen før all kode der inne. Endre eller fjern anonym funksjonsnavn og tilordne det til postTemplate variabel slik:
var postTemplate = funksjon (det) ...
Gå nå til index.js fil og fjern ubrukte linjer, fordi du ikke vil samle maler på server-siden lenger:
var dot = krever ('dot'). mal; var fs = krever ('fs'); ... var postTemplate = dot (fs.readFileSync ('./ post.dot')); De post.dot filen kan også slettes også.
I stedet for å bruke AJAX til å kommunisere med serveren, bruker vi nå WebSockets. Det er best å gjøre dette ved å bruke Socket.IO, fordi WebSocket API selv ikke gir noen feiloverskridelser dersom brukerens nettleser ikke støtter det. Serveren er allerede konfigurert, så nå må vi koble til den. Først legger du til dette i hode av statisk / indeks.html fil (før main.js):
Deretter åpner du statisk / main.js fil og etter maldefinisjonen, legg til denne koden:
var socket = io.connect ();
Det vil koble til Socket.IO-serveren (legg merke til at du har lagt til Socket.IOs skript til siden tidligere). Siden serveren er på samme vert som klienten, trenger du ikke å gi noen parametere til funksjonen. Nå må du legge til en hendelseslytter til stikkontakten, så vi vet når posten kommer. Legg til dette like etter forrige linje:
socket.on ('getpost', funksjon (data) $ ('button'). etter (postTemplate (data));); Som du kan se, ser tilbakeringingen på samme måte som suksess tilbakeringing i jQuery s $ .Ajax () metode, men det kjører malfunksjonen på dataene først. Nå, erstatt $ .Ajax () ring med dette:
socket.emit ( 'getpost');
Denne linjen vil varsle serveren om at brukeren vil vise et nytt innlegg. Selvfølgelig, i en ekteverdenapp, ville serveren sende innleggene når de ble publisert.
For nå kan klienten koble til serveren og be om et innlegg, men serveren vil ikke sende noe enda. Du trenger serverkontakten for å høre på getpost hendelse og svare med et tilfeldig innlegg. Gå til index.js fil og endre den til dette:
app.get ('/ getpost', funksjon (req, res) res.end (postTemplate (innlegg [Math.floor (Math.random () * 3)]);; Til dette:
io.sockets.on ('connection', funksjon (socket) socket.on ('getpost', funksjon () socket.emit ('getpost', innlegg [Math.floor (Math.random () * 3)] ););); Dette vil gjøre at serveren vedlegger getpost handler til hver klient som kobles til den og svarer på et tilfeldig innlegg. Nå kan du kjøre appen igjen og prøve den ut. Gå deretter til utviklerverktøyene i nettleseren din igjen, gå til Network fanen, filtrer den ut slik at du bare kan se WebSockets og klikk på den som er synlig der. Du bør se dataene som sendes mellom nettleseren og serveren, og merk at den er mye mindre da det var med server-side mal og AJAX (lengden er i byte):
Som du kan se, kan bruk av WebSockets og kundeside-maler (og sannsynligvis) forbedre ytelsen og holdbarheten til appen din. Jeg er sikker på at det er mange nettsteder som kan bli forsterket med denne teknikken, og jeg håper at du vil bruke den til å gi en bedre brukeropplevelse, både for mobil- og skrivebordsbrukere.
