UNIVERSIDAD NACIONAL MICAELA

BASTIDAS DE APURÍMAC
ESCUELA PROFESIONAL DE INGENIERÍA
INFORMÁTICA Y SISTEMAS

ASIGNATURA: SISTEMAS DISTRIBUIDOS

TEMA: WEBSOCKET

DOCENTE: Ing. LINTON

ESTUDIANTE: CENTENO GONZALES, Favio Alonso

TROCONES ARANDO, Yemer Adriano
PANEBRA QUISPE, Oliver

SEMESTRE ACADÉMICO: 2017 – II

ABANCAY – APURÍMAC
2017

INGENIERIA DE INFORMATICA Y SISTEMAS 1

INTRODUCÍON

Desde hace bastantes años ha sido posible la comunicación entre cliente y servidor
utilizando el protocolo HTTP. Sin embargo, esta comunicación si bien es full duplex y
bidireccional, no permite que el servidor le envíe contenido por cuenta propia al cliente.
Esto ha sido "solucionado" en múltiples oportunidades a través de aplicaciones que
simulan (desde el punto de vista del usuario y/o programador) una conexión única en la
que el servidor puede enviar contenido de manera asíncronica al cliente. Si bien estas
soluciones logran el cometido de comunicar al cliente con el servidor en la medida que
cada uno lo requiera, no son soluciones escalables y mucho menos baratas o fáciles de
implementar. La solución que nace es el protocolo de comunicación WebSocket, el cual
busca crear un canal de comunicación único entre el par cliente-servidor y sobre el que
estos se comunican de forma asincrónica y en la medida que cada uno necesite hacerlo.
Para este trabajo se estudió el protocolo y a través del API en javascript de WebSocket y
el servidor web Tornado, se implementaron dos aplicaciones que utilizan esta tecnología.
La primera es la presentación misma a realizar en clases y la segunda es un juego que
permite que diversos usuarios puedan mover cajas desde sus propios terminales de forma
tal que los demás clientes puedan ver reflejado en sus terminales estos movimientos.

En lo que viene a continuación, se presentará el protocolo y API WebSocket, se dará a

conocer la forma en que opera el protocolo, la construcción de los mensajes, el cómo
opera la API y los eventos que están permitidos. Además se mostrará la forma en que se
construyó el servidor y como opera a grandes rasgos Tornado. Finalmente se explicará lo
esencial de los códigos, la lógica detrás de ellos y las bibliotecas usadas en la
implementación de ambos programas. Siempre con el objetivo en mente de poder
demostrar lo fácil que es implementar esta reciente y poderosa tecnología que promete
cambiar la forma en que se diseñan aplicaciones y juegos.

INGENIERIA DE INFORMATICA Y SISTEMAS 2

WEBSOCKETS
Los websockets son una tecnología que permite una comunicación bidireccional entre
cliente y servidor sobre un único socket TCP. En cierta manera es un buen sustituto de
AJAX como tecnología para obtener datos del servidor, ya que no tenemos que pedirlos,
el servidor nos los enviará cuando haya nuevos.
DESARROLLANDO CHAT DE COMUNICACIÓN UTILIZANDO
WEBSOCKETS.
Lo único que necesitaremos para que funcione es un servidor de websockets, que
construiremos en Node.js con la librería Socket.io que nos facilita el desarrollo de
aplicaciones utilizando Websockets en el cliente y en el servidor.

INICIANDO LA APLICACIÓN
1. Instalación del editor de texto ATOM.
GitHub es una de las mayores comunidades de desarrollo de software que existen
en Internet. Atom es un editor de texto Open Source que puede utilizarse como
IDE para un sinfín de lenguaje de programación y cuyas competencias pueden
ampliarse enormemente gracias al soporte continuado de la comunidad.

