UNIVERSIDAD MAYOR DE SAN SIMON

FACULTAD DE CIENCIAS Y TECNOLOGIA

DIRECCIÓN DE POSGRADO

“MECANISMOS DE TIEMPO REAL EN

APLICACIONES ANGULAR CON SOCKET.IO”

TRABAJO FINAL PRESENTADO PARA OBTENER EL

CERTIFICADO DE DIPLOMADO EXPERTO EN DESARROLLO DE
APLICACIONES EMPRESARIALES VERSIÓN II
.

POSTULANTE: FELIPEZ MANCILLA RUDOLF

TUTOR : ING. EDSON ARIEL TERCEROS TORRICO

Cochabamba – Bolivia
2019
AGRADECIMIENTO

Agradezco principalmente a Dios, porque siempre

está a mi lado en todo momento y me ha dado la
oportunidad de concluir una de mis metas.
A mi familia por la paciencia, apoyo y confianza
que me ha dado hasta el último momento.
A mi esposa e hijos por aceptar y entender lo
importante que es para mí acabar la carrera de
ingeniería.
Gracias.
 CONTENIDO DE INDICE
INDICE DE FIGURAS ................................................................................................. 1

INDICE DE TABLAS ................................................................................................... 2

RESUMEN .................................................................................................................. 3

INTRODUCCION. ....................................................................................................... 4

1. Generalidades. .................................................................................................... 5

1.1. Antecedentes Generales. ............................................................................ 5

1.2. Antecedentes Especificos. .......................................................................... 9

2. Metodologia. ...................................................................................................... 16

3. Aplicacion en Tiempo Real con Node.js Angular y Socket.io ....................... 16

4. Node.js ............................................................................................................... 16

4.1. Origen de Node.js....................................................................................... 17

4.2. Caracteristicas de Node.js ........................................................................ 17

4.2.1. JavaScript en Node.js. ............................................................................ 18

4.2.2. Diseño Dirigido por Eventos. ................................................................. 19

4.2.3. E/S Sin Bloqueo. ..................................................................................... 21

5. Angular. ............................................................................................................. 23

5.1. Angular JS a Angular ................................................................................. 24

5.2. Angular una Plataforma, no un Marco...................................................... 26

5.3. Angular CLI. ................................................................................................ 27

5.4. Capacidad de Angular en Mobiles y Escritorio. ...................................... 28

5.5. Arquitectura de Componentes. ................................................................. 30

6. Otras alternativas para elaboracion de Interfaz de Usuario.......................... 32

6.1. React. .......................................................................................................... 33

6.2. Vue............................................................................................................... 38

6.3. Spring MVC. ................................................................................................ 40

 6.3.1. Spring Landscape. .................................................................................. 41

6.3.2. Modulos de Spring Framework. ............................................................. 42

6.3.3. Spring Tools Suite (STS). ....................................................................... 43

6.3.4. Subproyectos de Spring......................................................................... 43

6.3.5. Conceptos de Diseño detrás de Spring Framework. ........................... 43

6.4. Angular como Preferido. ........................................................................... 44

7. Implementación de una Aplicación en Tiempo Real con Socket.IO, Angular

y Node.js. ................................................................................................................. 46

7.1. Configuración del Proyecto. ..................................................................... 46

7.2. Socket Server. ............................................................................................ 46

7.3. Aplicación del Cliente con Angular. ......................................................... 49

7.4. Módulo de Aplicaciones. ........................................................................... 50

7.5. Servicio de Documentos. .......................................................................... 50

7.6. Componente del Documento. ................................................................... 52

7.7. AppComponent. ......................................................................................... 54

8. Conclusiones. ................................................................................................... 54

9. Bibliografía. ....................................................................................................... 56
 INDICE DE FIGURAS
Figura 1: Interacción HTTP servidor-navegador.......................................................... 5
Figura 2: Solicitud de AJAX ......................................................................................... 7
Figura 3: Polling XHR .................................................................................................. 7
Figura 4: HTTP piggybacking ...................................................................................... 8
Figura 5: Long-Polling ................................................................................................. 9
Figura 6: Navegadores de internet que soportan el protocolo Websockets .............. 12
Figura 7: Cliente – servidor ....................................................................................... 19
Figura 8: Modelo simplificado del bucle de eventos Node.js ..................................... 20
Figura 9: Componentes Asincronos y sin Bloque en una aplicación Node ............... 22
Figura 10: El sitio web de Angular https://angular.io. ................................................ 26
Figura 11: pagina principal de Ionic........................................................................... 29
Figura 12: Arquitectura de componentes. ................................................................. 31
Figura 13: Principales elementos de una app React. ................................................ 36
Figura 14: Mapa del ecosistema React. .................................................................... 37
Figura 15: Componentes del modelo Model-View-ViewModel .................................. 40
Figura 16: aplicación de colaboracion de documentos en tiempo real ...................... 54

1
 INDICE DE TABLAS
Tabla 1: Muestra los distintos Modulos de Spring Framework .................................. 42

2
RESUMEN
La siguiente monografía ha cubierto muchos conceptos y temas que en la actualidad
es de mucha importancia. Por ejemplo se ha explicado cómo surge la idea de una
comunicación bidireccional full dúplex, describiendo los distintos mecanismos y
técnicas que han logrado desarrollar un protocolo especialmente para la
comunicación en tiempo real. También se ha explicado la importancia de las
tecnologías o frameworks que ayudan a desarrollar aplicaciones de redes escalables
y rápidas.
Todas las tecnologías se han integrado bajo un entorno de desarrollo potente
utilizando un lenguaje de programación “JavaScript” que ha permitido a los
desarrolladores o ingenieros a implementar aplicaciones de alto nivel de una forma
simple y entendible.
Por último se ha implementado una aplicación chat, para la demostración, utilizando
node.js como base de un servidor y cliente, así mismo el frameworks de angular y la
librería socket.io.

Palabras claves: websocket, socket.io, angular, node.js, react, vue, sprint mvc,
framework.

3
INTRODUCCION.
En el mundo actual cada vez las personas se conectan a la red de internet, los
sistemas de comunicación en tiempo real cobran más importancia. Aplicaciones de
mensajería instantánea, herramientas de colaboración en la edición de gráficos, y hasta
videojuegos online en realidad virtual, son algunos de los ejemplos de este tipo de
sistemas.
El protocolo HTTP fue concebido desde sus orígenes para ofrecer comunicaciones
en un sólo sentido, desde el servidor hacia el cliente. Sin embargo las aplicaciones
web de hoy en día demandan más que eso para poder ofrecer una experiencia de
usuario más rica, necesitan flujo de información en ambos sentidos en el mismo
instante en el que ocurren los eventos.
Para mitigar esa necesidad han aparecido varias estrategias, entre ellas long
polling y Websocket. En long polling el cliente se mantiene haciendo preguntas al
servidor sobre un determinado evento mientras que con Websocket, tenemos a
nuestra disposición un nuevo protocolo que permite la interacción entre el cliente y el
servidor, facilitando la transmisión de datos en tiempo real en ambas direcciones. Es
aquí donde entra Socket.io.
Socket.io, Es una biblioteca que permite la comunicación en tiempo real y dúplex
completo entre el cliente y los servidores web. Utiliza el protocolo WebSocket para
proporcionar la interfaz. En general, se divide en dos partes, tanto WebSocket como
Socket.io son bibliotecas controladas por eventos. (EDUCBA)
• Lado del cliente: es la biblioteca que se ejecuta dentro del navegador.
• Lado del servidor: Es la biblioteca para Node.js
El objetivo de la presente monografía es por tanto proveer de mecanismos de tiempo
real utilizando la biblioteca Socket.io que es una implementación de Websocket que
permite la comunicación bidireccional cliente servidor en tiempo real en aplicaciones
Angular y Node.
Para una demostracion aplicable, se implementara una pequeña aplicación de chat,
utilizando las tecnologias como: sockets.io para la conexión en tiempo real, node.js
como el servidor y plataforma de integracion y el framework de angular para la parte
del cliente.

4
1. Generalidades.
1.1. Antecedentes Generales.
La Web (y las aplicaciones web), están construida sobre el protocolo
HTTP. HTTP es un sistema de solicitud-respuesta, donde el cliente envía una
solicitud de información al servidor y el servidor responde con la información
solicitada (Rai, 2013, p. 9). En la mayoría de los casos, esta información es el
HTML o información relacionada, como XML o JSON, que debe ser representada
por el navegador. Esta interacción de HTTP servidor-navegador se muestra en la
siguiente figura:

Figura 1: Interacción HTTP servidor-navegador

Fuente: (Rai, 2013, p. 9)
La web en tiempo real no es algo nuevo, uno de los primeros intentos de hacer
una aplicación en tiempo real, fueron los applets de Java. En 1995, Sun y
Netscape anunciaron una asociación. Este fue el comienzo de la web altamente
interactiva. Aunque desde entonces se han ganado una muy mala reputación los
applets, sin enbargo fueron los pioneros en el campo de la web en tiempo real.
En el mismo año, Netscape creó un lenguaje de scripting llamado JavaScript.
(originalmente LiveScript), y otra pequeña empresa llamada FutureWave
Software, comenzó a trabajar en un software de animación llamado FutureSplash
Animator. Más tarde, ambos se convirtieron en la causa de que los applets de

5
Java casi desaparecieran de la Web (Rai, 2013, p. 9).
FutureWave fue adquirida por Macromedia en 1996 y cambiaron su nombre de
FutureSplash Animator a Flash.
Flash, continuó gobernando la web como la plataforma más ampliamente
disponible para crear animaciones, juegos, reproductores de video y todo lo
interactivo durante la mayor parte de la próxima década.
En 1999, Microsoft usó su tecnología iframe y JavaScript para actualizar las
cotizaciones de noticias y acciones en la página de inicio predeterminada de
Internet Explorer ( http://home.microsoft.com ). En el mismo año, lanzaron una
extensión ActiveX patentada para IE, llamada XMLHTTP. Esta fue la época en la
que XML era muy importante y todos querían usar XML para todo lo que estaban
haciendo. (Rai, 2013, p. 10)
Este componente XMLHTTP originalmente estaba destinado a cargar datos XML
en la página de forma asíncrona, utilizando JavaScript. Pronto fue adoptado por
Mozilla, Safari y Opera, como XMLHttpRequest (o XHR, para abreviar).Pero fue
con el lanzamiento de Gmail (por Google) que el término AJAX (JavaScript
asíncrono y XML)), Acuñado por Jesse James Garrett en un artículo titulado Ajax:
“Un Nuevo Enfoque para las Aplicaciones Web”, se convirtió en la palabra de
moda en el desarrollo web. La siguiente figura muestra una solicitud de AJAX
(Rai, 2013, p. 10).

6
 Figura 2: Solicitud de AJAX
