Gestión de un módulo MEAN.JS – Parte 5

Standard

Cuando creamos un nuevo módulo a partir del generador mean.js, el generador nos crea una entidad que sólo tiene la propiedad name. En este vídeo vamos a ver cómo agregar nuevas propiedades a nuestra entidad y cómo gestionar estas nuevas propiedades de forma que cuando trabajemos con nuestra entidad, todas estas nuevas propiedades se almacenen y se recuperen de la base de datos.

 

Gestión del back-end

Por la parte del back-end, simplemente vamos a tener que modificar el fichero app/models/customer.server.model.js, que es el fichero en el que definimos el esquema de nuestra entidad. El esquema quedaría definido de la siguiente forma:

Gestión del front-end

Por la parte del front-end, sólo vamos a tener que modificar el controlador de nuestro módulo customers, y sus vistas. Dentro del controlador sólo tenemos que modificar el método create, que quedaría definido de la siguiente forma:

Y en las vistas iríamos definiendo las nuevas propiedades que hemos creado anteriormente. Así, por ejemplo, la vista create-customer.client.view.html quedaría definida de la siguiente manera:

En siguientes capítulos mostraremos cómo mejorar la visualización de la información mediante la utilización de tablas para representar el listado de nuestras entidades.

Stack MEAN – Funcionamiento Interno – Parte 4

Standard

En este vídeo vamos a explicar el funcionamiento interno de una aplicación web basada en el stack MEAN (Mongoose, ExpressJS, AngularJS, NodeJS).

 

El fichero en el configuramos el framework web es config/express.js. En este fichero, por una parte definimos el directorio donde vamos a alojar nuestros ficheros estáticos:

y por otra parte definimos las rutas de nuestra aplicación:

En el fichero app/core.server.routes.js se define la ruta principal de nuestra aplicación, que va a ser una página html, y básicamente va a ser la única página html de nuestra aplicación (a parte de la página de error interno 500 y la de recurso no encontrado 404). Sólo vamos a necesitar una única página html porque estamos desarrollando una aplicación SPA (Single Page Application), las cuales se ejecutan sobre una única página web. app/core.server.routes.js está definido de la siguiente forma:

que indica que cuando alguien acceda a la ruta principal de nuestra aplicación /, entonces se ejecute la acción index del controlador core. El controlador app/controllers/core.server.controller.js está definido de la siguiente forma:

que indica que se envíe al navegador la página index (app/views/index.server.view.html), que es la página principal de nuestra aplicación. Dentro de esta página es donde se ejecuta nuestra aplicación AngularJS.

Posteriormente, por cada módulo nuevo que generemos a través del generador y mediante la instrucción yo meanjs:crud-module module-name el generador nos va a generar dentro del directorio app/routes un nuevo fichero de rutas. Así, cuando en su día generamos el módulo customers, el generador nos creó el siguiente fichero:

donde se definen las rutas para nuestro servicio web REST para customers.

De esta forma, cuando un usuario esté trabajando con nuestra aplicación web, a la hora de acceder a los datos de nuestro back-end, AngularJS va a hacer peticiones a las rutas definidas en nuestros módulos. Para hacer estas peticiones, AngularJS va a utilizar un módulo que incorpora por defecto llamaado $resource, que es una factoría que nos permite interactuar con servicios web REST.

 

Creación de un módulo con MEAN.JS – Parte 3

Standard

En este vídeo vemos cómo crear un módulo con el generador MEAN.JS. La creación del módulo nos va a generar tanto la parte del back-end como la del front-end.

La aplicación que vamos a desarrollar se compone de cuatro módulos: customers, products, sales y dashboard. En este vídeo vamos a ver cómo crear con el generador la estructura inicial del módulo customers, y en vídeos posteriores iremos viendo paso a paso cómo desarrollar cada una de las funcionalidades del módulo.

Demo Application

Estructura de una aplicación MEAN.JS – Parte 2

Standard

En este vídeo vamos a comentar por encima la estructura de una aplicación MEAN desarrollada con el generador MEAN.JS.