Incluye todas las características que se le pueden pedir a un editor de código como
el resaltado de sintaxis, autodetección de lenguajes, sistema de autocompletado
contextual, la posibilidad de utilizar varios paneles, organizar nuestro proyecto en
carpetas, soporte para snippets y un potente buscador. Su mayor potencial, de
todas formas, es la modularidad de su entorno a la hora de instalar paquetes que
añadan más características si caben al entorno. Huelga decir que se incluye el
sistema de control de versiones Git para publicar en la propia plataforma GitHub.

Atom es multiplataforma (Windows, Linux y Mac), y permite un uso cross-

platform para nuestros proyectos. Su personalización es la mayor baza: En el
momento de escribir esta resseña ya existen más de 2000 paquetes y 600 temas,
por que dado el grado de personalización de la herramienta y la cantidad de
características incluidas por defecto estamos ante uno de los mejores entornos de
desarrollo que podemos encontrar con el aliciente de resultar más liviano que otras
alternativas similares.
2. Instalación de Node.js
Node.js® es un entorno de ejecución para JavaScript construido con el motor de
JavaScript V8 de Chrome. Node.js usa un modelo de operaciones E/S sin bloqueo
y orientado a eventos, que lo hace liviano y eficiente. El ecosistema de paquetes
de Node.js, npm, es el ecosistema más grande de librerías de código abierto en el
mundo.

INGENIERIA DE INFORMATICA Y SISTEMAS 3

 Versión:

3. Instalación de Git

Git para Windows se enfoca en ofrecer un conjunto nativo ligero de herramientas

que trae el conjunto completo de características del Git SCM a Windows, al
tiempo que proporciona interfaces de usuario apropiadas para usuarios
experimentados de Git y novatos por igual.

Git BASH

Git para Windows proporciona

una emulación de BASH
utilizada para ejecutar Git desde
la línea de comandos. * Los
usuarios de NIX deberían
sentirse como en casa, ya que la
emulación de BASH se
comporta como el comando
"git" en entornos LINUX y
UNIX.

Git GUI
Como los usuarios de Windows comúnmente esperan interfaces gráficas de
usuario, Git para Windows también proporciona la GUI de Git, una poderosa
alternativa a Git BASH, que ofrece una versión gráfica de casi todas las funciones
de línea de comandos de Git, así como herramientas integrales de discriminación
visual.

Integración Shell
Simplemente haga clic derecho en una carpeta en el Explorador de Windows para
acceder a BASH o GUI.

INGENIERIA DE INFORMATICA Y SISTEMAS 4

 4. Creación de carpeta destinada para el proyecto
Nos hubicamos en el “Disco local(c:)” ahí creamos una carpeta con el nombre
“proyectos” y dentro de ella otra carpeta con el nombre del proyecto “sockets”.

5. creando un paquete de Node

click derecho en la carpeta “sockets” para abrir “Git” por consola e instalar por
comandos. Creando un paquete de Node con “npm init –y” para generar
un “package.json” con las opciones por defecto.

6. Creamos un servidor web

Ahora crearemos un fichero server/main.js que será nuestro servidor web. Para
ello necesitaremos las librerías express y socket.io que instalamos vía npm:

INGENIERIA DE INFORMATICA Y SISTEMAS 5

 $ npm install --save express

$ npm install --save socket.io

7. Creando aplicación en el servidor

En server/main.js creamos una aplicación con express, que pasaremos a un
servidor http y todo esto irá ligado al servidor de websockets que creamos
con socket.io

var express = require('express');

var app = express();

var server = require('http').Server(app);

var io = require('socket.io')(server);

8. Pondremos el servidor a escuchar en localhost con el puerto 8080

server.listen(8080, function() {

console.log('Servidor corriendo en http://localhost:8080');

});

9. Indicamos que el servidor esté atento cuando haya conexión

Ahora necesitamos que el servidor de websockets, que lo tenemos en la
variable io, esté atento a que se realice una conexión. Eso lo logramos
con io.on() y pasándole el mensaje connection. Dentro de éste método
enviaremos el array de objetos mensaje con el evento 'messages'.

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

console.log('Un cliente se ha conectado');

socket.emit('messages', messages);

});