Fuente: (Rai, 2013, p. 10)
En conjunto, estas tecnologías fueron denominadas Comet, un término
introducido por Alex Russell en su blog en 2006. Comet introdujo múltiples
mecanismos para dar la sensación de que los datos se envían desde el servidor
al cliente. Estos incluyen iframe ocultos, polling XHR, long-polling XHR y long-
polling de etiqueta Script (o, long-polling JSONP). (Rai, 2013, p. 11)
El primero y el más fácil de implementar es el polling XHR, en el que el navegador
sigue sondeando los datos periódicamente, y el servidor sigue respondiendo con
una respuesta vacía, a menos que tenga datos para enviar al navegador.
Después de un evento como, recibir un correo, o crear / actualizar un registro en
la base de datos, el servidor responde a la siguiente solicitud de sondeo con
nuevos datos (Rai, 2013, p. 11). La siguiente figura representa este mecanismo:

Figura 3: Polling XHR

Fuente: (Rai, 2013, p. 11)
Como se puede ver, hay un problema con esto. El navegador tiene que seguir
haciendo solicitudes al servidor incluso cuando no hay datos. Esto hace que el
servidor obtenga y procese datos incluso cuando no hay nada que entregar.
Una de las soluciones a esto es modificar el servidor para que incluya las
solicitudes reales del cliente, no solo enviando los datos solicitados por el cliente,
7
sino también agregando datos adicionales que el servidor tiene para enviar al
navegador. El cliente necesita ser modificado para comprender y actuar sobre los
datos entrantes adicionales (Rai, 2013, p. 12). El proceso de HTTP se muestra en
la siguiente figura:

Figura 4: HTTP piggybacking

Fuente: (Rai, 2013, p. 12)
Como los nuevos datos solo se envían cuando hay una acción del cliente, esto
causa retrasos en los datos que llegan al navegador. La solución para recibir
eventos rápidamente y evitar las consultas frecuentes del servidor es un long-
polling (Rai, 2013, p. 12).
En un long-polling, cuando el navegador envía una solicitud al servidor, el
servidor no responderá de inmediato si no tiene datos para responder, y
suspenderá la solicitud. Una vez que ocurre el evento, el servidor cierra la
solicitud suspendida enviando una respuesta al cliente. Tan pronto como el
cliente recibe la respuesta, envía una nueva solicitud (Rai, 2013, p. 12).

8
 Figura 5: Long-Polling

Fuente: (Rai, 2013, p. 12)

Hay varias formas en que se implementa el long-polling, como iframe, XHR
multiparte, etiquetas de script con JSONP y long-living XHR (Rai, 2013, p. 13).
Con la rápida evolución de los navegadores web liderados por Firefox y luego
Chrome, la actualización a HTML, llamada HTML5, ha sido ampliamente
adoptada. En HTML5, hay dos nuevos métodos para enviar datos del servidor al
cliente. Uno es eventos enviados (Server-sent) por el servidor(SSE) y el otro es el
Full WebSockets dúplex (Rai, 2013).
1.2. Antecedentes Especificos.
Socket.IO. En palabras de sus creadores, “Socket.IO pretende hacer posible las
Aplicaciones en tiempo real en cada navegador y dispositivo móvil, difuminando
las diferencias entre los diferentes mecanismos de transporte” (Rauch, 2017)
En otras palabras, Socket.IO es una capa intermedia en la comunicación Cliente-
Servidor que abstrae el mecanismo de transporte (la manera en que se realiza la
conexión) de dicha comunicación, empleando en el cliente un mejor soporte y
más adecuado de entre todos los posibles. Consecuentemente, Socket.IO no es
sólo una librería para Node sino que lo es también para la parte cliente (Torre,
2013, pág. 157).
Socket.IO no sólo ofrece un adaptador de capa de transporte sino que añade más
9
características propias de las aplicaciones en tiempo real como heartbeats,
timeouts y el soporte a la desconexión.
Estas tres características son parte del mecanismo del control del estado y
recuperación de la conexión para que en caso de pérdida de la misma, se pueda
re-establecer. Una por una:
• Los Heartbeats, son mensajes que se intercambian cliente y servidor en
intervalos o periodos de tiempo negociados. El propósito es detectar
cuándo una conexión se ha interrumpido. En el caso de Socket.IO es una
característica del nivel de transporte y su funcionamiento es muy sencillo:
cuando el servidor recibe un mensaje heartbeat, espera un tiempo
heartbeatInterval para enviar otro y vuelve a esperar durante un tiempo
heartbeatTimeout en recibir otro heartbeat, con lo que repite el proceso. Si
pasado ese tiempo no hay respuesta por parte del cliente, da la conexión
por perdida.
Por su parte, el cliente también espera un tiempo heartbeatTimeout cada
vez que recibe un paquete, independientemente si es de tipo heartbeat o
no, para dar la conexión por cerrada.
• Los timeouts, como, por ejemplo, el heartbeatTimeout, son el límite de
tiempo máximo, negociado entre el cliente y el servidor, que debe
transcurrir antes de dar una conexión como perdida.
El soporte a la desconexión es la capacidad que tiene el objeto Socket del cliente.
Socket.IO cuando detecta, a través del mecanismo de heartbeats, que la
conexión entre cliente y servidor se ha interrumpido y, como respuesta, comienza
a realizar intentos de reconexión con el servidor. Estos intentos se realizan
periódicamente en intervalos de tiempo de duración fijada opcionalmente por el
cliente, hasta un máximo de intentos que puede ser infinito.
El tiempo reconnectionDelay entre intervalos se duplica en cada intento de
reconexión según un algoritmo exponential back off.
Estas características dan soporte a un API orientada al intercambio de eventos
entre las dos partes (Torre, 2013, pág. 158).
La intención de esta librería es ofrecer un soporte universal de comunicación en

10
tiempo real, sea cual sea el agente de usuario que se utilice con las
características que cada uno de ellos ofrece. Hasta el momento se ha podido
comprobar el soporte en los navegadores: Internet Explorer 5.5+, Safai 3+,
Google Chrome 4+, Firefox 3+ y Opera 10.61+ para escritorio, iPhone Safari, iPad
Safari, Android Webkit y WebOS Webkit para móviles. (Torre, 2013, pág. 158)
La parte de cliente de Socket.IO, cuando se conecta, decide qué modo de
transporte es el que va a utilizar de todos los disponibles o de aquellos que el
usuario elija opcionalmente. Se entiende por modo de transporte a la tecnología o
a la técnica empleada para realizar la conexión Cliente-Servidor según esté
soportada por el agente de usuario. Hay una lista bastante amplia que cubre los
distintos tipos de agente de usuario (viejos navegadores, navegadores para
móviles). Los diferentes mecanismos de transporte, ordenados según preferencia
de utilización por la librería que Socket.IO soporta son:
Websocket, Bajo el nombre de Websocket se engloba tanto el protocolo
Websocket, definido en la RFC6455, como el API que permite a las páginas web
el uso del mismo. Websockets Se comunica utilizando la capa TCP. La conexión
se establece a través de HTTP y es básicamente un mecanismo de intercambio
entre el cliente y el servidor. Después del protocolo de enlace, la conexión se
actualiza a TCP.
Una vez que la conexión está abierta, el cliente y el servidor pueden enviarse los
datos entre sí. Los datos se envían en forma de pequeños paquetes utilizando el
protocolo TCP. Estas llamadas no son HTTP, por lo que no son visibles
directamente en las herramientas de red del desarrollador de un navegador.
(Chopra, 2015). La motivación del protocolo es conseguir la bi-direccionalidad sin
los inconvenientes que HTTP presentaría para obtenerla.
Por tanto el protocolo es, conceptualmente, una capa sobre TCP independiente
de HTTP, no basado en él, exceptuando que el handshake se realiza mediante el
mecanismo HTTP Upgrade, y que tiene alguna característica en común como
emplear los puertos 80 y 443, este último para comunicaciones cifradas.

11
 Figura 6: Navegadores de internet que soportan el protocolo Websockets
Fuente: (Chopra, 2015, p. 12)
El API de Websocket es un sencillo conjunto de métodos y variables de estado
que permiten manejar WebSocket desde un agente de usuario. En concreto
ofrece:
• Un constructor Websocket() y un método de finalización close(). Al
constructor hay que especificarle como parámetro la URL del servidor,
similar a las de HTTP, en las que cambia el protocolo del esquema por ws
o wss (socket seguro). Una vez conectado, podemos consultar el estado
de la conexión en la propiedad readyState, que será uno de cuatro
posibles: Connecting, Connected, Closing o Closed.
• Métodos para el manejo de eventos: onOpen(), onError(), onMessage() y
onClose(). Cuando se reciben datos, el atributo binaryType es el que indica
cómo deben ser tratados esos datos, por ejemplo, como blob o como un
arraybuffer. la manera de enviar datos con send() y saber con el atributo
bufferedAmount cuántos están encolados a la espera de enviarse.
Adobe Flash Socket, La empresa Adobe, con su tecnología Flash, provee un
entorno multiplataforma para la creación y ejecución de aplicaciones y contenido
multimedia para sistemas operativos y, sobre todo, navegadores web. Por tanto,
las páginas web pueden contener embebido contenido Flash, archivos de
12
extensión.swf, con el que el usuario puede interactuar a través del browser.
Este contenido puede programarse con un lenguaje de programación,
ActionScript, que, entre una variada gama de objetos, ofrece su propia
implementación de sockets TCP. A través de ésta, Socket.IO ofrece, para la
comunicación con el servidor, su propio archivo .sfw que simula un WebSocket.
Este archivo está incluido en el módulo Socket.IO y en caso de ser necesario, se
sirve automáticamente al cliente que lo insertará dinámicamente en la página
web. (Torre, 2013, pág. 160)
Es importante reseñar que los sistemas operativos móviles de Apple no permiten
este tipo de contenido y, desde Agosto de 2012, la tienda de aplicaciones Google
Play no dispone del intérprete de Flash para Android, con lo que su uso está muy
limitado (Torre, 2013, pág. 160).
AJAX Long Polling, Una técnica usada para simular una interacción con el
servidor en tiempo real es AJAX Polling, consistente en abrir una conexión AJAX
cada cierto intervalo de tiempo con objeto de recibir datos del servidor. Si el
intervalo es lo suficientemente pequeño, la sensación es la de comunicación en
tiempo real. Sin embargo, el coste que introduce reducir este intervalo es:
• Latencia HTTP: establecer una conexión remota conlleva un tiempo de
latencia del orden típicamente de los 200 milisegundos pudiendo ser
mucho mayor según las circunstancias. En este escenario se obtiene una
degradación del rendimiento de la aplicación, lo cual se agrava si el
servidor no genera nuevos datos.
• Desperdicio de recursos: si el servidor no tiene datos que enviarnos, se
produce tráfico de red y ciclos de petición/respuesta para nada.
Para optimizar ambas desventajas, se introduce una modificación en la manera
que se realizan las peticiones AJAX. En este caso, si el servidor no tiene nada
que enviar, la conexión se mantiene abierta esperando, como en AJAX Polling.
En el momento que envía algo y se procesa, en lugar de esperar un intervalo de
tiempo para establecer la conexión, se realiza inmediatamente otra petición
AJAX. De esta manera se reduce drásticamente la latencia y el tráfico de red
anteriormente mencionados. Esto es lo que se conoce como AJAX Long Polling.