En el directorio raíz de nuestro proyecto, el fichero principal es server.js, que es el fichero en el que se establece la conexión con la base de datos MongoDB, desde donde se lanza la configuración del framework express, desde donde se lanza la configuración de la seguridad y desde donde se arranca el servidor para que escuche en un puerto determinado.

En el directorio app, tenemos el código relativo a nuestro back-end. El código del back-end está configurado por tipo de fichero, de esta forma, vamos a tener todos nuestros controladores dentro del directorio controllers, la definición de nuestras entidades van a estar dentro del directorio models, y de la misma forma vamos a tener nuestros ficheros en los directorios routes, tests y views.

Finalmente, dentro del directorio public/modules vamos a tener cada uno de los módulos que generemos (por ejemplo, clientes, productos, pedidos, etc) y cada uno de estos módulos va a contener su propio directorio controllers, services, tests, views, etc.

En definitiva, utilizando el generador MEAN.JS obtenemos de forma muy rápida una estructura con la que empezar a trabajar en nuestros proyectos y con todas las tecnologías que intervienen en nuestro proyecto de forma correctamente integradas entre sí.

En siguientes capítulos veremos cómo ir desarrollando paso a paso nuestra aplicación de DEMO:

Demo Application

Desarrollo de una aplicación con MEAN.JS – Parte 1

Standard

Este es el primero de una serie de vídeos en los que vamos a explicar paso a paso cómo desarrollar una aplicación web desde cero basada en el stack MEAN (MongoDB, Express, AngularJS y NodeJS).

Como comenté en el artículo anterior, la aplicación que vamos a desarrollar es la gestión de un proceso de ventas, donde vamos a tener un maestro de clientes, un maestro de productos, un módulo para generar pedidos de ventas y un panel de control donde poder consultar y comparar en tiempo real las ventas realizadas en el mes actual y en el mes anterior.

Para desarrollar nuestra aplicación vamos a utilizar Yeoman y el generador mean.js. Con este generador vamos a conseguir tener la estructura de nuestra aplicación correctamente configurada y lista para empezar a programar en cuestión de segundos.

Tal y como podemos leer en la sección Getting Started de la documentación de mean.js, los pasos a realizar son los siguientes:

  1. Instalar Yeoman: npm install -g yo
  2. Instalar el generador mean.js: npm install -g generator-meanjs
  3. Generar nuestra aplicación: yo meanjs
  4. Ejecutar nuestra aplicación: grunt

Antes de ejecutar la aplicación recuerda haber arrancado una instancia de MongoDB.

En siguientes vídeos iremos viendo cómo desarrollar los distintos módulos de nuestra aplicación.

 

Aplicación Demo MEANJS

Standard

Hace un tiempo comencé a desarrollar manualmente la siguiente aplicación con el stack MEAN.

Cuando comencé a desarrollarla no existían los generadores que hoy día existen para Yeoman, ni los frameworks proporcionaban las funcionalidades que hoy día proporcionan. Como hemos visto en artículos anteriores, es conveniente saber escoger aquellas herramientas que mejor se adapten a las características que necesitan nuestros proyectos. Sin duda alguna, si actualmente tuviera que comenzar este mismo proyecto, lo haría ayudándome de otras herramientas en lugar de desarrollarlo manualmente.

En próximos artículos explicaré cómo desarrollar esta misma aplicación con mean.js.

Demo ApplicationGitHub

Desarollo de un API REST con Sails.js

Standard

En el artículo anterior explicamos cómo desarrollar un API REST con MongoDB, NodeJS y Express desde cero. Vimos que desarrollar un API desde cero es un proyecto sencillo aunque puede resultar tedioso. También hemos comentado en artículos anteriores que cuando tenemos que desarrollar un nuevo proyecto es muy importante conocer y analizar qué herramientas son las más apropiadas para su desarrollo y elegir aquéllas que mejor se adapten a las características de nuestro proyecto.

La productividad es un factor muy importante en el proceso de desarrollo de software. Por este motivo, teniendo en cuenta el factor productividad, en este artículo quiero introducir el framework Sails.js, que nos va a facilitar y a agilizar el proceso de desarrollo de un API REST.

 

