SocketIO una vez salió a la luz revoluciono la forma en la que las aplicaciones se realizaban, y nos brindo a los desarrolladores una herramienta bastante poderosa en cuanto al desarrollo de aplicaciones web se refiere. Brindándonos la capacidad de poder comunicarnos con nuestros clientes de forma directa en tiempo real.
Aprovechando la acogida de las apis de HTML5 socket.io nos brinda una interface para poder utilizar WebSockets y ademas a eso nos abstrae de usar metodos alternativos a WebSockets para navegadores que no lo soporten y aun así brindar a todos nuestros usuarios aplicaciones en tiempo real. Esta libreria cae perfecto para aplicaciones como Chats, Juegos, Analitica y demás, se puede ser bien creativo cuando tiene una comunicación bi-direccional con nuestros usuarios.
En caso de que tengan alguna duda, Nodejs es la plataforma, Express es un web framework para nodejs y socket.io es el framework que me ayuda a manejar la comunicación real-time de nuestra aplicación.
Instalación
Para poder seguir con este tutorial es necesario tener instalado nodejs
Iniciar nuestro projecto npm
npm init
Instalar socket.io
npm install socketio --save-dev
Instalar Express
npm install express --save-dev
Hello World
Este hola mundo es mas bien de express que de socket.io, es para probar que todo esta bien. Crear un archivo server.js
//server.js
var express = require('express');
var app = express();
app.get('/', function (req, res) {
res.end('Hola mundo');
});
app.listen(3000);
Corremos nuestra aplicación usando:
node server.js
SocketIO HelloWorld
Esta vez vamos a crear un ejemplo super simple con express y socketio, vamos a enviar data tanto desde nuestro server para nuestro cliente y luego enviar data desde nuestros clientes hacia el server.
index.html
En este html colocaremos la logica que estará en los clientes que sera escuchar eventos via websocket y mostrar alertas con los mensajes enviados desde el server.
<!DOCTYPE html>
<html>
<head>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io('http://localhost:3000');
socket.on('welcome_event', function (data) {
console.log(data);
socket.emit('response_evet', { hola: 'mundo' });
});
</script>
</head>
<body>
<h4>Hola Mundo</h4>
</body>
</html>
En la porción de código que acabamos de ver estamos incluyendo la libreria de socket.io, estamos contectandonos a nuestro server nodejs en el puerto 3000 y escuchamos el evento welcome_event que sera emitido desde el servidor una vez nos conectemos.
server.js
Este archivo js sera nuestro server nodejs y donde estaremos manejando las conexiones web sockets y los eventos.
var express = require("express");
var app = express();
app.get('/', function (req, res) {
res.sendFile(__dirname + '/index.html');
});
var server = app.listen(3000,'0.0.0.0',function(){
console.log("App server up and running on %s and port %s",server.address().address ,server.address().port);
});
var io = require('socket.io')(server);
io.on('connection',function(socket){
socket.emit('welcome_event', { info: 'world' });
socket.on('response_evet',function(data){
console.log("Data desde el cliente",data);
});
});
Nuestro servidor estará encargado de crear la aplicación en express y usarla para instanciar socket.io, escuchamos el eventos connection que es invocado cada vez que un usuario se conecta al socket server.
El emitir y escuchar eventos es bien parecido a lo que trabajamos en javascript, escuchar y recibir informacion y emitir y mandar informacion.
Si ejecutamos nuestro server
node server.js
Luego accedemos en nuestro navegador a la url localhost:3000, tendremos algo como esto en la consola del navegador.
Object {info: "world"}
Mientras en nuestra consola del server de nodejs tendemos algo como esto
App server up and running on 0.0.0.0 and port 86
Data desde el cliente { hola: 'mundo' }
Lo mostrado anteriormente es la información que estamos enviado desde el server hacia el cliente via web socket. Si observamos en chrome en el area de network podremos ver la conexión websocket abierta.
Broadcast
Emitir un broadcast con socket.io es lo mismo que decir «Emitir un evento para todo el mundo» tanto para un contexto como para todo el que este conectado en el server socket.
Se puede realizar de varios formas:
var io = require('socket.io')(server);
//Esto emitira un evento a todos los usuarios conectados.
io.emit("evento",{data:"hola"});
//Esto emitira un evento a todos los usuarios menos a quien lo envia.
io.on('connection',function(socket){
socket.broadcast.emit('evento',{data:'hola'});
});
Rooms
Al igual que en los programas de chats en socket.io existen los que son los rooms o context que son contextos en los que los usuarios pueden conectar a este y escuchar eventos bajo ese contexto y emitir en caso de hacia ese mismo contexto.
Crear un room es tan facil como esto:
server
var io = require('socket.io')(server);
var testRoom = io.of('/test');
testRoom.on('connection',function(socket){
socket.broadcast.emit('usuario_nuevo',{data:""})
});
cliente
<script>
var socket = io('http://localhost/test');
socket.on('evento', function (data) {
console.log(data);
});
</script>
Un usuario puede estar contado a mas de un room al mismo tiempo sin ningun problema.
Si notan es lo mismo que trabajar bajo un contexto global o general, podemos escuchar y emitir eventos al igual que podemos enviar broadcast bajo este mismo concepto y estos eventos solo llegaran a quienes esten conectado a este room.
Y hasta aqui este tutorial de como usar socket.io y express, ya lo de mas es jugar con el framework y ver que podemos hacer con el mismo.