13
(Torre, 2013, pág. 161)
AJAX Multipart Streaming, Esta técnica permite mantener una conexión abierta
con el servidor si se fija el tipo MIME de la respuesta como multipart/x-mixed-
replace. Este tipo lo introdujo Netscape en 1995 como una característica de su
navegador a la que llamo server push con la que pretendía que habilitar a los
servidores a enviar nuevas versiones de los elementos de una página web.
Sin embargo, los únicos navegadores que aceptan esta técnica son los que están
basados en Gecko, el motor de Mozilla, como, por ejemplo, Firefox (Torre, 2013,
pág. 161).
Forever Iframe, Es otra de las técnicas que permiten mantener abierta una
conexión permanente con el servidor empleando una etiqueta html <iframe> de
modo que se permite embeber una página web dentro de otra. Esta página se
envía del servidor con dos cabeceras concretas:
Con esto se consigue que el navegador considere la página como un ente infinito
(de ahí el nombre Forever Iframe) y, como todos los navegadores modernos, la
interpretará según la vaya recibiendo. Conociendo esto, conforme haya datos
disponibles, el servidor enviará etiquetas <script> en las que se llame a una
función del frame padre que será la que reciba y procese la información del
servidor.
Esta técnica crea un canal unidireccional Servidor-Cliente. La comunicación
Cliente-Servidor se realiza a través de peticiones HTTP POST normales sobre
conexiones Keep-Alive.
Un punto negativo de este método es que altera la experiencia de usuario porque
la existencia de este iframe supone que el navegador muestre continuamente un
icono de carga o la barra de progreso (Torre, 2013, pág. 162).
JSONP Polling, Esta técnica de Polling utiliza JSONP en lugar de JSON. JSONP
significa JSON with Padding. Se emplea para evitar la limitación impuesta por los
navegadores con su política de “mismo dominio de origen” por la cual el
navegador restringe el intercambio de datos entre una página web y un servidor
sólo si ambos pertenecen al mismo dominio, con objeto de evitar problemas con
código Javascript.

14
Se solicita al servidor que “recubra” los datos con una llamada a una función
presente en el espacio de ejecución del navegador capaz de procesarlos
correctamente como la siguiente:
function handleData (datosJSON){
// Procesamiento de los datos del servidor
}
Este recubrimiento es a lo que se llama padding y se incluye como parámetro en
la query de la URL que proporciona los datos, por ejemplo:
http://dataserver.com/webservice?callback=handleData
Esta URL se emplea como fuente, atributo src, en una etiqueta script de HTML
porque esta etiqueta no posee la restricción que se impone al resto de peticiones
cross-domain (Torre, 2013, pág. 162).
El resultado de la petición para este ejemplo concreto debería ser:
handleData( {datosJSON} )
Que se inserta y ejecuta dentro de la etiqueta <script> invocando al callback que
se ha establecido en la página. Este callback procesa el resultado evitando los
errores que se producirían si el servidor simplemente hubiera devuelto el objeto
datosJSON, porque hubiera sido interpretado como un bloque de código, no
como un objeto, por otra parte, inaccesible al resto del código de la página por no
estar asignado a variable alguna.
De esta manera, aunque no es una técnica que elimine el riesgo de código
malicioso, puesto que puede existir un servicio web comprometido, se resuelve el
problema de estandarización cross-domain (Torre, 2013, pág. 163).
La mayor ventaja de Socket.io es que toda la configuración facilitará la
notificación en tiempo real en todos los navegadores de forma transparente,
funciona en todas las plataformas, servidores o dispositivos, lo que garantiza la
igualdad, confiabilidad y velocidad. Actualizando automáticamente el requisito a
Websockets si es necesario. Es una implementación personalizada del protocolo
de transporte en tiempo real por encima de otros protocolos. Requiriendo que
ambas bibliotecas se utilicen del lado del cliente, así como una biblioteca del lado
del servidor. Por ejemplo en el caso que un evento desconecte al servidor, se

15
 lanzara un mensaje en tiempo real a todos los clientes conectados, notificando el
error de conexión de forma segura, para luego reconectarse, y todo en tiempo
real. De acuerdo a la información obtenida, socket.io es una pieza de tecnología
muy útil y es increíblemente relevante hoy en día, a pesar de la opinión popular
de que el soporte generalizado para WebSockets lo hace redundante.
2. Metodologia.
Para el presente trabajo se utilizaran los siguientes medotos de investigacion:
• Metodo Bibliografico, debido a que se realizara la lectura y compilación de
los libros relacionados al tema de estudio.
• Metodo Analitico, debido a que se procedera a revisar y analizar
ordenadamente documentos relacionados al tema de estudio, para la
redeacción del presente trabajo.
• Método Empirico o de campo, debido a que se utilizara un ejemplo de
aplicación.
3. Aplicacion en Tiempo Real con Node.js Angular y Socket.io
Se describirá los mecanismos de tiempo real para poder establecer una
comunicación constante con el servidor, que les permita mantener la información
actualizada, justo cuando sucede una solicitud o respuesta del servidor al cliente
o del cliente al servidor.
4. Node.js
Node.js es una plataforma basada en el tiempo de ejecución de JavaScript de
Chrome para crear fácilmente aplicaciones de red escalables y rápidas. Node.js
utiliza un modelo de E/S sin bloqueo, controlado por eventos, que lo hace liviano
y eficiente, perfecto para aplicaciones de tiempo real con uso intensivo de datos
que se ejecutan en dispositivos distribuidos (Projects, 2018).
Node.js no es un servidor web como el servidor HTTP Apache, o un servidor de
aplicaciones como Tomcat; pero como parte de su biblioteca de módulos, Node.js
proporciona un servidor HTTP, que se puede usar para construir aplicaciones
web (Rai, 2013, p. 15).
Además de tener JavaScript como el lenguaje de programación para las
aplicaciones, una cosa que diferencia a Node.js (y la mayoría de los módulos y

16
aplicaciones de Node.js) aparte de los servidores y aplicaciones tradicionales es
el modelo de desarrollo asíncrono dirigido por eventos (Rai, 2013, p. 16).
4.1. Origen de Node.js
Esta no es la primera vez que se usa JavaScript para la programación del lado
del servidor. Netscape lanzó Netscape Enterprise Server en 1996, lo que permitió
la programación del lado del servidor en JavaScript. Desde entonces, muchos
servidores, como RingoJS (Puiu), Persevere (Foundation), los servidores basados
en Rhino de Mozilla y otros han intentado seguir su ejemplo (Rai, 2013, p. 16).
Una de las principales razones por las que estos servidores no se tomaron en
serio fue el lamentable rendimiento de las máquinas virtuales de JavaScript
utilizadas por ellos. El rendimiento de JavaScript en los navegadores tampoco fue
muy bueno. Eso fue hasta que Google lanzó su navegador web Chrome.
En el momento de su lanzamiento, la máquina virtual JavaScript de Chrome,
llamada V8 ,fue casi 10-20 veces más rápido que cualquier otra máquina virtual
de JavaScript, y desde entonces ha sido el más rápido.
En base a esta máquina virtual, Ryan Dahl desarrolló Node.js en 2008. Quería
construir un servidor que permitiera y habilitara aplicaciones web interactivas en
tiempo real como Gmail. Pero Node.js no fue el primer servidor que construyó.
Ryan construyó Ebb, un servidor web basado en Ruby y C, pero se dio cuenta de
que no estaba funcionando tan rápido como él quería. Esto fue seguido por varios
experimentos en la construcción de una serie de pequeños servidores web.
Nutrido con el conocimiento obtenido de sus experimentos y el estudio de varias
plataformas, decidió desarrollar un servidor asíncrono o basado en eventos. En
enero de 2008, se le ocurrió la idea de construir un pequeño servidor web basado
en JavaScript. Estaba inclinado hacia JavaScript porque era independiente del
sistema operativo y venía sin ninguna API de E/S. Renunció a su trabajo y trabajó
en Node.js durante 6 meses. En noviembre de 2009, presentó Node.js en JSConf,
y ha estado trabajando para Joyent desde entonces. Inicialmente, Node.js trabajó
solo en sistemas basados en Unix; Más tarde, vino con soporte para el sistema
operativo Windows. (Rai, 2013, p. 16).
4.2. Caracteristicas de Node.js

17
Node.js es una nueva plataforma que sigue evolucionando, pero incluso en su
infancia, es probablemente una de las plataformas más populares en la Web. Se
está alimentando de una gran cantidad de servicios actualmente. A continuacion
algunas caracteristicas de Node.js que lo hace una propuesta tan popular.
4.2.1. JavaScript en Node.js.
Debido a que Node.js está construido con el motor de JavaScript de Google
Chrome (una herramienta que se usa para interpretar el lenguaje JavaScript en
comandos de computadora significativos), se considera que es potente y capaz
de admitir JavaScript como un lenguaje del lado del servidor. JavaScript se puede
usar tanto para ayudar en las interacciones de la página web (del lado del cliente)
como para manejar los datos de aplicaciones entrantes y las comunicaciones de
la base de datos. (Los últimos trabajos a menudo se han reservado para
lenguajes como C, Java, Python y Ruby, entre otros). Los desarrolladores ahora
pueden comprometerse a dominar JavaScript para crear una aplicación web
completa en lugar de tener que dominar varios lenguajes para realizar la misma
tarea. (Wexler, 2019, p. 3)
Como una visión general, el desarrollo web se puede dividir en dos categorías:
• Lado del cliente : (front-end) se refiere al código que escribe el usuario, y da
algo como resultado en su navegador web. El código del lado del cliente
generalmente incluye JavaScript utilizado para animar la experiencia del
usuario cuando se carga una página web.
• Lado del servidor : (back-end) se refiere al código utilizado para la lógica de la
aplicación (cómo se organizan y guardan los datos en la base de datos). El
código del lado del servidor es responsable de autenticar a los usuarios en
una página de inicio de sesión, ejecutar tareas programadas e incluso
garantizar que el código del lado del cliente llegue al cliente. (Wexler, 2019, p.
3)
En la siguiente figura, el cliente representa al navegador en el que un usuario
puede ver su aplicación. El cliente realiza solicitudes al servidor, haciendole saber
que datos le gustaria enviar o recibir. El servidor es donde se ejecuta su
aplicación y maneja cualquier dato enviado por el usuario. El servidor responde al

18
cliente cargando una página o enviandole datos.

Figura 7: Cliente – servidor

Fuente: (Wexler, 2019, p. 3)

4.2.2. Diseño Dirigido por Eventos.