Descripción de Sails.js

Según la propia página web oficial de Sails.js:

Sails.js facilita el desarrollo de aplicaciones Node.js empresariales. Ha sido diseñado para imitar el patrón MVC de frameworks como Ruby on Rails, pero con soporte para los requisitos de aplicaciones modernas: data-driven APIs con una arquitectura escalable y service-oriented. Es especialmente bueno para el desarrollo de chats, cuadros de mando en tiempo real o juegos multijugadores.

 

Una de las cosas que nos permite Sails.js, entre muchas otras, es el desarrollo de forma sencilla y rápida de un API REST. Por eso considero que puede ser una herramienta muy importante del stack de software que comentamos en el artículo desarrollo de aplicaciones web modernas.

 

Creación de un API con Sails.js

En este artículo iba a escribir varias secciones para explicar la creación de un API con Sails.js, pero como es un proceso tan sencillo y tan rápido voy a explicarlo en esta única sección. Ejecutando únicamente un par de instrucciones e insertando una única línea de código conseguimos desarrollar el mismo API que desarrollamos en el artículo desarrollo de un API REST con MongoDB, NodeJS y Express, pero con más funcionalidades:

Como vemos, en primer lugar generamos nuestro proyecto mediante el comando sails generate new MyApi –no-front-end y después generamos nuestro API para la entidad Message mediante el comando sails generate api message.

Finalmente tenemos que definir las propiedades de nuestra entidad, la cual se compone únicamente de la propiedad text. Por lo tanto, abrimos el fichero api/models/Message.js y definimos sus propiedades:

 

Base de Datos en Sails.js

Sails.js utiliza el ORM Waterline, que es desarrollado y mantenido por el mismo equipo de desarrollo de Sails.js.

Waterline dispone de adaptadores para conectarse a varias bases de datos (MySQL, PostgreSQL y MongoDB, entre otras). También podemos hacer que almacene los datos en disco o en memoria (no recomendado para producción), con lo cual podríamos probar nuestras aplicaciones sin necesidad de tener instalado un gestor de base de datos.

Por defecto, Sails.js está configurado para utilizar el local disk adapter (almacena los datos en un directorio temporal de nuestro sistema de ficheros). En el fichero config/connections.js están definidas nuestras conexiones a base de datos y en el fichero config/models.js se define qué conexión queremos que nuestras entidades utilicen por defecto. Cuando definimos cada una de nuestras entidades podemos especificar qué conexión queremos que utilice. Si no especificamos ninguna entonces Sails.js utilizará aquella que esté definida en config/models.js.

 

Probando el API

Para probar nuestro API previamente tenemos que arrancar nuestra aplicación ejecutando la siguiente instrucción:

Una vez arrancado el servidor podemos utilizar la extensión POSTMAN de Chrome para hacer peticiones a nuestro API.

Si queremos obtener todos los mensajes, lanzaremos una petición GET a la URL http://localhost:1337/message:

blog-ch2-empty-collection

Si queremos agregar un nuevo mensaje, lanzaremos una petición POST a nuestro API:

blog-ch2-post

Y si nuevamente consultamos nuestros mensajes enviando una petición GET, obtenemos la siguiente información:

blog-ch2-collection

 

Relaciones entre Entidades con Sails.js

Otra característica que Sails.js incorpora al generar nuevas APIs y que supondría bastante trabajo si tuviéramos que desarrollarlo manualmente es la gestión de relaciones entre entidades.

Para explicar las relaciones entre entidades vamos a utilizar el ejemplo que utiliza el equipo de Sails.js en su propia documentación. El ejemplo que vamos a ver se basa en una relación uno a muchos, en el que las entidades van a ser Pet y User y donde un usuario va a poder tener un número indefinido de mascotas.

En primer lugar, generamos nuestro API para la entidad Pet:

Y la definimos tal y como lo hacen en la documentación de Sails.js:

A continuación creamos nuestro API para la entidad User:

Y la definimos con las siguientes propiedades:

Arrancamos nuestra aplicación ejecutando la instrucción sails lift y probamos nuestro API con POSTMAN lanzando las siguientes peticiones a nuestro servidor:

Petición POST para crear un usuario

blog-ch2-rel-insert-user

 

Petición GET para obtener una lista de usuarios

blog-ch2-rel-list-users-pets-empty

Petición POST para crear una mascota

blog-ch2-rel-insert-pet

 

Cuando creamos una nueva mascota introducimos el código del usuario al que pertenece la mascota.

Petición GET para obtener una lista de usuarios

blog-ch2-rel-list-users-with-pets

Automáticamente nuestro API nos devuelve las mascotas asociadas a cada usuario.

Petición GET para obtener un usuario

blog-ch2-rel-list-one-user-with-pets

Petición GET para obtener una mascota de un usuario

blog-ch2-rel-list-one-user-one-pet

Si nos fijamos en la URL vemos cómo relacionamos las entidades para obtener la mascota con el ID igual a 1 del usuario con ID igual a 1.

 

Conclusión

En este artículo hemos visto que el desarrollo de un API REST con Sails.js es muy sencillo y muy rápido. Simplemente ejecutando un par de instrucciones de Sails.js podemos crear la estructura de nuestra aplicación y un API. A partir ahí sólo tenemos que definir las propiedades de nuestras entidades y sus relaciones.

Además, Sails.js ofrece muchas más características de las que hemos visto en este artículo, como notificaciones en tiempo real, gestión de la seguridad y un ORM que nos permite trabajar indistintamente con varios gestores de bases de datos, entre muchas otras características.

Hemos podido comprobar cómo el hecho de seleccionar Sails.js en lugar de desarrollar un API desde cero como hicimos en el artículo anterior, ha ayudado a que obtengamos un notable aumento de productividad.

En siguientes artículos seguiremos viendo herramientas que pueden ayudarnos en el desarrollo de nuestros proyectos.

Desarrollo de un API REST con MongoDB, NodeJS y Express

Standard

En el anterior post analizamos un stack que hoy en día considero muy interesante para el desarrollo de aplicaciones web modernas. En este stack el front-end estaba formado por AngularJS para el desarrollo de la aplicación de escritorio, y por Ionic para el desarrollo de la aplicación móvil. Sin embargo, el back-end podía tener ciertas variantes, en función de las necesidades de la aplicación.

También comentamos la importancia de saber elegir el framework o las herramientas más adecuadas para el desarrollo de nuestros proyectos, ya que éstas nos pueden ofrecer un notable aumento de productividad y nos pueden ayudar a desarrollar aplicaciones robustas.

Sin embargo, considero que para sacar provecho a estos frameworks o herramientas conviene saber qué es lo que hacen internamente. El back-end de nuestro stack, entre otras cosas, nos ofrece un API que se encargará gestionar nuestros datos. En este artículo vamos a analizar cómo crear manualmente un servidor que nos ofrezca un sencillo API. En posteriores artículos veremos cómo podemos utilizar herramientas que nos ayudarán a desarrollar nuestro propio servidor de forma mucho más rápida, robusta y con más funcionalidades que si desarrollamos nuestro propio API desde cero.

 

Objetivo

El objetivo de este artículo es desarrollar un API REST muy sencillo con NodeJS y Express con el fin de mostrar lo sencillo, aunque tedioso, resulta esta tarea. El API simplemente permitirá insertar mensajes en una colección MongoDB y recuperar un listado con todos los mensajes existentes en la colección.

Se puede descargar el código fuente desde la siguiente ubicación:

GitHub Source Code

O se puede clonar y arrancar la aplicación ejecutando las siguientes instrucciones desde la línea de comandos:

A continuación se explica cómo desarrollar el API desde cero.

 

Instalación de paquetes NodeJS