INGENIERIA DE INFORMATICA Y SISTEMAS 6

 10. crear la parte pública de la aplicación
El evento messages lo recogeremos en el cliente, en el fichero JavaScript de la
parte cliente. Así que ahora es momento de crear la parte pública de la aplicación
con un index.html y un main.js

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>My Aplicación con Sockets</title>

<script src="/socket.io/socket.io.js"></script>

<script src="main.js"></script>

</head>

<body>

<h1>My App</h1>

</body>

</html>

El index.html además de enlazar el main.js enlaza en su <head> el script

de socket.io.
Socket.io es una librería que funciona tanto en cliente como servidor precisamente
para conseguir la conexión bidireccional.

11. Recibiendo mensajes

En main.js (de la parte cliente) conectamos el cliente con el servidor de
websockets que tenemos en http://localhost:8080 y escuchamos el
evento messages.

var socket = io.connect('http://localhost:8080', { 'forceNew': true });

socket.on('messages', function(data) {

console.log(data);

});

INGENIERIA DE INFORMATICA Y SISTEMAS 7

 data tendrá el array de mensajes que envía el servidor. En lugar de imprimirlo por
consola queremos que se muestre en el HTML, por tanto vamos a cambiar algunas
cosas.

12. Primero añadimos un div con el id messages donde pondremos todos los
mensajes que lleguen.

<div id="messages"></div>

13. Después en nuestro server/main.js tenemos que indicar cuál es la ruta que
tendrán los ficheros estáticos, lo hacemos con el middleware express.static.

app.use(express.static('public'));

Siendo public la carpeta donde tenemos el index.html y el main.js.

14. En main.js del cliente, vamos a crear una función que llamaremos render() que se
encargará de pintar en el HTML los mensajes

INGENIERIA DE INFORMATICA Y SISTEMAS 8

 function render(data) {

var html = data.map(function(elem, index){

return(`<div>

<strong>${elem.author}</strong>:

<em>${elem.text}</em>

</div>`)

}).join(" ");

document.getElementById('messages').innerHTML = html;

socket.on('messages', function(data) {

render(data);

});

Lo que hace esta función es iterar sobre los datos que llegan a través del socket
con la función map de JavaScript, y para cada elemento del array pinta una
plantilla HTML con el nombre del autor y el texto del mensaje de cada elemento-
mensaje.

15. Enviando mensajes

Para poder enviar mensajes, lo primero que necesitamos es un formulario en
nuestro HTML

<form onsubmit="return addMessage(this)">

<input type="text" id="username" placeholder="Tu Nombre" >

<input type="text" id="texto" placeholder="Cuéntanos algo...">

<input type="submit" value="Enviar!">

</form>

INGENIERIA DE INFORMATICA Y SISTEMAS 9

 16. Definamos la función en el fichero public/main.js

function addMessage(e) {

var mensaje = {

author: document.getElementById('username').value,

text: document.getElementById('texto').value

};

socket.emit('new-message', mensaje);

return false;

17. La función simplemente recoge el valor de los inputs del autor y el texto y los
envía por el socket con el mensaje new-mensaje para que lo escuche el
servidor. Por tanto ahora es el momento de escuchar ese evento en el servidor.
Volvemos a server/main.js

socket.on('new-message', function(data) {

messages.push(data);

io.sockets.emit('messages', messages);

});

El socket escuchará el evento new-message y cuando llegue traerá consigo los

datos en data. Lo que haremos será añadir ese nuevo mensaje que nos llega
en data al array de messages con el método push.

INGENIERIA DE INFORMATICA Y SISTEMAS 10

CÓDIGO DE LA APLICACIÓN
public/index.html

INGENIERIA DE INFORMATICA Y SISTEMAS 11

 public/main.js

INGENIERIA DE INFORMATICA Y SISTEMAS 12

 server/main.js

INGENIERIA DE INFORMATICA Y SISTEMAS 13

 RESULTADO:

INGENIERIA DE INFORMATICA Y SISTEMAS 14