Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

Introducción a socket.io

Carlos Merchán
  • Escrito por Carlos Merchán el 01 de Abril de 2015
  • 3 min de lectura | Backend
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: http://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.python.org/pypi/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.python.org/pypi/socketIO-client

Unity3D: https://github.com/NetEase/UnitySocketIO

Java: https://github.com/nkzawa/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.


    El código lo podéis descargar de https://github.com/careuno/chatPostOpenWebinars.git


    Estas son algunas de las empresas que ya confían en OpenWebinars

    Profesores y profesionales

    Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

    Conviértete en profesor de OpenWebinars