El primer paso que vamos a hacer es crear y entrar en el directorio en el que vamos a desarrollar nuestro proyecto. Una vez dentro de nuestro directorio de trabajo instalaremos con npm los siguientes paquetes:

  • expressnpm install express. express es el framework más popular en Node para desarrollar aplicaciones web.
  • express-generatornpm install -g express-generator. Si no lo tenemos instalado ya, tendremos que instalarlo globalmente. express-generator lo utilizaremos para generar rápidamente el esqueleto de nuestra apliación.
  • mongoosenpm install mongoose –save. Finalmente instalaremos mongoose que es el ORM que utilizaremos para acceder a nuestra base de datos MongoDB.

En resumen, ejecutaremos los siguientes comandos dentro de nuestro directorio de trabajo para instalar los paquetes que necesitamos:

 

Generar la aplicación

Una vez tenemos instalados todos los paquetes que necesitamos, lo que vamos a hacer es generar nuestra apliación express. Estando dentro de nuestro directorio de trabajo simplemente ejecutamos el comando express y éste generará la estructura de nuestra aplicación.

A continuación tenemos que instalar los paquetes que necesita express, para lo que ejecutamos la instrucción npm install.

Finalmente, arrancamos nuestra aplicación, ejecutando el comando npm start.

En resumen, desde nuestra consola ejecutaremos los siguientes comandos para generar y ejecutar nuestra aplicación web:

Si una vez arrancado nuestro servidor accedemos a la dirección http://localhost:3000 la aplicación nos mostrará una página de bienvenida a express.

Opcionalmente, como nuestro servidor lo estamos desarrollando para gestionar un API, podemos eliminar los ficheros que no necesitamos y  que los ha creado el generador de express para servir páginas web: podemos eliminar el contenido del directorio public y podemos eliminar el directorio views.

 

Conexión con la base de datos

Para conectarnos a la base de datos creamos el directorio db y dentro de este directorio creamos el fichero index.js. En este fichero simplemente creamos la conexión a la base de datos (la cadena de conexión deberíamos almacenarla en un fichero de configuración, pero por simplificar y no alargar el artículo la definimos directamente en el código):

Posteriormente modificaremos el fichero app.js para establecer la conexión con la base de datos (líneas 7 y 13):

 

Crear las entidades

A través de Mongoose vamos definir el esquema de nuestras entidades. En este ejemplo sólo vamos a tener una entidad lo más sencilla posible llamada Message. En nuestro directorio base de trabajo vamos a crear el directorio models, y dentro de éste vamos a crear el fichero message.js:

 

Crear los controladores

En nuestro directorio base de trabajo vamos a crear el directorio controllers, y dentro de éste vamos a crear el fichero message.js. En el controlador es donde vamos a definir las acciones que se van a poder realizar a través del API con nuestra entidad. En este caso, con el fin de simplicar, sólo vamos a definir dos acciones:

  • list: devuelve un listado de todos los mensajes almacenados en nuestra base de datos, sin ningún filtro.
  • create: Inserta un nuevo mensaje en la base de datos.

 

Crear las rutas

En nuestro directorio base de trabajo vamos a crear el directorio routes, y dentro de éste vamos a crear el fichero message.js. En este fichero vamos a definir los métodos del controlador que se van a ejecutar en función de la petición realizada por nuestra aplicación web:

 

Finalmente, modificaremos el fichero app.js para agregar las rutas que hemos definido en el fichero anterior (líneas 6 y 14):

Probar el API

Finalmente sólo nos falta probar que nuestro API funciona correctamente. Lo correcto sería probarlo mediante una batería de tests, utilizando el paquete superagent, por ejemplo, pero como el objetivo de este artículo simplemente es ver cómo se desarrolla el API, no vamos a explicar cómo desarrollar los test.

Manualmente podemos probar nuestro API mediante una extensión para Chrome llamada POSTMAN. La primera vez que hagamos un GET de messages el API nos devolverá una colección de mensajes vacía:
blog-ch1-empty-collection

Si queremos agregar un mensaje nuevo, tenemos que utilizar el método POST y enviar como parámetros el mensaje que queremos crear:

blog-ch1-post

Finalmente, si volvemos a consultar la colección, utilizando nuevamente el método GET, obtendremos una lista de objetos JSON que contendrá únicamente el mensaje que hemos agregado anteriormente:

