Websockets

Este API permite el uso del protocolo WebSocket en páginas web. Este protocolo permite la comunicación de dos vías con un sitio remoto.

Puede ser utilizado en la mayoría de los navegadores IE10+ con excepción de Opera Mini. Referencia caniuse.

Para poder utilizar los websockets tenemos que escribir código en la parte del cliente (JavaScript), además tenemos que utilizar un servidor que soporte el protocolo ws.

En el cliente (JavaScript):

1. Tenemos que crear una conexión a un URL que tenga el protocolo websocket.
2. Podemos asociar funcionalidad a distintos eventos que suceden en el ciclo de vida de la conexión:
   • Al abrir.
   • Al cerrar.
   • Al recibir un mensaje.
   • Cuando hay un error.

var url = "ws://localhost:8080/";
websocket = new WebSocket(url); 

websocket.onopen = function(evt) { 
  // Asociar funcionalidad al abrir la conexión
}      

websocket.onclose = function(evt) { 
  // Asociar funcionalidad al cerrar la conexión
} 

websocket.onmessage = function(evt) { 
  // Asociar funcionalidad al recibir un mensaje
} 

websocket.onerror = function(evt) { 
  // Asociar funcionalidad cuando haya un error      
}

Desde el cliente podemos enviar mensajes al servidor con send.

websocket.send(mensaje);

En el servidor se pueden utilizar distintas librerías para distintos lenguajes de programación.

Ratchet en PHP
Socket.io en Node.js

En este caso voy a utilizar em-websocket en ruby.

Instalar la gema em-websocket (si ruby está instalado).

gem install em-websocket

En este caso utilizo un canal para que los mensajes enviados al servidor sean transmitidos a los navegadores que se encuentren conectados.

require 'em-websocket'

HOST = "127.0.0.1"
PORT = 8080

EM.run {
  
  @channel = EM::Channel.new
  
  EM::WebSocket.run(host: HOST, port: PORT) do |ws|

    ws.onopen do |handshake|
      @channel.subscribe { |msg| ws.send msg }
      @channel.push "Conectado"
    end

    ws.onmessage {|msg| @channel.push msg }
        
    ws.onerror { |e|  puts "Error #{e.message}" }
       
    ws.onclose { puts "Desconectado." }

  end
}

Para iniciar el servidor hay que abrir la consola (terminal), posicionarse en la carpeta donde está el archivo server.rb y teclear:

ruby server.rb

Abrimos la página con la conexión al servidor – http://localhost/websockets/websocket.html – en un navegador y probamos el protocolo.

Si tu navegador no es compatible con la etiqueta de video o tuviste algún problema para visualizar el video existe una versión en YouTube

Descargar el proyecto websockets.