Académique Documents
Professionnel Documents
Culture Documents
BASTIDAS DE APURÍMAC
ESCUELA PROFESIONAL DE INGENIERÍA
INFORMÁTICA Y SISTEMAS
TEMA: WEBSOCKET
ABANCAY – APURÍMAC
2017
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.
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.
3. Instalación de Git
Git BASH
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.
var io = require('socket.io')(server);
server.listen(8080, function() {
});
io.on('connection', function(socket) {
socket.emit('messages', messages);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="/socket.io/socket.io.js"></script>
<script src="main.js"></script>
</head>
<body>
<h1>My App</h1>
</body>
</html>
socket.on('messages', function(data) {
console.log(data);
});
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'));
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
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.
</form>
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);
});