blog-ch1-collection

Conclusión

Hemos visto que la creación de un API con NodeJS y Express sin la utilización de ningún otro framework específico es un proceso sencillo aunque tedioso. Hay muchas características que necesita implementar un API y que no hemos tratado en este artículo, pero que conllevarían más o menos tiempo desarrollarlas, como pueden ser las relaciones entre entidades, la gestión de la autenticación, la gestión de la autorización, etcétera.

En siguientes artículos veremos cómo podemos abordar el desarrollo de un API mediante la utilización de frameworks o herramientas que nos van a ayudar a ser más productivos.

 

Realtime JavaScript Stack: nodejs + express + mongoose + socket.io + angularjs

Standard

There is a good realtime JavaScript stack, composed by nodejs + express + mongoose + socket.io + angularjs, and I’m going to explain how to integrate these pieces of software to develop a simple web application. The application that I have developed is called VoteExpress, and through this application users are able to vote the team that they think that will win the next Brazil World Cup 2014. When a user votes for a team, every users connected to the page will be notified in realtime that someone has voted that team, and a pie chart will be automatically updated with the new results.

Demo ApplicationSource Code

We can bootstrap our application with the following skeleton: https://github.com/jlmonteagudo/node-express-moongose-min-bootstrap  This skeleton is based on the excellent project developed by Madhusudhan Srinivasa project: Nodejs Express Mongoose Demo, that use best practices developing nodejs web applications.

This is the main tree folder of the skeleton project:

  • app
    • controllers
    • models
  • config
    • config.js
    • db-fixture.js
    • express.js
    • routes.js
    • socket-io.js
  • public
  • server.js

 

The Back End

The back end will manage RESTFUL requests, and these requests will be done by an AngularJS application on the front end, which will be located in the public folder.

The only entity that our application will manage is Team. To manage this entity we only have to create its Schema, its controller and its routes.

Inside the app/models folder we will create team.js, where we will define our model through Moongose (Mongoose Quick Start):

 

 

Next, we will create a controller in the folder app/controllers:

 

 

In the controller we define the actions that we will do with our models. list will return a JSON of all the teams with its scores, and update will update the score of the team and will notify about this to all the clients connected to the application.

Finally we have to define the routes in the file config/routes.js:

 

The Front End

The front end is an AngularJS application that is located in the public/js folder. Its tree folder is as follow:

  • controllers
    • team.js
  • directives
    • chart.js
  • services
    • socketio.js
  • app.js

In app.js we only define the routes:

 

 

In the controller we get all the teams that are inside the database, and we define the function vote that will be invoked when someone votes for a team. In the controller also is defined what to do when the server notify that a team has been updated. Here is the controller code:

 

 

We have defined a directive to render the chart (through Google Visualization API):

 

 

So, to render a chart inside a view we only have to insert the following code:

<chart></chart>

and that tag will render a Pie Chart through the Google Visualization API using the JSON document got from the server.

Finally, I have defined a service (services/socketio.js) that will be used to manage socket.io connections. The code is based on this article  http://www.html5rocks.com/en/tutorials/frameworks/angular-websockets/

 

Conclusion

As we have seen, this is a simple stack that we can use to create our real time applications. In the JavaScript ecosystem there are another systems that allow us to develop this kind of applications, but I think that this one is very flexible.

There are many alternatives to the stack that I have proposed in this article, and two of them that I think that are very interesting are sails.js and Meteor. Maybe I will translate the VoteExpress demo developed in this article to sails and meteor, so we can compare its features.

 

Disclaimer

There are some things in the code that I don’t like and I think that there would be a better way to code. I would be happy if you could propose a better solution.

The first one is that I have defined the socketIO variable as global in the voteExpress/config/socket-io.js file. I know I could pass the socketIO paramater to config/routes and from here to each controller, but I didn’t like the solution.

The second one is related to Angular. I have used Pines Notify, to notify that someone has voted for a team, and I call to it as a JQuery method inside the controller: $.pnotify({title: ‘Vote’, text: ‘+1 vote for ‘ + team.name }); I know that it is a bad practice to update the DOM from the controller, and that it is much better to do that through a directive. Do you have any sugestion to solve this subject in a better way?

