Introducción a socket.io
Con la aparición de HTML5 y nuevas características apareció la tecnología WebSockets basada en el protocolo ws. Se creó para mantener una conexión continua entre cliente y servidor por lo que la comunicación se hace más fluida que con las tradicionales llamadas http. Esto pinta un escenario ideal para aplicaciones chats, juegos en líneas o mostrar información en tiempo real.
A la hora de implementar WebSockets, en la parte del cliente no hay mucha dificultad y tan solo con mirar la documentación podemos tenerlo realizado rapidamente pero la parte del servidor puede cambiar bastante dependiendo el lenguaje que usemos, etc.
Entonces nace socket.io para facilitarnos la vida proporcionandonos más o menos el mismo código tanto en cliente como en servidor.
Socket.io
Es una librería open source con una amplia comunidad que nos ayudará a contruir aplicaciones con conexión persitente entre cliente y servidor. Por lo que contaremos con librerías para cada lado.
Su web oficial es: socket.io
En un principio estaba pensado para trabajar con servidores escritos en NodeJS pero gracias a su éxito ha sido portado a muchos otros lenguajes como enseñaré en la siguiente lista:
Go: https://github.com/googollee/go-socket.io
Python: https://pypi.org/project/gevent-socketio/0.3.6/
Java: https://github.com/mrniko/netty-socketio
y muchos más...
También la parte cliente ha sido portada a diferentes escenarios como puede ser:
Python-client: https://pypi.org/project/socketIO-client/
Unity3D: https://github.com/NetEase/UnitySocketIO
Java: https://github.com/socketio/socket.io-client-java
y muchos más como Android, iOS, etc.
Nosotros vamos a hablar aquí de tecnologías web, por lo tanto vamos a ver como implementar un simple chat usando la librería oficinal de JavaScript de socket.io e implementando socket.io en un servidor escrito en NodeJS con el framework express.
Instalación
Primero crear el package.json del proyecto
{
"name": "chat-openwebinars",
"version": "0.0.1",
"description": "Aplicación de prueba en openwebinars",
"dependencies": {
"express": ">= 4.10.2",
"socket.io": ">= 1.3.5"
}
}
Ahora desde el terminal
npm install
Vamos ahora a crear nuestro pequeño servidor express que nos devuelva el html que será la interfaz de nuestro chat.
// requerimos express y lo suministramos a un servidor http para manejar las conexiones.
var app = require('express')();
var http = require('http').Server(app);
// devolvemos index html
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
// iniciamos el servidor
http.listen(8080, function(){
console.log('Servidor escuchando en puerto 8080');
});
Creamos nuestro index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Chat OpenWebinars</title>
<style>
.capaMensajes {
width: 70%;
height: 500px;
border: 2px solid;
padding: 10px;
margin: 0;
}
ul { padding: 8px; list-style-type: none; }
input { height: 32px; width: 50%; }
button { height: 32px; width: 20%; }
</style>
</head>
<body>
<div class="capaMensajes">
<!-- Lista donde se introducirán los mensajes llegados -->
<ul id="mensajesLista"></ul>
</div>
<div>
<div>
<span><input type="text" id="mensajeParaEnviar" placeholder="Escribe tu mensaje" /></span>
<span><button>Enviar</button></span>
</div>
</div>
</body>
</html>
Arrancamos el servidor y veremos nuestra pantalla de chat, para ello desde nuestra terminal ejecutamos el siguiente comando
node app.js
Veremos el resultado si accedemos a http://localhost:8080/ .
Toca el turno de Socket.io, lo primero que hacemos es volver a app.js y lo vamos a importar y le vamos a suministrar nuestro http. También definimos un evento de conexión.
// requerimos express y lo suministramos a un servidor http para manejar las conexiones.
// requerimos socket.io y le suministramos http
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
// devolvemos index html
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
// implementamos el evento connection el cual se llamará cada vez que un usuario conecte y el de disconnect
io.on('connection', function(socket){
console.log('un usuario conectado');
socket.on('disconnect', function(){
console.log('usuario desconectado');
});
});
// iniciamos el servidor
http.listen(8080, function(){
console.log('Servidor escuchando en puerto 8080');
});
Y volvemos a nuestro archivo index.html para integrar la parte cliente.
Añadimos el archivo JavaScript de la parte cliente. Tenemos varias opciones, una será añadirla desde /socket.io/socket.io.js que nos lo proporciona nuestro propio servidor, otra opción sería desde un servidor cdn https://cdn.socket.io/socket.io-1.3.4.js o añadirlo desde cualquier lugar que esté alojado. Nosotros escogeremos la primera y haremos la conexión.
<script src="/socket.io/socket.io.js"></script> <script> var socket = io(); </script>
Como veis no estoy indicando la dirección del servidor que corre socket.io por lo que tomará por defecto el mismo host que me devuelve la página.
Ahora reiniciamos el script app.js y recargamos la web. Nos daremos cuenta que reconoce la conexión imprimiendo el mensaje de un usuario conectado.
Vamos a ir un poco más alla y vamos a enviar un mensaje desde la parte cliente. Para ellos vamos a implementar una función que se ejecute cuando se pulse el botón de enviar mensaje.
function enviarMensaje() {
console.log("enviando: " + document.getElementById("mensajeParaEnviar").value);
socket.emit('mensaje', document.getElementById("mensajeParaEnviar").value);
document.getElementById("mensajeParaEnviar").value = "";
}
Y vamos a capturar el mensaje que recibamos desde el servidor que haya sido mandado por cualquier otro usuario conectado.
socket.on("mensaje", function(mensaje) {
document.getElementById("mensajesLista").innerHTML += "
- " + mensaje + "
- "; });
Ahora vamos a nuestro app.js y dejamos nuestra conexión implementada de la siguiente manera
io.on('connection', function(socket){ console.log('un usuario conectado'); socket.on('disconnect', function(){ console.log('usuario desconectado'); }); // los mensajes que lleguen al evento al que hemos llamado mensaje los manejamos por aqui y con io.emit los emitimos a todo el mundo. socket.on('mensaje', function(mensaje){ console.log('mensaje: ' + mensaje); io.emit('mensaje', mensaje); }); });Listo, ahora reinicia el server y abre la web desde varias pestañas de tu navegador para que veas como se propagan los mensajes en tiempo real. Este es un ejemplo básico que nos va a ayudar a saber como manejar socket.io. Quedan en el tintero muchos aspectos pero en este primer vistazo no es el propósito. En post futuros veremos como poner nuestro nick y mandar mensajes privados por ejemplo.
