Share
Se il tuo sito si basa sui dati inviati ai clienti, puoi aumentarne le prestazioni utilizzando i modelli lato client e WebSockets. In questo tutorial, ti mostrerò come.
Inizieremo trasformando un'applicazione preesistente per essere più veloce e più durevole nel traffico intenso. Ti mostrerò come individuare pezzi di codice che potrebbero essere modificati per migliorare l'app. Inizia scaricando l'applicazione di esempio che ho preparato. È davvero semplice, mostra post casuali resi sul server, ma andrà bene per questo tutorial.
Decomprimere l'app che hai scaricato in precedenza in una cartella o posizione preferita ed eseguirla:
Passare ora a http: // localhost: 8080 / e dare un'occhiata. Dovresti vedere solo un pulsante. Dovrai inoltre utilizzare un browser con strumenti di sviluppo, in modo che tu possa vedere la dimensione delle richieste HTTP. Apri gli strumenti di sviluppo e vai al Rete scheda. Quindi, fai clic sul pulsante un paio di volte e dai un'occhiata alle dimensioni del file / getpost richiesta:
Sono solo circa 830 byte, giusto? Bene, immagina che questo sito diventi molto popolare e che un milione di utenti voglia vedere questo post. Raggiunge circa 830 megabyte. Per post! Non più un numero così piccolo.
In questo passaggio ti mostrerò come trovare il codice che può essere modificato per potenziare l'app. Nel passaggio precedente, hai trovato la richiesta utilizzata per ottenere il post. Dovrai ora scoprire come è servito nel codice. Apri il index.js file nel tuo editor di codice preferito. Ora vai alle righe 16-20:
Accentsconagua
var postTemplate = dot (fs.readFileSync ('./ post.dot')); app.get ('/ getpost', function (req, res) res.end (postTemplate (post [Math.floor (Math.random () * 3)]));); Ecco qui! Innanzitutto, il modello del post è compilato nel postTemplate variabile. Quindi, sul / getpost GET richiesta il modello è servito. Niente di stravagante, solo un approccio classico al problema. Dovremo cambiarlo per migliorare le sue prestazioni.
Per iniziare i miglioramenti, innanzitutto, installa Socket.IO. Nel tuo tipo di terminale:
npm install socket.io
Attendere il completamento del comando. Richiedilo nel codice aggiungendo la seguente riga dopo tutto ciò che richiede in index.js:
var sio = require ('socket.io'); Ora dovrai modificare l'impostazione Express per lavorare con Socket.IO. Primo, dopo il App definizione, aggiungi questo:
var server = require ('http'). createServer (app); var io = require ('socket.io'). listen (server); server.listen (8080); E rimuovi l'ultima riga in questo file:
app.listen (8080);
È necessario farlo perché Socket.IO richiede che il server HTTP funzioni, non l'app Express.
Ora, se esegui l'app dovresti vedere qualcosa di simile nel tuo terminale:
Per iniziare a potenziare l'app dovrai salvare il modello compilato sul lato client. I file Javascript sono memorizzati nella cache, quindi verranno scaricati solo una volta. Per compilare il modello, vai su http://olado.github.io/doT/index.html e scorri verso il basso uso sezione. Poiché non sarà necessario compilare il modello ogni volta che l'utente visita il tuo sito, puoi semplicemente aggiungere la funzione compilata al codice. Apri il post.dot file e incolla il suo contenuto nel Modello campo come questo:
Ora copia il contenuto del campo e incollalo nel statico / main.js file prima di tutto il codice in là. Cambia o rimuovi il anonimo nome della funzione e assegnarlo al postTemplate variabile come questo:
var postTemplate = function (it) ...
Ora vai al index.js file e rimuovi le linee inutilizzate, perché non compilerai più modelli sul lato server:
var punto = require ('punto'). template; var fs = require ('fs'); ... var postTemplate = dot (fs.readFileSync ('./ post.dot')); Il post.dot anche il file può essere cancellato.
Invece di utilizzare AJAX per comunicare con il server, utilizzeremo ora WebSockets. È meglio farlo usando Socket.IO, perché l'API WebSocket stessa non fornisce alcun failover nel caso in cui il browser dell'utente non lo supporti. Il server è già configurato, quindi ora ci sarà necessario connetterci. Innanzitutto, aggiungi questo nel capo del statico / index.html file (prima main.js):
Quindi, apri il statico / main.js file e dopo la definizione del modello, aggiungere questo codice:
var socket = io.connect ();
Si collegherà al server Socket.IO (notare che hai aggiunto lo script Socket.IO alla pagina precedente). Poiché il server si trova sullo stesso host del client, non è necessario fornire alcun parametro alla funzione. Ora, devi aggiungere un listener di eventi al socket, quindi sappiamo quando arriva il post. Aggiungi questo subito dopo la riga precedente:
socket.on ('getpost', function (data) $ ('button'). after (postTemplate (data));); Come puoi vedere, il callback ha lo stesso aspetto del callback successo callback in jQuery $ .Ajax () metodo ma sta eseguendo prima la funzione template sui dati. Ora, sostituisci il $ .Ajax () chiama con questo:
socket.emit ( 'getpost');
Questa riga comunicherà al server che l'utente desidera visualizzare un nuovo post. Naturalmente, in un'app reale, il server invierà i post quando vengono pubblicati.
Per ora, il client può connettersi al server e richiedere un post, ma il server non invierà ancora nulla. È necessario il socket del server per ascoltare il getpost evento e rispondere con un post casuale. Vai al index.js file e cambiarlo in questo modo:
app.get ('/ getpost', function (req, res) res.end (postTemplate (post [Math.floor (Math.random () * 3)]));); A questo:
io.sockets.on ('connection', function (socket) socket.on ('getpost', function () socket.emit ('getpost', post [Math.floor (Math.random () * 3)] ););); Ciò renderà il server collegato getpost gestore ad ogni cliente che si connette ad esso e rispondergli con un post casuale. Ora puoi eseguire nuovamente l'app e provarla. Quindi vai di nuovo agli strumenti per sviluppatori nel tuo browser, vai su Rete scheda, filtrare in modo da poter vedere solo WebSockets e fare clic su quello che è visibile lì. Dovresti vedere i dati inviati tra il browser e il server e notare che è molto più piccolo di quello con il modello lato server e AJAX (la lunghezza è in byte):
Come puoi vedere, l'utilizzo di WebSocket e di modelli lato client può (e probabilmente lo farà) migliorare le prestazioni e la durata della tua app. Sono sicuro che ci sono molti siti che potrebbero essere potenziati con questa tecnica e spero che lo userete per fornire un'esperienza utente migliore, sia per i vostri utenti mobili che desktop.