Emitir video con tu dispositivo móvil con Node.js, Express.js y Socket.IO

Standard

En este post quiero mostrar lo sencillo que puede ser desarrollar aplicaciones que procesen información en tiempo real mediante la utilización de Node.js y websockets. En concreto, como ejemplo para esta demostración, he desarrollado una aplicación que captura vídeo a través de la cámara de tu dispositivo móvil y lo emite a través de una página web.

La aplicación está publicada en Heroku, una plataforma de cloud computing que permite publicar tu aplicación gratuitamente. Puedes probar la aplicación en la siguiente dirección: http://jlmonteagudo-cam.herokuapp.com/

El código fuente de la aplicación lo he subido a github y se puede acceder desde la siguiente URL: https://github.com/jlmonteagudo/jlmonteagudo-cam

 

Estructura de la aplicación

La aplicación está estructurada en tres piezas distintas:

- Página web que emite el vídeo: Esta página captura vídeo a través de la cámara de tu dispositivo móvil y lo envía mediante web sockets a un servidor. Utiliza el método getUserMedia de los navegadores para capturar el vídeo.

- Servidor: El servidor simplemente se encarga de recibir los frames que envía la página que emite el vídeo y hace un broadcast de estos frames a otra página web.

- Página web que visualiza el vídeo: Esta página web simplemente visualiza los frames enviados por el servidor.

 

Gráficamente la estructura sería la siguiente:

 

 

Emit.html

La página emit.html es la que se encarga de capturar el vídeo a través del dispositivo móvil y lo envía al servidor. El código principal de la página es el siguiente:

El script primero comprueba si el navegador implementa el método getUserMedia, y en caso afirmativo al tag video se le asigna el flujo de datos que el navegador captura de la cámara del dispositivo:

A continuación el script configura la librería Socket.IO para conectarse al servidor al que tiene que enviar las capturas de vídeo. La función que se encarga de enviar las capturas de vídeo es la siguiente:

Para enviar las capturas de vídeo al servidor, el script utiliza un elemento canvas, que se crea a través de JavaScript, en el cual se dibuja cada segundo lo que el elemento video está emitiendo en ese momento:

Display.html

La página display.html es muy sencilla y lo único que hace es conectarse al servidor y mostrar en un elemento img aquellas capturas que le llegan a la página a través de websockets:

Servidor

El servidor está desarrollado con Node.js y es muy sencillo de implementar. Simplemente tenemos que crear una aplicación con el framework Express.js e importamos una librería que implementaremos a continuación (streamingService). Esta librería será la encargada de configurar Socket.IO para recibir las capturas de vídeo y distribuirlas a todos los clientes conectados al servidor. El código del servidor (casi en su totalidad generado por Express.js) es el siguiente:

Y por último, así es cómo quedaría la implementación de la librería streamingService:

Como vemos, toda información que le llega al servidor, la librería hace un broadcast de esa misma información a todos los clientes. Otro punto a tener en cuenta es que Heroku, al igual que otras plataformas cloud computing, no soporta el uso de websockets, por ello es que hay que especificar que Socket.IO realice el transporte a través de xhr-polling.

Consideraciones

La cantidad de información que transmite esta solución de emisión de vídeo es relativamente elevada, ya que cada frame que emite la página emit.html al servidor pesa alrededor de 50K. Hemos configurado el sistema para que envíe únicamente un frame por segundo, ya que emitir más de 50K por segundo sería demasiado pesado. Es por esto que para probar el sistema es recomendable que el dispositivo que emite el vídeo esté conectado a una red ADSL o de alta velocidad y no a través de 3G, ya que de lo contrario la emisión no funciona correctamente.

Conclusión

Como hemos podido comprobar, las posibilidades que nos ofrece Node.js y Socket.IO son muy interesantes, y la combinación de ambas herramientas nos permite desarrollar aplicaciones que procesen información en tiempo real de forma muy sencilla.