Crear un backend rápido y poderoso con Socket.io en Azure


Siguiendo con el demo del 11 de diciembre el siguiente paso es crear un backend donde todo orquestará y hará armonía; pero para ello decidí usar Socket.io, ya que es una tecnología muy flexible y desde mi punto de vista, muy sencilla de implementar.

Básicamente en Socket.io se generan eventos y listener de estos eventos donde se necesite, si necesito ejecutar un evento en el backend, simplemente defino el emisor y el receptor, con sus lógicas de negocio dependiendo de como sea el callback.

Para comenzar es vital generar una máquina virtual en el ambiente que nosotros deseemos, sin embargo, con fines de esta práctica todo se hizo en Microsoft Azure y su implementación de Virtual Machines.

  • Ir al portal de administración, Seleccionar nuevo>Proceso>Máquina virtual>De la galería 
  • Cuando se despliegue la galería de imágenes dirigirse a la sección de Ubuntu, aquí seleccionar la versión 14.04 LTS.
  • En el siguiente paso seleccionar la fecha de publicación, preferible dejar la recomendada a menos de que se tenga un buen conocimiento en el área. Configurar el nombre de la máquina y la seguridad de autenticación.
  • Escoger DNS y muy importante definir un puerto de entrada y salida para nuestra aplicación en Node.js, por referencia seleccionar el 3000, sin embargo no es obligatorio.
  • Finalmente seleccionar si queremos alguna extensión, para esta demo no es necesario. 
  • Esperamos un rato mientras se crea y se configura la máquina virtual, esto depende directamente de como lo hayamos configurado. Cuando finalice ingresar al item de la máquina virtual y dirigirse a la sección llamada “Panel“. 
  • En este punto es importante anotar la ip para podernos conectar mediante algún cliente FTP, pero para ejecutar cualquier comando me conectaré mediante PuTTY. 
  • Como ya estamos conectados por SSH es posible enviar archivos y no crearlos por medio de consola, para ello, crear una carpeta y dentro de ella un archivo llamado “index.js”, en este se escribirá todo el backend.
  • Ahora para hacer las configuraciones iniciales del servidor es indispensable instalar algunos elementos, entre ellos y los básicos para esta demo ir a este post https://ingcamilorodriguez.wordpress.com/2014/09/14/primeros-pasos-node-js/
  • Para que no ocurran problemas ahora los paquetes que se instalaron de manera global, instalarlos de manera local para la carpeta, para ellos solo quitarle el decorador “-g” en cada sentencia de instalación con npm.
  • Ahora si procederemos a escribir el backend; iniciando mostraremos una página de 404.

 

var express = require('express');
var app = express();
var path = require('path');

app.engine('html', require('ejs').renderFile);
app.set("view options", {layout: false});

app.use(express.static(path.join(__dirname, 'www/'))); //  root of public files

// When a client create a GET request on root of site
// the response is a file called "index.html"
app.get('/', function(req, res){
	res.render("index.html");
});

app.listen(3000);
console.log('Listening on port 3000');
  • Crear la carpeta www y el archivo index.html
  • En index.html escribir el código necesario
<html>
<head>
<style>
	@import url(http://fonts.googleapis.com/css?family=Indie+Flower);
    body{
            font-family: 'Indie Flower', cursive;

            background: url(img/404_Lost.png);
            background-repeat:no-repeat;
            background-position: center center;
            background-color: #eeeeee;
    }
    h1,h2,h3{
           text-align:center;
    }
</style>
</head>
	<body>
		<h1>¿Lost?</h1>
		<h2>This App no has nothing to show.</h2>
	</body>
</html>
  • Sin embargo agregar el empaquetado faltante en Node.js para que se ejecute sin problemas, instalar el paquete “ejs
  • Ahora, para que se pueda comenzar a desarrollar en Socket.io es necesario agregar las las siguientes referencias.
var http = require('http').Server(app);
var io = require("socket.io").listen(http);
var port = 3000;
  • Como ya se están ejecutando las configuraciones básicas de Socket.io, solo falta implementar el protocolo que la documentación oficial nos recomienda, para ello hice un pequeño snippet para que sea mas sencillo desarrollar
io.sockets.on('connection', function(socket){     

	console.log('Client: ' + socket.id);
	/// Saludo hacia quien se conecte al nodo
        socket.emit('Welcome', {Message: 'Welcome to Eton Messy App'});

        socket.on('Test', function(data){
        	console.log(data);
        });

});
  • Por último, solo queda modificar la conexión.
app.listen(port);
console.log('Listening on port 3000');
  • Ahora solo resta detener la ejecución si se está ejecutando una app de Node.js y solo reemplazar el archivo en servidor, ejecutar y probar.
  • Es vital recordar que se debe detener cualquier ejecución de Node.js en el servidor ya que puede generar inestabilidad.

Código completo del server:

var express = require('express');
var app = express();
var path = require('path');

var http = require('http').Server(app);
var io = require("socket.io").listen(http);
var port = 3000;

app.engine('html', require('ejs').renderFile);
app.set("view options", {layout: false});

app.use(express.static(path.join(__dirname, 'www/'))); //  "public" off of current is root

app.get('/', function(req, res){
	res.render("index.html");
});

io.sockets.on('connection', function(socket){     

	console.log('Client: ' + socket.id);
	/// Saludo hacia quien se conecte al nodo
        socket.emit('Welcome', {Message: 'Welcome to Eton Messy App'});

        /// Template for socket event
		//socket.on('', function(data){
        //	io.sockets.emit('Name', data);
        // socket.emit('ID', {Command: 'ID', Values:[{ID: socket.id}]});
        //});

});

app.listen(port);
console.log('Listening on port 3000');