Share
Om din webbplats är beroende av data som skickas till klienter, kan du öka dess prestanda med hjälp av klientsidemallar och WebSockets. I denna handledning ska jag visa dig hur.
Vi börjar med att omforma en tidigare existerande applikation för att vara snabbare och mer hållbar under hög trafik. Jag ska visa dig hur du hittar bitar av kod som kan ändras för att förbättra appen. Börja med att hämta det provprogram som jag har förberett. Det är väldigt enkelt, det visar slumpmässiga inlägg som gjorts på servern, men det går bra för den här handledningen.
Unzip den app som du hämtade tidigare till en föredragen mapp eller plats och kör den:
Navigera nu till http: // localhost: 8080 / och ta en titt. Du borde bara se en knapp. Du måste också använda en webbläsare med utvecklingsverktyg, så du kan se storleken på HTTP-förfrågningarna. Öppna utvecklarverktygen och gå till Nätverk flik. Klicka sedan på knappen ett par gånger och titta på storleken på / getpost begäran:
Det är bara ca 830 byte rätt? Tja, föreställ dig att den här webbplatsen blir riktigt populär och en miljon användare vill se det här inlägget. Det blir cirka 830 megabyte. Per inlägg! Inte så lite ett nummer längre.
I det här steget kommer jag att visa dig hur du hittar kod som kan ändras för att öka appen. I föregående steg har du hittat den begäran som användes för att få inlägget. Du måste nu hitta hur det serveras i koden. Öppna upp index.js filen i din favorit kodredigerare. Gå nu till linjerna 16-20:
Accentsconagua
var postTemplate = punkt (fs.readFileSync ('./ post.dot')); app.get ('/ getpost', funktion (req, res) res.end (postTemplate (inlägg [Math.floor (Math.random () * 3)]));); Här är det! Först sammanställs postens mall i postTemplate variabel. Sedan på / getpost GET-förfrågan mallen serveras. Ingenting fancy, bara en klassisk inställning till problemet. Vi måste ändra detta för att förbättra prestanda.
För att börja förbättra, installera först Socket.IO. I din terminaltyp:
npm installera socket.io
Vänta på att kommandot ska slutföra. Kräv det i koden genom att lägga till följande rad trots allt kräver in index.js:
var sio = kräver ('socket.io'); Nu måste du ändra Express-inställningen, för att arbeta med Socket.IO. Först efter det app definition, lägg till detta:
var server = kräver ('http'). createServer (app); var io = kräver ('socket.io'). lyssna (server); server.listen (8080); Och ta bort den sista raden i den här filen:
app.listen (8080);
Du måste göra detta eftersom Socket.IO kräver att HTTP-servern ska fungera, inte Express-appen.
Nu, om du kör appen bör du se något så här i din terminal:
För att börja öka appen måste du spara den sammanställda mallen på klientsidan. Javascript-filer är cachade, så det laddas ner endast en gång. För att kompilera mallen, gå till http://olado.github.io/doT/index.html och bläddra ner till Användande sektion. Eftersom det inte finns något behov av att sammanställa mallen varje gång användaren besöker din webbplats, kan du bara lägga till den sammanställda funktionen till koden. Öppna post.dot fil och klistra in innehållet i Mall fält så här:
Kopiera nu innehållet i fältet och klistra in det i statiska / main.js filen innan all kod in där. Ändra eller ta bort anonym funktionsnamn och tilldela det till postTemplate variabel så här:
var postTemplate = funktion (it) ...
Gå nu till index.js fil och ta bort oanvända linjer, eftersom du inte kommer att kompilera mallar på serverns sida längre:
var dot = kräver ('punkt'). mall; var fs = kräver ('fs'); ... var postTemplate = dot (fs.readFileSync ('./ post.dot')); De post.dot filen kan också raderas också.
I stället för att använda AJAX för att kommunicera med servern, använder vi nu WebSockets. Det är bäst att göra detta med Socket.IO, eftersom WebSocket API själv inte ger några misslyckanden om användarens webbläsare inte stöder den. Servern är redan konfigurerad, så nu måste vi ansluta till den. Lägg först det här i huvud av statisk / index.html fil (före main.js):
Öppna sedan statiska / main.js fil och efter malldefinitionen, lägg till den här koden:
var socket = io.connect ();
Det kommer att anslutas till Socket.IO-servern (observera att du har lagt till Socket.IOs skript till sidan tidigare). Eftersom servern är på samma värd som klienten behöver du inte ge några parametrar till funktionen. Nu måste du lägga till en händelseloggare i uttaget, så vi vet när posten kommer fram. Lägg till detta strax efter den föregående raden:
socket.on ('getpost', funktion (data) $ ('button'). efter (postTemplate (data));); Som du kan se är återuppringningen detsamma som Framgång återuppringning i jQuery s $ .Ajax () metod men det körs mallfunktionen på data först. Nu byt ut $ .Ajax () ring med det här:
socket.emit ( 'getpost');
Denna rad meddelar servern att användaren vill visa ett nytt inlägg. Naturligtvis, i en verklig app, skulle servern skicka inläggen när de publiceras.
För närvarande kan klienten ansluta till servern och begära ett inlägg, men servern skickar inte något än. Du behöver serverns uttag för att lyssna på getpost händelse och svara med ett slumpmässigt inlägg. Gå till index.js fil och ändra den till detta:
app.get ('/ getpost', funktion (req, res) res.end (postTemplate (inlägg [Math.floor (Math.random () * 3)]));); Till detta:
io.sockets.on ('connection', funktion (socket) socket.on ('getpost', funktion () socket.emit ('getpost', inlägg [Math.floor (Math.random () * 3)] ););); Detta gör att servern bifogar getpost hanterare till varje klient som ansluter till den och svarar honom med ett slumpmässigt inlägg. Nu kan du köra appen igen och prova den. Gå sedan till utvecklarverktygen i din webbläsare igen, gå till Nätverk fliken, filtrera den så att du bara kan se WebSockets och klicka på den som är synlig där. Du bör se data som skickas mellan webbläsaren och servern och märker att den är mycket mindre då det var med serverns mall och AJAX (längden är i byte):
Som du kan se kan du använda (och förmodligen) förbättra användarnas prestanda och hållbarhet med hjälp av WebSockets och klientsidans mallar. Jag är säker på att det finns många webbplatser som kan förbättras med den här tekniken och jag hoppas att du kommer använda den för att ge en bättre användarupplevelse, både för mobilanvändare och stationära användare.