Node.js opera en un bucle de eventos usando un solo hilo. Un hilo es el conjunto
de poder de cómputo y recursos necesarios para la ejecución de una tarea
programada. Generalmente, un hilo es responsable de iniciar y completar una
tarea; Cuantas más tareas se necesiten para ejecutarse simultáneamente, más
hilos se necesitan. En la mayoría de los otros programas, varias tareas se
combinan y manejan mediante un conjunto de hilos que la computadora puede
ofrecer al mismo tiempo. Node.js, sin embargo, maneja solo una tarea a la vez y
usa más subprocesos solo para tareas que no pueden ser manejadas por el
subproceso principal.
Este proceso puede parecer contrario a la intuición, pero en la mayoría de las
aplicaciones que no requieren tareas de computación intensivas (tareas que
requieren una gran cantidad de potencia de procesamiento de su computadora),
este único hilo puede administrar y ejecutar todas las tareas rápidamente. En la
siguiente figura se puede observar el bucle de eventos, a medida que las tareas
están preparadas para ejecutarse, entran en una cola para ser procesadas por
fases específicas del bucle de eventos (Wexler, 2019, p. 4).

19
 Figura 8: Modelo simplificado del bucle de eventos Node.js
Fuente: (Wexler, 2019, p. 4)
Como su nombre lo indica, el bucle de eventos Node.js se alterna para siempre
en un bucle, escuchando los eventos de JavaScript activados por el servidor para
notificar una nueva tarea o la finalización de otra tarea. A medida que aumenta el
número de tareas, las tareas se alinean en una cola para ser procesadas de
manera incremental por el bucle de eventos.
Se puede pensar que el bucle de eventos es como un administrador de oficina. La
función del administrador de la oficina es manejar los mensajes entrantes, las
asignaciones de trabajo y las tareas relacionadas con la oficina. El gerente de la
oficina podría tener una larga lista de tareas para completar, desde delegar la
creación de informes financieros completos hasta contestar el teléfono y colocar
las decoraciones de la parte de la oficina. Debido a que algunas tareas llevan
más tiempo que otras, el gerente de la oficina no está obligado a completar
ninguna tarea individual antes de manejar una nueva. Si se está preparando para
una fiesta y suena el teléfono, por ejemplo, puede dejar de configurar para
responder la llamada. Mejor aún, puede responder la llamada y transferir a la
persona que llama a otro empleado para que pueda volver a decorar.
De manera similar, el bucle de eventos maneja una serie de tareas, siempre
20
trabajando en una tarea a la vez y utilizando la capacidad de procesamiento de la
computadora para descargar algunas tareas más grandes, mientras que el bucle
de eventos acorta la lista de tareas. En la mayoría de las otras plataformas, las
tareas entrantes se asignan a nuevos procesos, creando un nuevo bucle de
eventos para cada tarea. Sin embargo, aumentar la cantidad de tareas es como
aumentar la cantidad de empleados en un espacio finito. Empieza a tener nuevos
problemas, como el costo, la potencia de cálculo y los recursos compartidos
(Wexler, 2019, p. 5).
4.2.3. E/S Sin Bloqueo.
La E/S sin bloqueo es un término de bajo nivel desde la perspectiva de un
programador de nodos. Esto significa que su programa puede realizar una
solicitud de un recurso de red mientras hace otra cosa, y luego, cuando la
operación de la red ha finalizado, se ejecutará una devolución de llamada que
maneja el resultado.
La siguiente Figura muestra una aplicación web típica de Node que utiliza la
biblioteca de aplicaciones web Express para manejar el flujo de pedidos de una
tienda. Los navegadores realizan solicitudes para comprar un producto, y luego la
aplicación verifica el inventario de existencias actual, crea una cuenta para el
usuario, envía el recibo por correo electrónico y envía una respuesta HTTP de
JSON. Al mismo tiempo, también suceden otras cosas: se envía un recibo por
correo electrónico y se actualiza una base de datos con los detalles y el pedido
del usuario. El código en sí es un JavaScript sencillo e imperativo, pero el tiempo
de ejecución se comporta de forma concurrente porque utiliza E/S sin bloqueo.

21
 Figura 9: Componentes Asincronos y sin Bloque en una aplicación Node
Fuente: (Alex Young, Bradley Meck, Mike Cantelon, Tim Oxley, Marc Harter, T.J.
Holowaychuk, Nathan Rajlich, 2017)
En la figura 9, se accede a la base de datos a través de la red. En Node, ese
acceso a la red es sin bloqueo, porque Node usa una biblioteca llamada libuv
(Team) para proporcionar acceso a las llamadas de red sin bloqueo del sistema
operativo. Esto se implementa de manera diferente en Linux, macOS y Windows,
pero todo lo que tiene que preocuparse es su amigable biblioteca de base de
datos Java-Script. Mientras escribe un código como db.insert(query, err => {}),
por ejemplo , Node está haciendo una red altamente bloqueada y sin bloqueo
debajo.
El acceso al disco es similar, pero intrigantemente no es lo mismo. Cuando se
genera el recibo de correo electrónico y la plantilla de correo electrónico se lee del
disco, libuv utiliza un grupo de subprocesos para proporcionar la ilusión de que se
está utilizando una llamada sin bloqueo. Administrar un grupo de subprocesos no
es nada divertido, pero escribir email.send('template.ejs', (err, html) => {})es
definitivamente mucho más fácil de entender.
22
 El beneficio real de usar API asíncronas con E/S sin bloqueo es que Node puede
hacer otras cosas mientras ocurren estos procesos comparativamente lentos. A
pesar de que solo se está ejecutando una aplicación web. Node.js de proceso
único y un solo subproceso, puede manejar más de una conexión de
potencialmente miles de visitantes de sitios web al mismo tiempo (Alex Young,
Bradley Meck, Mike Cantelon, Tim Oxley, Marc Harter, T.J. Holowaychuk, Nathan
Rajlich, 2017).
5. Angular.
Angular proporciona un framework muy poderoso para aplicaciones front-end. Y
una de sus caracteristicas es la inyección de dependencia (ID) que permite usar
patrones que han sido comunes en la mayoría de los framework de back-end
como Spring. Puede tambien separar los servicios y la lógica empresarial de sus
componentes y vistas. Y los componentes hacen que sea mucho más sencillo
escribir aplicaciones front-end a gran escala, a la vez que se mantiene la
capacidad de mantenimiento. Y tambien permite organizar código para
descomponerlo en un nivel muy granular.
Angular es una moderna plataforma de aplicaciones web que promete
proporcionar a los desarrolladores un conjunto integral de herramientas y
capacidades para construir aplicaciones grandes y robustas (Jeremy Wilken,
David Aden, Jason Aden, 2018). La propuesta de valor central de Angular es
hacer posible crear aplicaciones que funcionen para casi cualquier plataforma, ya
sea móvil, web o de escritorio. El equipo de Angular se ha centrado en construir
mucho más que un marco de aplicación, han construido un completo ecosistema.
(Jeremy Wilken, David Aden, Jason Aden, 2018)
Construir aplicaciones web que puedan satisfacer las necesidades de los
usuarios no es una tarea trivial. La calidad y complejidad de las aplicaciones es
cada vez mayor, al igual que las expectativas de los usuarios en cuanto a calidad
y capacidades. Angular ayuda a los desarrolladores a entregar aplicaciones para
satisfacer estas demandas. A continuacion algunas razones principales por que
utilizar angular:
• Inspirado por los estándares web, mejorado por las capacidades Modernas:

23
 cualquier persona que cree aplicaciones web hoy en día sabe que hay
muchas formas e ideas diferentes sobre cómo diseñar aplicaciones. Angular
intenta diseñar su framework y el proceso de desarrollo en torno a estándares
comunes (como aprovechar las últimas funciones del lenguaje JavaScript),
utilizando capacidades modernas (como la inclusión de TypeScript para la
aplicación de tipos).
• Incluye herramientas de desarrollo, personalizaciones disponibles: Angular
proporciona una experiencia de desarrollo comun a través de su herramienta
CLI (para generar, construir, probar e implementar aplicaciones), al tiempo
que hace que esas mismas herramientas estén disponibles para integrarse
fácilmente en soluciones personalizadas (como un conjunto de herramientas
de compilación personalizada ) y herramientas de terceros (como diferentes
editores o IDE).
• Potente Ecosistema con una gran comunidad: hay un número cada vez
mayor de bibliotecas de terceros, bibliotecas de UI, publicaciones de blog y
eventos. La comunidad grande y activa de Angular proporciona una excelente
base de aprendisaje el cual tambien infunde confianza en que seguirá siendo
una tecnología valiosa.
• Patrocinado por Google, impulsado por la comunidad de código abierto:
Google cuenta con un equipo de ingenieros, gerentes y tecnicos dedicados
exclusivamente a brindar Angular al resto de Google y a toda la comunidad
web. Con miles de "clientes internos" que confían en Angular dentro de
Google, el equipo de Angular utiliza esas experiencias para informar el
desarrollo futuro y recibe grandes volúmenes de contribuciones externas que
conforman el futuro de Angular.
5.1. Angular JS a Angular
La Web 2.0 finalmente dio paso a mejores enfoques y frameworks de
aplicación. El termino aplicación web también se perfeccionó, debido quizás
en gran parte a la estandarización de HTML5 y EcmaScript 5 (la base de
JavaScript), y se centró principalmente en la capacidad de crear aplicaciones
robustas que se ejecutan casi por completo en el navegador. (Jeremy Wilken,

24
David Aden, Jason Aden, 2018)
En 2009, Misko Hevery anunció que AngularJS, se convirtió en uno de los
frameworks más populares para crear aplicaciones web. El proyecto
AngularJS se introdujo en Google, y la versión 1.0 se lanzó oficialmente en
octubre de 2010. Hubo muchos otros frameworks de trabajo viables, pero
AngularJS llegó a un acuerdo con una amplia audiencia de desarrolladores.
Ha habido cierta confusión acerca de las versiones de angular. El equipo de
Angular ha decidido proporcionar orientación y llamar a la primera versión
AngularJS. Ese es el nombre que se le dio inicialmente y lo separa
arquitectónicamente de las versiones posteriores. Cualquier versión de 1.0 a
2.0 se conoce como AngularJS.
Para las versiones 2.0 y superiores, se conoce como simplemente Angular .
La versión 2.0 fue una reescritura completa, y todas las versiones posteriores
se planificaron como cambios incrementales en ella.
Angular, la versión 2.0, anunciada oficialmente en septiembre de 2014, se
desarrolló en el transcurso de dos años (más algún tiempo antes de su
anuncio). Se lanzó como versión Angular 2 en septiembre de 2016, y Angular
4 se lanzó en marzo de 2017. El equipo de Angular continuará proporcionando
los principales lanzamientos en un calendario de seis meses, con un enfoque
en las actualizaciones. Dependiendo de cuándo lea esto, Angular 6, o incluso
10, podría ser la versión más actual.

25
 Figura 10: El sitio web de Angular https://angular.io.
Fuente: (Jeremy Wilken, David Aden, Jason Aden, 2018)
5.2. Angular una Plataforma, no un Marco.
Hay algunas distinciones importantes entre un framework y una plataforma.
Un framework generalmente es solo la biblioteca de códigos que se usa para
construir una aplicación, mientras que una plataforma es más holística e
incluye herramientas y soporte más allá de un framework. AngularJS se centró
únicamente en la creación de aplicaciones web en el navegador y era
claramente un framework. Tenía un gran ecosistema de módulos de terceros
que podían usarse fácilmente para agregar características a su aplicación,
pero en el fondo de todo, simplemente construía aplicaciones web en el
navegador.
Angular viene con una biblioteca central más ágil y ofrece funciones

