Tenía ganas de trastear con Node.js, WebSockets y Heroku. Así que, en mis ratos libres, he estado desarrollando la aplicación «Remote Sounds». Podéis acceder en el siguiente enlace:

https://remotesounds.herokuapp.com/

Básicamente, consiste en un «chat de sonidos«. Todo el mundo que esté conectado en ese momento a la web (desde un ordenador), oirá el sonido del botón que se pulse. También se pueden añadir sonidos propios (en .mp3) e imágenes, pulsando en el botón ‘Add sounds‘. Y, cada vez que un nuevo usuario se conecte, obtendrá todos los sonidos que los otros usuarios añadieron. Éstos nuevos sonidos personalizados se mantendrán en la aplicación hasta que el servidor se reinicie. La aplicación está pensada para ser usadas por «sesiones».

En cuanto al código, se puede consultar en mi repositorio de Github. Destacaría las siguientes partes:

• Socket.io : Utilicé esta librería para la parte de Web Sockets. Me asombró su facilidad de uso, en apenas unas cuantas líneas de código, tenía montado un chat. Para ello, seguí este tutorial de su documentación. La parte de servidor con Node.js no ha tenido complicaciones ya que tiene unos conceptos bastantes sencillos.
• HTML5 (Audio API) : Ha sido la «decepción» del proyecto, al comprobar que la reproducción de sonidos en dispositivos móviles no funciona correctamente. He testeado con un Android 5.0 (Chrome) y iOS 7.0 (Safari / Chrome). Sin embargo, en la versión no-móvil ha funcionado todo a la perfección. Barajé la posibilidad de usar alguna librería externa, como por ejemplo ion.sound. Sin embargo, ésta requería que los sonidos estuviesen cargados en el servidor. Y no permitía cargar sonidos a través de una URL, por lo que tuve que descartar esta opción.
• Heroku : Facilísimo «deployear» tu aplicación Node.js en un servidor con Heroku. Y rapidísimo. Sinceramente, era la parte a la que más «miedo» tenía. Pero, sólo con seguir el «Get started» de su documentación, es suficiente. He utilizado la versión gratuita. También está genial la funcionalidad de deploy automático cada vez que se hace un git push.
• Freewall: Para la parte de generación de añadir botones/imágenes dinamicamente. Bastante útil y fácil de usar, como se puede ver en su web con numerosos ejemplos.
• Materialize: Para la parte de los estilos y adaptación web. La he utilizado sólo para maquetar lo básico, pero los ejemplos de su web me han parecido muy interesantes.

En conclusión, este ejercicio me ha servido para prototipar una aplicación colaborativa con websockets. Las utilidades de la misma han ido iterando a medida que la iba desarrollando: avisos rápidos entre varias personas, música entre varios, juegos, bromas, etc. Sin embargo, lo que me interesaba también era cerrar el prototipo y dejar «todo’s» abiertos futuros: móviles, bugs, logs en servidor, etc. El tiempo de desarrollo total ha sido de aproximadamente unas 25 horas.

Share 🙂