Share
Si votre site repose sur les données envoyées aux clients, vous pouvez améliorer ses performances à l'aide de modèles côté client et de WebSockets. Dans ce tutoriel, je vais vous montrer comment.
Nous allons commencer par transformer une application préexistante afin qu'elle soit plus rapide et plus durable sous un trafic intense. Je vais vous montrer comment localiser des morceaux de code qui pourraient être modifiés pour améliorer l'application. Commencez par télécharger l'exemple d'application que j'ai préparé. C’est très simple, il affiche des messages aléatoires rendus sur le serveur, mais il fera très bien pour ce tutoriel..
Décompressez l'application que vous avez téléchargée précédemment dans un dossier ou un emplacement préféré et exécutez-la:
Maintenant, accédez à http: // localhost: 8080 / et jetez un coup d'oeil. Vous ne devriez voir qu'un bouton. Vous devrez également utiliser un navigateur avec des outils de développement pour pouvoir voir la taille des demandes HTTP. Ouvrez les outils de développement et accédez au Réseau languette. Ensuite, cliquez plusieurs fois sur le bouton et regardez la taille du / getpost demande:
C'est seulement environ 830 octets, n'est-ce pas? Eh bien, imaginez que ce site devienne vraiment populaire et qu'un million d'utilisateurs veulent voir ce post. Il atteint environ 830 mégaoctets. Par la poste! Pas si petit nombre plus.
Dans cette étape, je vais vous montrer comment trouver du code pouvant être modifié pour booster l'application. Dans l'étape précédente, vous avez trouvé la demande utilisée pour obtenir le message. Vous devrez maintenant trouver comment il est servi dans le code. Ouvrez le index.js déposer dans votre éditeur de code préféré. Maintenant, allez aux lignes 16-20:
Accentsconagua
var postTemplate = dot (fs.readFileSync ('./ post.dot')); app.get ('/ getpost', fonction (req, res) res.end (postTemplate (posts [Math.floor (Math.random () * 3)]);)); C'est ici! Tout d'abord, le modèle de l'article est compilé dans le postTemplate variable. Puis sur le / getpost GET demande que le modèle est servi. Rien d'extraordinaire, juste une approche classique du problème. Nous devrons changer cela pour améliorer ses performances.
Pour commencer les améliorations, installez d’abord Socket.IO. Dans votre type de terminal:
npm installer socket.io
Attendez que la commande soit terminée. Exigez-le dans le code en ajoutant la ligne suivante après tout ce qui est requis dans index.js:
var sio = require ('socket.io'); Vous devez maintenant modifier la configuration Express pour pouvoir utiliser Socket.IO. Tout d'abord, après le app définition, ajoutez ceci:
var server = require ('http'). createServer (app); var io = require ('socket.io'). listen (serveur); server.listen (8080); Et supprimez la dernière ligne de ce fichier:
app.listen (8080);
Vous devez le faire car Socket.IO requiert le serveur HTTP pour fonctionner, pas l'application Express..
Maintenant, si vous exécutez l'application, vous devriez voir quelque chose comme ceci dans votre terminal:
Pour commencer à améliorer l'application, vous devez enregistrer le modèle compilé côté client. Les fichiers Javascript sont mis en cache et ne seront téléchargés qu'une fois. Pour compiler le modèle, allez à http://olado.github.io/doT/index.html et faites défiler jusqu’à la Usage section. Comme il ne sera pas nécessaire de compiler le modèle à chaque fois que l'utilisateur visite votre site, vous pouvez simplement ajouter la fonction compilée au code. Ouvrez le post.dot déposer et coller son contenu dans le Modèle champ comme ceci:
Maintenant, copiez le contenu du champ et collez-le dans le static / main.js fichier avant tout le code là-bas. Changer ou supprimer le anonyme nom de la fonction et l'assigner à la postTemplate variable comme ceci:
var postTemplate = function (it) …
Allez maintenant au index.js archivez et supprimez les lignes inutilisées, car vous ne compilerez plus de modèles côté serveur:
var dot = require ('dot'). template; var fs = require ('fs');… var postTemplate = dot (fs.readFileSync ('./ post.dot')); le post.dot le fichier peut aussi être supprimé aussi.
Au lieu d'utiliser AJAX pour communiquer avec le serveur, nous allons maintenant utiliser WebSockets. Il est préférable de faire cela en utilisant Socket.IO, car l'API WebSocket elle-même ne fournit aucun basculement si le navigateur de l'utilisateur ne le prend pas en charge. Le serveur est déjà configuré, nous allons donc devoir nous y connecter. Tout d'abord, ajoutez ceci dans le tête du static / index.html fichier (avant main.js):
Ensuite, ouvrez le static / main.js fichier et après la définition du modèle, ajoutez ce code:
var socket = io.connect ();
Il se connectera au serveur Socket.IO (notez que vous avez précédemment ajouté le script de Socket.IO à la page). Le serveur étant sur le même hôte que le client, vous n'avez pas besoin de fournir de paramètres à la fonction. Maintenant, vous devez ajouter un écouteur d'événement à la socket pour que nous sachions quand la publication arrive. Ajoutez ceci juste après la ligne précédente:
socket.on ('getpost', function (data) $ ('button'). after (postTemplate (data));); Comme vous pouvez le constater, le rappel a le même aspect que le Succès rappel dans jQuery $ .ajax () méthode, mais il exécute la fonction de modèle sur les données en premier. Maintenant, remplacez le $ .ajax () appeler avec ceci:
socket.emit ('getpost'); Cette ligne informera le serveur que l'utilisateur souhaite afficher une nouvelle publication. Bien sûr, dans une application du monde réel, le serveur enverrait les messages dès leur publication..
Pour l'instant, le client peut se connecter au serveur et demander une publication, mais le serveur n'envoie rien pour le moment. Vous avez besoin du socket du serveur pour écouter les obtenir un post événement et répondre avec un message aléatoire. Aller au index.js déposer et le changer en ceci:
app.get ('/ getpost', fonction (req, res) res.end (postTemplate (posts [Math.floor (Math.random () * 3)]);)); Pour ça:
io.sockets.on ('connexion', fonction (socket) socket.on ('getpost', function () socket.emit ('getpost', posts), posts [Math.floor (Math.random () * 3)] ););); Cela obligera le serveur à joindre le obtenir un post gestionnaire à chaque client qui se connecte à lui et lui répond avec un message aléatoire. Maintenant, vous pouvez exécuter l'application à nouveau et l'essayer. Ensuite, allez à nouveau aux outils de développement dans votre navigateur, allez à la Réseau onglet, filtrez-le afin que vous ne puissiez voir que WebSockets et cliquez sur celui qui est visible. Vous devriez voir les données envoyées entre le navigateur et le serveur et remarquer qu’elles sont beaucoup plus petites qu’elles le sont avec le modèle côté serveur et AJAX (la longueur est en octets):
Comme vous pouvez le constater, l'utilisation de WebSockets et de modèles côté client peut (et va probablement) améliorer les performances et la durabilité de votre application. Je suis sûr que de nombreux sites pourraient être dynamisés avec cette technique et j'espère que vous l'utiliserez pour offrir une meilleure expérience utilisateur, à la fois aux utilisateurs mobiles et aux utilisateurs de bureau..