26
 adicionales disponibles como paquetes separados que se pueden usar según
sea necesario. También tiene muchas herramientas que lo empujan más allá
de un framework simple, incluyendo lo siguiente:
• CLI, dedicado para el desarrollo, pruebas y despliegue de aplicaciones.
• Offline Rendering, Capacidades en muchas plataformas de servidor back-
end.
• Desktop-mobile y browser-based, entornos de ejecución de aplicaciones.
• Comprehensive UI, bibliotecas de componentes, como Material Design.
Algunas de estas cosas existían de alguna forma con AngularJS, pero la
mayoría eran soluciones de la comunidad y fueron atornilladas a AngularJS
después del hecho. En contraste, Angular fue desarrollado con estas
características de plataforma en mente (Jeremy Wilken, David Aden, Jason
Aden, 2018).
Estas piezas aún están en proceso de refinamiento y continuarán
evolucionando hacia opciones más robustas.
5.3. Angular CLI.
Angular CLI es una herramienta maravillosa que tiene una lista cada vez
mayor de capacidades. Con el tiempo, es probable que haya muchas más
cosas de las que se menciona aquí, y quizás las capacidades también
cambien:
La CLI angular (a menudo denominada CLI ) es la cadena de herramientas
oficial para crear aplicaciones que proporcionan estas características y más.
Se puede instalar el CLI usando npm. Se requiere una versión reciente de
NodeJS instalada para funcionar correctamente:
npm install –g @angular/cli
El CLI tiene una serie de características que ayudan en el desarrollo de
aplicaciones con angular. A continuacion se mensiona las principales
caracteristicas:
• Genera nuevos andamios para proyectos, En lugar de tener que
crear un nuevo proyecto a partir de un proyecto existente o crear todos
los archivos, CLI generará un proyecto completo con una aplicación

27
 básica que ya se inició.
• Genera nuevas piezas de aplicación, se puede generar los
components, services, routes, and pipes, y también se asegurará
automáticamente de que estén completamente conectados en el
proceso de construcción.
• Adminstra toda la cadena de herramientas de compilacion,
dado que los archivos deben procesarse antes de que se sirvan al
cliente (como la compilación de TypeScript), la CLI procesará los
archivos de origen y los integrará en una versión optimizada para el
desarrollo o la producción.
• Sirve como un servidor de desarrollo de localhost, La CLI maneja el
flujo de compilación y luego inicia la escucha del servidor en localhost
para que pueda ver los resultados, con una función de recarga en vivo.
• Incorpora codigo de alineacion y formato de codigo, ayuda a
imponer el código de calidad mediante el uso de la CLI para mezclar su
código en busca de errores de estilo y semánticos, y también puede
ayudar a dar formato a su código de manera automática a las reglas de
estilo.
• Soporta running unit y pruebas e2e, las pruebas son vitales, por lo
que el CLI configura Karma para ejecutar sus pruebas unitarias y
trabaja con Protractor para ejecutar sus pruebas e2e. Recogerá y
ejecutará automáticamente nuevas pruebas a medida que se generen.
5.4. Capacidad de Angular en Mobiles y Escritorio.
Las capacidades móviles y de escritorio de Angular son extensiones del
diseño del compilador. Las siguientes herramientas están todas fuera del
núcleo de Angular pero utilizan el diseño de Angular para alimentar algunos
patrones de diseño potentes:
• Ionic (móvil) – Este fantástico y popular framework de aplicación híbrida
( figura 11 ) para Angular JS, se ha actualizado para que funcione con
Angular. Se han creado millones de aplicaciones móviles con Ionic, y se
centra principalmente en crear aplicaciones híbridas. Todos los

28
 componentes de la interfaz de usuario se crean para ejecutarse en el
navegador, pero parecen componentes nativos de la interfaz de
usuario.
• NativeScript (móvil) - Este es otro framework móvil popular que crea
aplicaciones móviles nativas. NativeScript implementa los componentes
de la interfaz de usuario nativos.
• React Native (móvil, escritorio) – Por el nombre, sería correcto suponer
que React Native es realmente parte del ecosistema del framework
React. Pero con un render personalizado, es posible usar la
herramienta React Native para generar aplicaciones móviles nativas.

Figura 11: pagina principal de Ionic.

Fuente: (Jeremy Wilken, David Aden, Jason Aden, 2018)
• Windows Universal (escritorio) – Windows tiene soporte para construir
aplicaciones nativas en Windows usando JavaScript. Es posible usar
Angular como la capa de su aplicación, pero aún tiene que crear una
aplicación nativa de Windows.

29
 • Electron (escritorio) – Esta basado en NodeJS, Electron es un framework
de aplicación multiplataforma muy popular. Implementa un conjunto
de API para conectarse al sistema operativo nativo, y puede aprovechar
Angular para potenciar la lógica interna de su aplicación.
• Aplicaciones Web Progresivas (móviles, de escritorio) - Las capacidades
de Progressive Web Apps ( PWA s) no están limitadas a Angular.
Fundamentalmente, se trata de difuminar la línea entre la web y lo
nativo. A partir de este escrito, están en apoyo experimental. Esta es una
avenida potencial emocionante para construir aplicaciones del mañana.
Estas diferentes opciones soportan, la potencia del compilador desacoplado
en Angular. También significa que es probable que haya muchos, muchos
más ejemplos y casos de uso que le permitan crear aplicaciones con angular
que se puedan ejecutar casi en cualquier sitio.
5.5. Arquitectura de Componentes.
Muchos son las aplicaciones modernas que han adoptado por un enfoque
basado en componentes para desarrollar aplicaciones. La intención es diseñar
cada pieza de su aplicación de manera independiente que limite la cantidad de
acoplamiento y duplicación en varias partes del programa. De muchas
maneras, un componente es una forma de crear elementos HTML
personalizados en su aplicación.
La forma más fácil de pensar en una arquitectura de componentes es mirar un
ejemplo de una página con una gran cantidad de partes discretas e
inspeccionar cómo se relacionan las diferentes partes entre sí.

30
 Figura 12: Arquitectura de componentes.
Fuente: (Jeremy Wilken, David Aden, Jason Aden, 2018)
En la figura, se muestra varios componentes que se combinan para crear el
diseño de una fila en la tabla. Puede ver que varias partes son independientes
de las otras, pero también trabajan juntas para crear la lista de
elementos. Claramente hay una jerarquía entre ellos. La lista de componentes
de la derecha muestra la relación de padre a hijo que cada uno de los
componentes tiene con los demás, y esto es esencialmente cómo
los elementos HTML trabajan juntos en la página.
El propio HTML es un lenguaje de componentes. Cada elemento tiene un
cierto rol y funcionalidad, y todos se anidan fácilmente para crear una

31
 funcionalidad más compleja. Están aislados pero aún son fáciles de manipular
para hacer lo que sea necesario en este momento. Algunos de los elementos
trabajan en tándem. Por ejemplo, los inputs se usan dentro de un form para
describir un conjunto de controles de entrada. Muchos elementos también
pueden emitir eventos cuando suceden cosas; un form puede emitir un evento
cuando se envía el formulario, por ejemplo. Esto le permite conectar lógica
adicional para manipular elementos HTML basados en los eventos que se
activan, en los fundamentos del desarrollo de aplicaciones front-end.
La intención es centrarse en dividir partes individuales de la aplicación
(particularmente los elementos de la interfaz de usuario visual ) en
componentes modulares discretos.
Hay muchas formas de implementar una arquitectura de componentes, como
lo demuestran las muchas bibliotecas de aplicaciones web, como React y
Ember. Angular tiene una arquitectura basada en componentes muy obvia
(todas las aplicaciones de Angular son componentes). React y Ember también
tienen soporte de primera clase para componentes en sus
aplicaciones. Aquellos con experiencia en jQuery también pueden imaginar
que los complementos de jQuery pueden ser conceptualmente similares a los
componentes, aunque no son tan consistentes ni regulados. Incluso los
conceptos básicos de los días de la Web 2.0 Se basan en la creación de
componentes (Jeremy Wilken, David Aden, Jason Aden, 2018).
6. Otras alternativas para elaboracion de Interfaz de Usuario
Para el desarrollo de la Interfaz de Usuario existen alternativas como React, Vue,
Spring MVC y otras mas con caracteristicas diferentes pero que comparadas con
angular tienen tiempo de desarrollo mas extenso y/o complejidad del lenguaje
mas elevada y/o curva de aprendizaje mas pronunciada.
React es una librería Javascript focalizada en el desarrollo de interfaces de
usuario, SPA(Single Page Application) o incluso aplicaciones para móviles. Tiene
un completo ecosistema de modulos, herramientas y componentes que ayudan a
cubrir objetivos avanzados adquiriendo relativamente poco esfuerzo.
Vue es un framework progresivo de java script enfocado a construir interfaces de

32
usuario dinamicas, esta diseñado desde el inicio para ser adaptado
incrementalmente, la curva de aprendisaje suele ser menor a comparacion de
otros frameworks, trabaja con componentes que son reutilizables el cual nos
permite desarrollar proyectos modularizados y facil de escalar.
Spring es un framework de código abierto para la creación de aplicaciones
empresariales Java, con soporte para Groovy y Kotlin. Tiene una estructura
modular y una gran flexibilidad para implementar diferentes tipos de arquitectura
según las necesidades de la aplicación.
Angular es un framework de aplicaciones web front-end de tipo SPA (Single Page
Application), Open Source, basado en JavaScript, creado por Google, con una
amplia comunidad de usuarios. Otro proposito de angular es separar de forma
completa el front-end y back-end de una aplicación web. Una aplicación web
SPA creada con Angular es una web de una sola página, en la cual la navegación
entre secciones y páginas de la aplicación, así como la carga de datos, se realiza
de manera dinámica, casi instantánea, asincronamente haciendo llamadas al
servidor (backend con un API REST) y sobre todo sin refrescar la página en
ningún momento. La curva de aprendisaje de angular es menor a comparacion de
otros frameworks por que el lenguaje de este framework es typescript (un
conjunto de JavaScript y ECMAScript), es importante indicar que todo se maneja
en base a módulos y asi tener los componentes separados en el entorno de
desarrollo, el cual permite un mejor mantenimiento a las aplicaciones.
6.1. React.
React es una biblioteca de JavaScript para crear interfaces de usuario en una
variedad de plataformas. React brinda un poderoso modelo mental con el que
trabajar y ayuda a crear interfaces de usuario de forma declarativa y basada en
componentes. (Thomas, 2018)
¿Dónde encaja React en el mundo más amplio de la ingeniería web? A menudo
se ha oido hablar de React en el mismo espacio que proyectos como Vue, Preact
Angular, Ember, Webpack, Redux y otras bibliotecas y marcos de JavaScript
conocidos. React es a menudo una parte importante de las aplicaciones de front-
end y comparte características similares con las otras bibliotecas y framework. De

