Share
Als uw site vertrouwt op gegevens die naar klanten zijn verzonden, kunt u de prestaties ervan verbeteren met sjablonen op de client-zijde en WebSockets. In deze tutorial zal ik je laten zien hoe.
We zullen beginnen met het transformeren van een reeds bestaande applicatie om sneller en duurzamer te zijn onder druk verkeer. Ik zal je laten zien hoe stukjes code te vinden die kunnen worden aangepast om de app te verbeteren. Begin met het downloaden van de voorbeeldapplicatie die ik heb voorbereid. Het is heel eenvoudig, het geeft willekeurige berichten weer die op de server zijn weergegeven, maar het zal prima werken voor deze tutorial.
Pak de eerder gedownloade app uit in een gewenste map of locatie en voer deze uit:
Ga nu naar http: // localhost: 8080 / en neem een kijkje. Je zou maar een knop moeten zien. U zult ook een browser met ontwikkelaarstools moeten gebruiken, zodat u de grootte van de HTTP-verzoeken kunt zien. Open de ontwikkelaarstools en ga naar de Netwerk tab. Klik vervolgens een paar keer op de knop en bekijk de grootte van de / getpost verzoek:
Het is slechts ongeveer 830 bytes toch? Stel je voor dat deze site echt populair wordt en dat een miljoen gebruikers deze post willen zien. Het krijgt ongeveer 830 megabytes. Per post! Niet zo klein een nummer meer.
In deze stap laat ik je zien hoe je code kunt vinden die kan worden aangepast om de app een boost te geven. In de vorige stap hebt u het verzoek gevonden om het bericht te ontvangen. Je zult nu moeten ontdekken hoe het in de code wordt geserveerd. Open de index.js bestand in uw favoriete codebewerker. Ga nu naar de regels 16-20:
Accentsconagua
var postTemplate = dot (fs.readFileSync ('./ post.dot')); app.get ('/ getpost', functie (req, res) res.end (postTemplate (posts [Math.rand (Math.random () * 3)]));); Hier is het! Eerst wordt de sjabloon van de post gecompileerd in de postTemplate variabel. Dan, op de / getpost GET verzoek dat de sjabloon wordt geserveerd. Niets bijzonders, alleen een klassieke benadering van het probleem. We moeten dit wijzigen om de prestaties te verbeteren.
Om de verbeteringen te beginnen, installeert u eerst Socket.IO. In uw terminal type:
npm install socket.io
Wacht tot het commando is voltooid. Vereist het in de code door de volgende regel toe te voegen nadat alles in is vereist index.js:
var sio = require ('socket.io'); Nu moet u de Express-opstelling wijzigen om met Socket.IO te werken. Ten eerste, na de app definitie, voeg dit toe:
var server = vereisen ('http') createServer (app); var io = vereisen ('socket.io'). listen (server); server.listen (8080); En verwijder de laatste regel in dit bestand:
app.listen (8080);
U moet dit doen omdat Socket.IO vereist dat de HTTP-server werkt, niet de Express-app.
Nu, als u de app uitvoert, zou u zoiets in uw terminal moeten zien:
Om de app een boost te geven, moet je de gecompileerde sjabloon opslaan aan de clientzijde. Javascript-bestanden worden in de cache opgeslagen, dus het wordt maar één keer gedownload. Als u de sjabloon wilt compileren, gaat u naar http://olado.github.io/doT/index.html en scrolt u omlaag naar de Gebruik sectie. Omdat het niet nodig is om de sjabloon telkens wanneer de gebruiker uw site bezoekt, te compileren, kunt u gewoon de gecompileerde functie aan de code toevoegen. Open de post.dot bestand en plak de inhoud ervan in de Sjabloon veld als dit:
Kopieer nu de inhoud van het veld en plak het in de static / main.js bestand voor alle code daarin. Wijzig of verwijder de anoniem functienaam en wijs deze toe aan de postTemplate variabele als deze:
var postTemplate = function (it) ...
Ga nu naar de index.js bestand en verwijder ongebruikte regels, want je zult geen sjablonen meer aan de server-kant compileren:
var punt = vereisen ('punt') sjabloon; var fs = require ('fs'); ... var postTemplate = dot (fs.readFileSync ('./ post.dot')); De post.dot bestand kan ook worden verwijderd.
In plaats van AJAX te gebruiken om met de server te communiceren, zullen we nu WebSockets gebruiken. Het is het beste om dit te doen met Socket.IO, omdat de WebSocket-API zelf geen fail-overs biedt in het geval de browser van de gebruiker dit niet ondersteunt. De server is al ingesteld, dus nu moeten we er verbinding mee maken. Voeg eerst dit toe in de hoofd van de static / index.html bestand (vóór main.js):
Open vervolgens de static / main.js bestand en voeg na de sjabloondefinitie deze code toe:
var socket = io.connect ();
Het maakt verbinding met de Socket.IO-server (merk op dat u het script van Socket.IO eerder aan de pagina hebt toegevoegd). Omdat de server zich op dezelfde host als de client bevindt, hoeft u geen parameters aan de functie te geven. Nu moet u een gebeurtenislistener toevoegen aan de socket, zodat we weten wanneer de post binnenkomt. Voeg dit toe net na de vorige regel:
socket.on ('getpost', functie (data) $ ('button'). after (postTemplate (data));); Zoals je ziet, ziet de callback er hetzelfde uit als de succes terugbellen in jQuery's $ .Ajax () methode, maar de sjabloonfunctie wordt eerst op de gegevens uitgevoerd. Vervang nu de $ .Ajax () bel hiermee:
socket.emit (getpost);
Deze regel geeft de server aan dat de gebruiker een nieuw bericht wil weergeven. Natuurlijk, in een real-world app, zou de server de berichten verzenden wanneer ze worden gepubliceerd.
Voorlopig kan de client verbinding maken met de server en een bericht aanvragen, maar de server zal nog niets verzenden. U hebt de serveraansluiting nodig om naar de te luisteren getpost evenement en reageren met een willekeurig bericht. Ga naar de index.js bestand en verander dit naar:
app.get ('/ getpost', functie (req, res) res.end (postTemplate (posts [Math.rand (Math.random () * 3)]));); Hiernaar:
io.sockets.on ('connection', function (socket) socket.on ('getpost', function () socket.emit ('getpost', posts [Math.floor (Math.random () * 3)] ););); Hierdoor wordt de server gekoppeld getpost handler naar elke client die er verbinding mee maakt en hem antwoordt met een willekeurig bericht. Nu kunt u de app opnieuw uitvoeren en het uitproberen. Ga vervolgens opnieuw naar de ontwikkelaarstools in uw browser, ga naar de Netwerk tab, filter het uit zodat je alleen WebSockets kunt zien en klik op degene die daar zichtbaar is. U zou de gegevens moeten zien die tussen de browser en de server worden verzonden en merken dat deze veel kleiner is dan bij de server-side sjabloon en AJAX (de lengte is in bytes):
Zoals u ziet, kunnen (en zullen) het gebruik van WebSockets en sjablonen aan de clientzijde de prestaties en duurzaamheid van uw app verbeteren. Ik ben er zeker van dat er veel sites zijn die met deze techniek kunnen worden verbeterd en ik hoop dat u deze zult gebruiken om een betere gebruikerservaring te bieden, zowel voor uw mobiele als desktopgebruikers..
