Share
Si su sitio se basa en los datos enviados a los clientes, puede aumentar su rendimiento utilizando plantillas del lado del cliente y WebSockets. En este tutorial, te mostraré cómo.
Comenzaremos por transformar una aplicación preexistente para que sea más rápida y más duradera en condiciones de alto tráfico. Le mostraré cómo localizar fragmentos de código que podrían modificarse para mejorar la aplicación. Comience por descargar la aplicación de muestra que preparé. Es realmente simple, muestra publicaciones aleatorias renderizadas en el servidor, pero funcionará bien para este tutorial..
Descomprima la aplicación que descargó previamente en una carpeta o ubicación preferida y ejecútela:
Ahora navegue a http: // localhost: 8080 / y eche un vistazo. Deberías ver sólo un botón. También deberá utilizar un navegador con herramientas de desarrollador, para poder ver el tamaño de las solicitudes HTTP. Abre las herramientas de desarrollo y ve a la Red lengüeta. Luego, haga clic en el botón un par de veces y observe el tamaño de la / getpost solicitud:
Son solo unos 830 bytes verdad? Bueno, imagina que este sitio se vuelve muy popular y que un millón de usuarios quieren ver esta publicación. Se llega a unos 830 megabytes. ¡Por publicación! Ya no es un número tan pequeño.
En este paso, le mostraré cómo encontrar el código que se puede modificar para mejorar la aplicación. En el paso anterior, ha encontrado la solicitud utilizada para obtener la publicación. Ahora tendrá que encontrar cómo se sirve en el código. Abre el index.js archivo en su editor de código favorito. Ahora ve a las líneas 16-20:
Accentsconagua
var postTemplate = dot (fs.readFileSync ('./ post.dot')); app.get ('/ getpost', function (req, res) res.end (postTemplate (posts [Math.floor (Math.random () * 3)]));); ¡Aquí está! Primero, la plantilla de la publicación se compila en el PostTemplate variable. Entonces, en el / getpost Solicitud GET se sirve la plantilla. Nada de lujos, solo un enfoque clásico del problema. Tendremos que cambiar esto para mejorar su rendimiento..
Para comenzar las mejoras, primero, instale Socket.IO. En su tipo de terminal:
npm instalar socket.io
Espere a que se complete el comando. Requerirlo en el código agregando la siguiente línea después de que todo requiere en index.js:
var sio = require ('socket.io'); Ahora tendrá que cambiar la configuración Express, para trabajar con Socket.IO. Primero, después de la aplicación definición, agregue esto:
var server = require ('http'). createServer (app); var io = require ('socket.io'). listen (servidor); server.listen (8080); Y elimina la última línea de este archivo:
app.listen (8080);
Debe hacer esto porque Socket.IO requiere que el servidor HTTP funcione, no la aplicación Express.
Ahora, si ejecuta la aplicación debería ver algo como esto en su terminal:
Para comenzar a mejorar la aplicación, deberá guardar la plantilla compilada en el lado del cliente. Los archivos de Javascript se almacenan en caché, por lo que se descargarán solo una vez. Para compilar la plantilla, vaya a http://olado.github.io/doT/index.html y desplácese hacia abajo hasta la Uso sección. Debido a que no habrá necesidad de compilar la plantilla cada vez que el usuario visite su sitio, simplemente puede agregar la función compilada al código. Abre el post.dot archiva y pega su contenido en el Modelo campo como este:
Ahora copie el contenido del campo y péguelo en el static / main.js archivo antes de todo el código allí. Cambiar o eliminar el anónimo nombre de la función y asignarlo a la PostTemplate variable como esta:
var postTemplate = function (it) …
Ahora ve al index.js archiva y elimina las líneas no utilizadas, porque ya no estarás compilando plantillas en el lado del servidor:
var dot = require ('dot'). template; var fs = require ('fs');… var postTemplate = dot (fs.readFileSync ('./ post.dot')); los post.dot archivo también puede ser eliminado también.
En lugar de utilizar AJAX para comunicarse con el servidor, ahora usaremos WebSockets. Es mejor hacer esto utilizando Socket.IO, porque la API de WebSocket en sí misma no proporciona fallos en caso de que el navegador del usuario no lo admita. El servidor ya está configurado, por lo que ahora tendremos que conectarnos. Primero, agregue esto en el cabeza del static / index.html archivo (antes main.js):
A continuación, abra la static / main.js archivo y después de la definición de la plantilla, agregue este código:
var socket = io.connect ();
Se conectará al servidor Socket.IO (observe que ha agregado la secuencia de comandos de Socket.IO a la página anterior). Dado que el servidor está en el mismo host que el cliente, no necesita proporcionar ningún parámetro a la función. Ahora, debe agregar un detector de eventos al socket, para saber cuándo llega la publicación. Agregue esto justo después de la línea anterior:
socket.on ('getpost', function (data) $ ('button'). after (postTemplate (data));); Como puede ver, la devolución de llamada se ve igual que la éxito devolución de llamada en jQuery $ .ajax () Método pero está ejecutando la función de plantilla en los datos primero. Ahora, reemplace el $ .ajax () Llama con esto:
socket.emit ('getpost'); Esta línea notificará al servidor que el usuario desea mostrar una nueva publicación. Por supuesto, en una aplicación del mundo real, el servidor enviaría las publicaciones cuando se publiquen..
Por ahora, el cliente puede conectarse al servidor y solicitar una publicación, pero el servidor no enviará nada todavía. Necesitas el socket del servidor para escuchar el conseguir puesto Evento y responder con un post aleatorio. Ve a la index.js archivar y cambiarlo a esto:
app.get ('/ getpost', function (req, res) res.end (postTemplate (posts [Math.floor (Math.random () * 3)]));); A esto:
io.sockets.on ('connection', function (socket) socket.on ('getpost', function () socket.emit ('getpost', mensajes [Math.floor (Math.random () * 3)] ););); Esto hará que el servidor conecte el conseguir puesto Controla a cada cliente que se conecta a él y responde con una publicación aleatoria. Ahora puedes ejecutar la aplicación de nuevo y probarla. Luego, vuelva a las herramientas de desarrollo en su navegador, vaya a la Red pestaña, filtre hacia fuera para que solo pueda ver WebSockets y haga clic en el que se ve allí. Debería ver los datos enviados entre el navegador y el servidor, y notar que es mucho más pequeño de lo que era con la plantilla del lado del servidor y AJAX (la longitud está en bytes):
Como puede ver, el uso de WebSockets y las plantillas del lado del cliente puede (y probablemente lo hará) mejorar el rendimiento y la durabilidad de su aplicación. Estoy seguro de que hay muchos sitios que podrían potenciarse con esta técnica y espero que la utilicen para proporcionar una mejor experiencia de usuario, tanto para usuarios móviles como de escritorio..