33
hecho, muchas tecnologías populares de front-end se parecen más a React de
manera sutil ahora que en el pasado. (Thomas, 2018)
Hubo un momento en que el enfoque de React era novedoso, pero desde
entonces otras tecnologías han sido influenciadas por el enfoque declarativo
impulsado por componentes de React. React continúa manteniendo un espíritu de
repensar las mejores prácticas establecidas.
¿Qué hace que el modelo mental de React sea poderoso? Se basa en áreas
profundas de informática y técnicas de ingeniería de software. El modelo mental
de React se basa en gran medida en conceptos de programación funcional y
orientada a objetos y se centra en los componentes como unidades primarias.
El sistema de renderizado de React administra estos componentes y mantiene la
vista de la aplicación sincronizada para el cliente. Los componentes a menudo se
corresponden con aspectos de la interfaz de usuario, como seleccionadores de
fechas, encabezados, barras de navegación y otros, pero también pueden asumir
la responsabilidad de cosas como el enrutamiento del lado del cliente, el formato
de los datos, el estilo y otras responsabilidades de una aplicación del lado del
cliente.
La Figura 13 proporciona una visión general de los principales ingredientes que
forman parte de una aplicación React. A continuacion se mostrará brevemente
cada parte:

34
35
 Figura 13: Principales elementos de una app React.
Fuente: (Thomas, 2018)
• Components: Unidades de funcionalidad encapsuladas que son la unidad
primaria en React. Utilizan datos ( propiedades y estado ) para representar
su IU como salida. React también proporcionan un conjunto de métodos de
ciclo de vida que puede conectar. El proceso de representación (generar y
actualizar una interfaz de usuario basada en sus datos) es predecible en
React, y sus componentes pueden enlazarse utilizando las API de React.
• React libraries: React utiliza un conjunto de bibliotecas básicas. La
biblioteca principal de react trabaja con las bibliotecas react-dom y react-
native. Centrandose en la definición y especificación de componentes. Le
permite construir un árbol de componentes que puede usar un procesador
para el navegador u otra plataforma. react-dom es uno de esos
renderizadores y está dirigido a entornos de navegador y renderización del
lado del servidor. Las bibliotecas React Native se centran en plataformas
nativas y le permiten crear aplicaciones React para iOS, Android y otras
plataformas.
• Third-party libraries: React no incluye herramientas para el modelado de
datos, llamadas HTTP, bibliotecas de estilo u otros aspectos comunes de
una aplicación para usuarios. Esto le permite usar código adicional,
módulos u otras herramientas que prefiera en su aplicación. Y a pesar de
que estas tecnologías comunes no vienen incluidas con React, el
ecosistema más amplio alrededor de React está lleno de bibliotecas
increíblemente útiles.
React comenzó como un proyecto pequeño, pero ahora tiene una amplia
popularidad y una comunidad vibrante. Además, la comunidad React también
incluye subconjuntos más pequeños de otras comunidades de código
abierto. Esto puede ser desalentador porque el ecosistema puede parecer
vasto, pero también hace que la comunidad sea robusta y diversa. La figura
14, muestra un mapa del ecosistema React.

36
 Figura 14: Mapa del ecosistema React.
Fuente: (Thomas, 2018)
Estas son algunas de las compañías que utilizan React para impulsar sus
productos:
• Facebook
• Netflix
• Nueva reliquia
• Uber
• Wealthfront
• Heroku
• PayPal
• BBC
• Microsoft
• NFL
• Asana

37
• ESPN
• Walmart
• Venmo
• Codecademia
• Atlassiano
• Asana
• Airbnb
• academia Khan
• FloQast
Estas empresas no están siguiendo ciegamente las tendencias de la comunidad
de JavaScript. Tienen demandas de ingeniería excepcionales que afectan a un
gran número de usuarios y deben entregar productos en plazos estrictos. Las
empresas y los desarrolladores desean buenas herramientas que les ayuden a
pensar mejor y moverse rápidamente para que puedan crear aplicaciones de alto
impacto, escalables y confiables (Thomas, 2018).
6.2. Vue.
Los sitios web interactivos han existido durante mucho tiempo. Durante el inicio
de los días de la Web 2.0 a mediados de la década de 2000, se puso un mayor
énfasis en la interactividad y la participación de los usuarios. Compañías como
Twitter, Facebook y YouTube fueron creadas durante este tiempo. El auge de las
redes sociales y el contenido generado por los usuarios cambiaron la web para
mejor necesidad.
Los desarrolladores tuvieron que mantenerse al día con estos cambios para
permitir una mayor interactividad para el usuario final y, desde el principio, las
bibliotecas y los frameworks comenzaron a hacer que los sitios web interactivos
fueran más fáciles de construir. En 2006, jQuery fue lanzado por John Resig,
simplificando enormemente las secuencias de comandos HTML del lado del
cliente. A medida que avanzaba el tiempo, se crearon marcos y bibliotecas del
lado del cliente.
Al principio, estos frameworks y bibliotecas eran grandes, monolíticos. Ahora,
hemos visto un cambio a bibliotecas más pequeñas y livianas que se pueden

38
agregar fácilmente a cualquier proyecto. Aquí es donde entra Vue.js.
Vue.js es una biblioteca que nos permite agregar ese comportamiento y
funcionalidad interactiva a cualquier contexto donde se pueda ejecutar JavaScript.
Vue se puede utilizar en páginas web individuales para tareas simples o puede
proporcionar la base para una aplicación empresarial completa.
Desde la interfaz con la que interactúan los visitantes hasta la base de datos que
proporciona a nuestra aplicación sus datos, exploraremos cómo Vue y sus
bibliotecas de soporte nos permiten crear aplicaciones web completas y
sofisticadas (Erik Hanchett, 2018).
Vue es un recién llegado relativo en el panorama de frontend de JavaScript, pero
un rival muy serio para las bibliotecas líderes actuales. Es simple, flexible y muy
rápido, a la vez que proporciona muchas funciones y herramientas opcionales
que pueden ayudarlo a construir una aplicación web moderna de manera eficiente
(Chau, 2017). Su creador, Evan You , lo llama el framework progresivo:
• Vue se puede adoptar de forma incremental, con una biblioteca central
centrada en las interfaces de usuario que puede utilizar en proyectos
existentes
• Puede hacer pequeños prototipos hasta aplicaciones web grandes y
sofisticadas.
• Vue es accesible: los principiantes pueden recoger la biblioteca fácilmente y
los desarrolladores confirmados pueden ser productivos muy rápidamente
Vue sigue aproximadamente una arquitectura Modelo-Vista-Modelo de Vista, lo
que significa que la Vista (la interfaz de usuario) y el Modelo (los datos) están
separados, siendo el Modelo de Vista (Vue) un mediador entre los dos. Maneja
las actualizaciones automáticamente y ya ha sido optimizado. Por lo tanto, no se
tiene que especificar cuándo debe actualizarse una parte de la Vista porque Vue
elegirá la forma y el momento correctos para hacerlo (Chau, 2017).

39
 Figura 15: Componentes del modelo Model-View-ViewModel
Fuente: (Erik Hanchett, 2018)

La biblioteca también se inspira en otras bibliotecas similares, como React,

Angular y Polymer. Lo siguiente es una descripción general de sus características
principales:
• Se requiere un sistema de datos reactivos que pueda actualizar su interfaz de
usuario automáticamente, con un motor de DOM virtual ligero y con esfuerzos
mínimos de optimización.
• Declaración de vista flexible: plantillas HTML amigables para el artista, JSX
(HTML dentro de JavaScript), o funciones de renderizado hiperscript
(JavaScript puro)
• Interfaces de usuario compostables con componentes mantenibles y
reutilizables.
• Bibliotecas oficiales que vienen con enrutamiento, administración de estado,
andamios y características más avanzadas, lo que convierte a Vue en un
marco de frontend sin opiniones pero completamente desarrollado.
6.3. Spring MVC.
Spring Framework es El marco de desarrollo de aplicaciones más confiable y
ampliamente utilizado en Enterprise Java. Originalmente presentada como una

40
alternativa simple y liviana para el complejo J2EE, Spring ahora ha crecido hasta
convertirse en una plataforma de desarrollo de aplicaciones verdaderamente
moderna. Spring y sus subproyectos proporcionan una base excelente para el
desarrollo de aplicaciones de extremo a extremo, con características que van más
allá incluso de las que ofrece la última versión de Java EE, como el desarrollo
móvil, redes sociales y big data, además de la web tradicional de Java, del lado
del servidor. o incluso aplicaciones independientes. Después de más de una
década desde su inicio, Spring continúa inspirando tecnologías y tecnólogos en
todo el mundo.
Aunque Spring simplifica drásticamente el desarrollo de Java, los desarrolladores
de software y los arquitectos aún deben comprender a fondo sus conceptos y
funciones principales para deducir el mejor uso de la familia Spring. La
simplicidad que Spring ofrece para el desarrollo de Java de otro modo complejo
es el resultado de abstracciones inteligentes que proporciona en forma de
excelentes API y módulos. Los componentes de resorte alivian al desarrollador de
toda la complejidad técnica y el trabajo pesado de las tareas comunes de
plomería técnica y de infraestructura. Como se indica en la documentación oficial
de Spring, Spring brinda un completo soporte de infraestructura para que pueda
concentrarse en su aplicación.
6.3.1. Spring Landscape.
Spring cubre una amplia variedad de aspectos tecnológicos manejados por
aplicaciones de diferentes tipos, desde una simple aplicación Java
independiente hasta los sistemas empresariales distribuidos de misión crítica
más complejos que pueda imaginar. A diferencia de la mayoría de los otros
frameworks de código abierto o propietarios que se centran en un problema de
tecnología específico, como Web, mensajería o comunicación remota, Spring
cubre con éxito casi todos los aspectos técnicos de las aplicaciones
empresariales. En la mayoría de los casos, en lugar de reinventar las
soluciones, Spring utiliza e integra los frameworks existentes probados para
lograr esta cobertura de extremo a extremo. Spring es altamente modular; por
lo tanto, no de manera invasiva le permite seleccionar solo los módulos o las

41
 funciones que necesita para convertirse en una ventanilla única para todas
sus necesidades de desarrollo en JVM.
La cartera completa de Spring Framework está organizada en tres elementos
principales:
• Spring Framework
• Spring Tool Suite
• Spring Subprojects
Spring está mejorando constantemente y se está volviendo cada vez más
modular con cada nueva versión para que pueda usar solo los módulos
requeridos. (Geoffroy Warin, Alex Bretet, Hamidreza Sattari, Shameer
Kunjumohamed, 2016)
6.3.2. Modulos de Spring Framework.
El Nucleo de Spring Framework, proporciona una infraestructura básica para
el desarrollo de Java además de su contenedor central de Inversión de Control
(IoC). El contenedor IoC es una infraestructura que proporciona inyección de
dependencia (DI) para aplicaciones. Tanto los conceptos de Inyección de
dependencia como los contenedores IoC. El Spring Framework central se
divide en los siguientes módulos, que proporcionan una gama de servicios:
(Geoffroy Warin, Alex Bretet, Hamidreza Sattari, Shameer Kunjumohamed,
2016)
Tabla 1: Muestra los distintos Modulos de Spring Framework

Módulo Resumen

Proporciona las características de IoC y de inyección de

Contenedor central
dependencia.

Proporciona características compatibles con AOP Alliance

AOP e
para tejer preocupaciones transversales en aplicaciones
instrumentación
Spring.

Proporciona abstracción de mensajería sobre el proyecto

Mensajería
Spring Integración para aplicaciones basadas en mensajería.

42
 Módulo Resumen

Acceso / integración La capa de acceso / integración de datos consta de JDBC,

de datos ORM, OXM, JMS y módulos de transacción.

Abstracción de tecnología web sobre Spring MVC, web socket

Web
y API de portlet.

Prueba Pruebas unitarias y soporte de pruebas de integración con los

frameworks JUnit y TestNG.
Fuente: (Geoffroy Warin, Alex Bretet, Hamidreza Sattari, Shameer Kunjumohamed,
2016, p. 4)
6.3.3. Spring Tools Suite (STS).
STS es un IDE basado en Eclipse (corto para Entorno de desarrollo
integrado ) para el desarrollo de spring. Se puede descargar el STS
preinstalado desde http://spring.io/tools/sts/all o actualizar eclipse existente a
la instalación, desde el sitio de actualización. STS proporciona varias
características de alta productividad para el desarrollo de Spring. De hecho,
un desarrollador de Java puede usar cualquier IDE de su elección. Casi todos
los IDE de Java son compatibles con el desarrollo de Spring, y la mayoría de
ellos tienen complementos disponibles para Spring (Geoffroy Warin, Alex
Bretet, Hamidreza Sattari, Shameer Kunjumohamed, 2016, p. 4).
6.3.4. Subproyectos de Spring.
Spring Tiene muchos subproyectos que resuelven diversas necesidades de
infraestructura de aplicaciones. Desde la configuración hasta la seguridad,
desde aplicaciones web hasta big data, desde productividad hasta La
integración de aplicaciones empresariales ( EAI ), sea cual sea su punto
técnico, encontrará un proyecto Spring para ayudarlo en el desarrollo de su
aplicación. Proyectos de spring son ubicados en http://spring.io/projects.
Algunos proyectos notables que pueden ser útiles de inmediato son Spring
Data (JPA, Mongo, Redis, etc.), Spring Security, Spring Web Services, Spring
Integration, Spring para Android y Spring Boot.
6.3.5. Conceptos de Diseño detrás de Spring Framework.

43
 El diseño de Spring Framework está motivado por un conjunto de patrones de
diseño y mejores prácticas, que han evolucionado en la industria para abordar
la complejidad de la programación orientada a objetos, que incluye:
• Simple, no invasivo y ligero. Programación de POJO ( objetos antiguos de
Java ) sin necesidad de servidores de aplicaciones complejas.
• Loosely-coupled dependencies, que se logran aplicando los conceptos de
programa a las interfaces y la composición sobre la herencia , que son los
principios de diseño subyacentes de los patrones de diseño y los marcos.
• Highly configurable systems, compuestos de objetos con inyección de
dependencia externalizada.
• Templated abstractions to eliminate repetitive, codigo repetitivo.
• Declarative weaving of cross-cutting, aspectos sin componentes
empresariales contaminantes.
Spring implementa los principios y patrones de diseño establecidos en sus
componentes elegantes y promueve su uso como el enfoque de diseño
predeterminado en aplicaciones creadas con Spring. Este enfoque no invasivo
le permite diseñar sistemas robustos y altamente sostenibles compuestos de
componentes y objetos acoplados de forma flexible, escritos en código limpio
y modular (Geoffroy Warin, Alex Bretet, Hamidreza Sattari, Shameer
Kunjumohamed, 2016, p. 6).
6.4. Angular como Preferido.
Angular es un Framework de codigo abierto, desarrollado por Google para crear
aplicaciones dinamicas y modernas. Ayuda a crear aplicaciones interactivas y
dinámicas de una sola página (SPA) con sus características atractivas que
incluyen plantillas, enlace bidireccional, modularización, manejo de API RESTful,
inyección de dependencia y manejo de AJAX. Al utilizar este framework en
proyectos, se ha podido obtener múltiples beneficios. Por esta razon se ha
enumerado algunas razones del por que utilizar Angular:
• Apoyado por Google, Una de las mayores ventajas de Angular es que es
compatible con Google. La mejor parte de esto es el Soporte a largo plazo
(LTS) de Google. Esto arroja luz sobre el plan de Google para seguir adelante

44
 y ampliar aún más el ecosistema angular.
• Typescript, Las aplicaciones con angular se crean utilizando el lenguaje
TypeScript, un superíndice para JavaScript, que garantiza una mayor
seguridad ya que admite tipos (primitivas, interfaces, etc.). Ayuda a detectar y
eliminar errores antes de escribir el código o realizar tareas de mantenimiento.
• Directivas, permite cambiar el comportamiento de las etiquetas HTML. Es una
característica muy potente que le permite crear etiquetas personalizadas. El
uso de la etiqueta de directiva le dice al compilador que añadir algunas
funciones de elemento DOM o incluso puede transformarla. También tiene una
amplia gama de directivas pre-construidos disponibles para poder elegir.
• Pojo, Con Angular, no se necesita funciones adicionales de getter y
setter. Dado que, cada objeto que utiliza es POJO (objeto antiguo de
JavaScript simple), que permite la manipulación de objetos proporcionando
todas las funcionalidades de JavaScript convencionales. Puede eliminar o
agregar propiedades de los objetos, mientras que también realiza un bucle
sobre estos objetos cuando sea necesario.
• Pruebas faciles, Con la separación de módulos, se puede cargar los servicios
necesarios, mientras se realiza efectivamente las pruebas automáticas. Ni
siquiera se necesita recordar el orden de carga del módulo.
• Estructura Modular, Angular organiza código en cubos , si se trata de
componentes, directivas, tuberías o servicios. Los módulos facilitan la
organización de la funcionalidad de la aplicación, segregándola en
características y fragmentos reutilizables. Los módulos también permiten la
carga diferida, lo que allana el camino para la carga de funciones de la
aplicación en segundo plano o bajo demanda.
• Reusabilidad, La estructura de Angular basada en componentes hace que los
componentes sean altamente reutilizables en toda la aplicación. Se puede
crear la interfaz de usuario (UI) con partes móviles, al tiempo que garantiza un
proceso de desarrollo sin problemas.
• Pruebas Unitarias Simplificadas, Al ser independientes entre sí, los
componentes hacen que las pruebas unitarias sean mucho más fáciles.

45
 • Mejor Legibilidad, La coherencia en la codificación hace que la lectura del
código sea una tarea fácil de entender en un proyecto en curso, lo que
aumenta la productividad.
• Facilidad de Mantenimiento, Los componentes desacoplados son
reemplazables con mejores implementaciones. En pocas palabras, permite el
mantenimiento y actualización de forma eficiente en el código
7. Implementación de una Aplicación en Tiempo Real con Socket.IO, Angular y
Node.js.
A continuación se implementara una pequeña aplicación utilizando Node.js como
servidor, Angular del lado del cliente y socket.io para la transferencia de datos en
tiempo real, para crear una aplicación de colaboración de documentos en tiempo
real. Para lo cual se configura las dependencias de socket.io en el proyecto, luego
se importan las librerías necesarias en node de socket.io. Se define el código
para que el servidor de socket funcione en la transferencia de datos en tiempo
real. Al lado del cliente se adiciona la dependencia ngx-socket-io, luego se crea
un servicio que se encargue de la manipulación de documentos usando sockets
permitiendo así la comunicación cliente y servidor.

7.1. Configuración del Proyecto.

Los WebSockets son ampliamente compatibles, pero para los fines de esta
demostración, se usara Angular para el cliente y Node.js para el servidor. Se
puede usar prácticamente cualquier framework para el front-end y servidor.
7.2. Socket Server.
Desde algún directorio base, ejecute los siguientes comandos para inicializar su
proyecto de servidor:
$ mkdir socket-server
$ cd socket-server
$ mkdir src
$ npm init
$ npm i express socket.io @types/socket.io –save
Ahora cree un nuevo archivo llamado app.js en el directorio src y ábralo usando

46
su editor de texto favorito.
En la parte superior, necesitara la declaración require para Express y Socket.IO:
const app = require('express')();
const http = require('http').Server(app);
const io = require('socket.io')(http);
Usamos Express y Socket.IO para configurar nuestro servidor. Socket.IO
proporciona una capa de abstracción sobre WebSockets nativos. Viene con
algunas características interesantes, como un mecanismo alternativo para los
navegadores más antiguos que no son compatibles con WebSockets y la
capacidad de crear "salas".
Nuestra próxima línea será nuestro almacén de documentos en
memoria. Probablemente no se debería hacer esto en producción. Sería mejor
utilizar una base de datos real para esto.
const documents = {};
Ahora se define el código para que el servidor de socket funcione correctamente
en la transferencia de datos en tiempo real.
io.on("connection", socket => {
let previousId;
const safeJoin = currentId => {
socket.leave(previousId);
socket.join(currentId);
previousId = currentId;
};
socket.on("getDoc", docId => {
safeJoin(docId);
socket.emit("document", documents[docId]);
});
socket.on("addDoc", doc => {
documents[doc.id] = doc;
safeJoin(doc.id);
io.emit("documents", Object.keys(documents));

47
 socket.emit("document", doc);
});
socket.on("editDoc", doc => {
documents[doc.id] = doc;
socket.to(doc.id).emit("document", doc);
});
io.emit("documents", Object.keys(documents));
});
A continuación se desglosara el código escrito anteriormente.
.on('...') es un oyente de eventos. El primer parámetro es el nombre del evento, y
el segundo generalmente es una devolución de llamada ejecutada cuando se
dispara el evento, con la carga útil del evento. El primer ejemplo que se ve, es
cuando un cliente se conecta al servidor de socket ( connection es un tipo de
evento reservado en Socket.IO). Obtenemos un socket como variable para pasar
a nuestra devolución de llamada, para iniciar la comunicación con ese único
socket o con múltiples sockets (es decir, difusión).
Se ha configurado una función local ( safeJoin) que se encarga de unir y dejar
"rooms". En este caso, cuando un cliente se ha unido a una sala, está editando un
documento en particular. Entonces, si varios clientes están en la misma sala,
todos están editando el mismo documento. Técnicamente, un socket puede estar
en varias salas, pero no queremos que un cliente edite varios documentos al
mismo tiempo, por lo que si cambian de documento, debemos abandonar la sala
anterior y unirnos a la nueva. Esta pequeña función se encarga de eso.
Hay tres tipos de eventos que nuestro socket está escuchando desde el cliente:
• getDoc
• addDoc
• editDoc
Y dos tipos de eventos que son emitidos por el socket al cliente:
• document
• documents
Cuando el cliente emita el evento getDoc, el socket tomará la carga (en nuestro

48
caso, es solo una identificación), se unirá a una sala con esa identificación de
documento y emitirá el documento almacenado solo al cliente iniciador. Ahí es
donde socket.emit('document', ...) entra en funcion.

Con el evento addDoc, la carga útil es un objeto de documento que, en este

momento, consiste solo en una identificación generada por el cliente. Le pedimos
al socket que se una a la sala de esa identificación, para que cualquier edición
futura se pueda transmitir a cualquier persona en la misma sala. Luego,
queremos que todos los conectados a nuestro servidor sepan que hay un nuevo
documento con el que trabajar, por lo que transmitimos a todos los clientes con la
función io.emit('documents', ...). Se podrá notar que esta misma emisión también
ocurre cuando se realiza una nueva conexión. Nótese la diferencia entre
socket.emit() y io.emit(). La función del socket es para emitir un nuevo mensaje a
solo un cliente, la función del io, es para emitir a todos los clientes conectados al
servidor.
Finalmente, con el evento editDoc, la carga útil será todo el documento en su
estado después de cualquier pulsación de tecla. Reemplazaremos el documento
existente en la base de datos y luego se transmitirá el nuevo documento solo a
los clientes que actualmente lo están viendo.
Se hará este llamado a socket.to(doc.id).emit(document, doc), que se emite a
todas las tomas de esa sala en particular.
Una vez configuradas todas las funciones del socket, se seleccionara un puerto
de escucha.
http.listen(4444);
Ahora se tiene un servidor de socket completamente funcional para la
colaboración de documentos. Para iniciar el servidor es necesario ejecutar el
siguiente código:
$ node src/app.js
7.3. Aplicación del Cliente con Angular.
En una nueva ventana de terminal fuera de su proyecto de servidor de socket se
ejecuta los siguientes comandos:

49
 $ ng new socket-app --routing=false --style=SCSS
$ cd socket-app
$ npm i ngx-socket-io --save ## This is an Angular wrapper over socket.io client
libraries
$ ng g class document
$ ng g c document-list
$ ng g c document
$ ng g s document
7.4. Módulo de Aplicaciones.
Antes de la declaración @NgModule, agregue estas líneas:
// ...other imports
import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';

const config: SocketIoConfig = { url: 'http://localhost:4444', options: {} };

ahora agrege en la matriz import el siguiente código:
imports: [
BrowserModule,
FormsModule,
SocketIoModule.forRoot(config)
],
Esto activará la conexión al servidor de socket tan pronto como se cargue el
AppModule.
7.5. Servicio de Documentos.
Agregue un archivo document.ts y escriba el siguiente código:
export class Document {
id: string;
doc: string;
}
En el document.service.ts, agregue la siguiente definición de clase:
import { Injectable } from '@angular/core';
import { Socket } from 'ngx-socket-io';

50
 import { Document } from '../models/document';
@Injectable({
providedIn: 'root'
})
export class DocumentService {
currentDocument = this.socket.fromEvent<Document>('document');
documents = this.socket.fromEvent<string[]>('documents');
constructor(private socket: Socket) { }
getDocument(id: string) {
this.socket.emit('getDoc', id);
}
newDocument() {
this.socket.emit('addDoc', { id: this.docId(), doc: '' });
}
editDocument(document: Document) {
this.socket.emit('editDoc', document);
}
private docId() {
let text = '';
const possible =
'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz012345678
9';
for (let i = 0; i < 5; i++) {
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
return text;
}
}
Documents, será una stream de todos los documentos disponibles. currentDocId
es el id del documento seleccionado actualmente. La lista de documentos necesita
saber en qué documento estamos, para que podamos resaltar ese ID de

51
documento esta en el sidenav. _docSub, Es una referencia a la Subscription que
nos da el documento actual seleccionado. Se necesita esto para poder cancelar la
unsubscribe en el metodo ngOnDestroy del ciclo de vida.
Note los métodos loadDoc() y newDoc() no devolverá ni asignará nada; es
importante recordar que estos metodos solo activan eventos en el servidor del
socket, que gira y devuelve un evento a nuestros Observables. Los valores
devueltos para obtener un documento existente o agregar un nuevo documento se
realizan a partir de los patrones Observable anteriores.
7.6. Componente del Documento.
Esta será el area de edición del documento. Abra document.component.html y
reemplace los contenidos con:
<textarea [(ngModel)]='document.doc' (keyup)='editDoc()' placeholder='Start
typing...'></textarea>
Para una mejor vista de los datos, se cambiara algunos estilos en el área de texto
predeterminada de html en el document.component.scss.
textarea {
position: fixed;
width: calc(100% - 235px);
height: 100%;
right: 0;
top: 0;
font-size: 18pt;
padding-top: 20px;
resize: none;
border: none;
padding: 20px 0px 20px 15px;
}
Finalmente, agregue el siguiente código en document.component.ts.
import { Component, OnInit, OnDestroy } from '@angular/core';
import { DocumentService } from 'src/app/services/document.service';
import { Subscription } from 'rxjs';

52
 import { Document } from 'src/app/models/document';
import { startWith } from 'rxjs/operators';
@Component({
selector: 'app-document',
templateUrl: './document.component.html',
styleUrls: ['./document.component.scss']
})
export class DocumentComponent implements OnInit, OnDestroy {
document: Document;
private _docSub: Subscription;
constructor(private documentService: DocumentService) { }
ngOnInit() {
this._docSub = this.documentService.currentDocument.pipe(
startWith({ id: '', doc: 'Select an existing document or create a new one to get
started'})
).subscribe(document => this.document = document);
}
ngOnDestroy() {
this._docSub.unsubscribe();
}
editDoc() {
this.documentService.editDocument(this.document);
}
}
De manera similar al patrón que usamos anteriormente DocumentListComponent,
se suscribe a los cambios para el documento actual y se dispara un evento al
servidor de socket siempre que se cambie el documento actual. Esto significa que
se verá todos los cambios de cualquier otro cliente que está editando el mismo
documento que nosotros, y viceversa.
Se usa el operador startWith RxJS para enviar un pequeño mensaje al usuario
cuando abren la aplicación por primera vez.

53
 7.7. AppComponent.
Ahora agregue los dos componentes personalizados reemplazando el contenido
del archivo app.component.html:
<app-document-list></app-document-list>
<app-document></app-document>
Con nuestro servidor socket, ejecutandose aparte en una terminal, iniciamos
nuestra aplicación en angular.
$ng serve
En un navegador web coloque la direccion de la siguiente forma: http: // localhost:
4200 a continuacion podra ver la aplicación finalizada y ejecutandose
correctamente. Como se muestra en la siguiente figura (Alligator.io, 2018).

Figura 16: aplicación de colaboracion de documentos en tiempo real

Fuente: (Alligator.io, 2018)
8. Conclusiones.
Se describieron los mecanismos de tiempo real para poder establecer una
comunicación constante con el servidor, que les permita mantener la información
actualizada, justo cuando sucede una solicitud o respuesta del servidor al cliente o
del cliente al servidor.
Debido a que Node.js es una plataforma basada en el tiempo de ejecución de
JavaScript de Chrome para crear fácilmente aplicaciones de red escalables y
rápidas. El cual utiliza un modelo de E/S sin bloqueo, controlado por eventos, que lo

54
hace liviano y eficiente, es perfecto para aplicaciones de tiempo real con uso
intensivo de datos que se ejecutan en dispositivos distribuidos. Esta tecnologia es
particularmente adecuado para crear aplicaciones que requieren algún tipo de
interacción o colaboración en tiempo real.
Angular proporciona un framework muy poderoso para aplicaciones front-end. Y una
de sus caracteristicas es la inyección de dependencia (ID) que permite usar
patrones que han sido comunes en la mayoría de los framework de back-end como
Spring. Puede tambien separar los servicios y la lógica empresarial de sus
componentes y vistas. Los componentes hacen que sea mucho más sencillo escribir
aplicaciones front-end a gran escala, a la vez que se mantiene la capacidad de
mantenimiento. Tambien permite organizar código para descomponerlo en un nivel
muy granular.
Para el desarrollo de la Interfaz de Usuario existen alternativas como React, Vue,
Spring MVC y otras mas con caracteristicas diferentes pero que comparadas con
angular tienen tiempo de desarrollo mas extenso y/o complejidad del lenguaje mas
elevada y/o curva de aprendizaje mas pronunciada.
Se presento una prueba de concepto utilizando Node.js como servidor, Angular del
lado del cliente y socket.io para la transferencia de datos en tiempo real, para crear
una aplicación de colaboración de documentos en tiempo real. Para lo cual se
configuro las dependencias de socket.io en el projecto, luego se importaron las
librerias necesarias en node de socket.io. Se definio el código para que el servidor de
socket funcione en la transferencia de datos en tiempo real. Al lado del cliente se
adiciono la dependencia ngx-socket-io, luego se creo un servicio que se encargue de
la manipulación de documentos usando sockets permitiendo asi la comunicación
cliente y servidor.

55
9. Bibliografía.
Alex Young, Bradley Meck, Mike Cantelon, Tim Oxley, Marc Harter, T.J.
Holowaychuk, Nathan Rajlich. (2017). Node.js in Action, Second Edition.
Manning, 2017.
Alligator.io. (2018, Noviembre 14). Alligator. Retrieved Junio 25, 2019, from
https://alligator.io/angular/socket-io/
Chau, G. (2017). Vue.js 2 Web Development Projects. Packt Publishing.
Chopra, V. (2015). WebSocket Essentials - Building Apps with HTML5 WebSockets.
Mumbai: Packt Publisching Ltd.
EDUCBA. (s.f.). EDUCBA. Recuperado el 17 de Julio de 2019, de
https://www.educba.com/websocket-vs-socket-io/
Erik Hanchett, B. L. (2018). Vue.js in Action. Manning Publications.
Foundation, T. J. (n.d.). PERSEVERE. Retrieved Junio 23, 2019, from
http://www.persvr.org/
Geoffroy Warin, Alex Bretet, Hamidreza Sattari, Shameer Kunjumohamed. (2016).
Spring MVC: Designing Real-World Web Applications. Packt Publishing.
Jeremy Wilken, David Aden, Jason Aden. (2018). Angular in Action. Manning
Publications Company, 2018.
Projects, L. F. (2018). Node.js Fundation. Retrieved from http://nodejs.org/
Puiu, P. N. (n.d.). Ringojs. Retrieved Junio 23, 2019, from https://ringojs.org/
Rai, R. (2013). Socket.IO Real-time Web. Mumbai: Packt Publishing Ltd.
Rauch, G. (1 de mayo de 2017). http://socket.io.
Team, l. (n.d.). Libuv. Retrieved Junio 23, 2019, from http://libuv.org/
Thomas, M. T. (2018). React in Action. Manning Publications.
Torre, A. M. (2013). INTRODUCCIÓN A NODE.JS. Madrid: Universidad Politécnica
de Madrid.
Wexler, J. (2019). Get Programming with Node.js. Manning Publications.

56