Integrando Pusher con RoR 5

¿Qué es Pusher?

Pusher es un servicio en la nube que nos concentra toda la implementación de un WebSocket, mediante librerías integradas en nuestra aplicación que nos proporciona Pusher, sin tener que ejecutar un servidor de WebSocket propio, nos da la opción de poder escalar y aumentar nuestros numero de conexiones en simultaneo y también la cantidad de mensajes que enviamos.

Podemos implementar los servicios de Pusher usando diversas librerías clientes como JavaScript, Java, Android, iOs, .Net, Ruby o ActionScript. Así como el servidor para Ruby, Node.js, Java, Phyton, PHP, .NET, Perl o Clojure.

WebSockets

Cuando navegamos por Internet, y en el ejemplo mas claro cuando usamos nuestras redes sociales nuestro ordenador esta conectado a un servidor el cual recibe una comunicación directa con nuestro equipo, el ejemplo típico se aplica también con un chat de cualquier red social que usemos, aquí hay una comunicación persistente.

WebSocket y conexiones persistentes

Usando WebSocket solo vamos a necesitar crea una sola conexión por una única vez, es por eso que lo llamamos conexión persistente, ¡se acuerdan del ejemplo anterior de las conexiones cliente servidor de tu PC y por ejemplo el servidor de Facebook?, bien, esta empresa lo usa bastante así como muchas en donde usan una conexión en ambas direcciones de manera rápida y eficiente con sus usuarios.

¿En que momento es necesario su uso?

El principal uso de los WebSocket tienen que ver con las soluciones a problemas con la forma de interactividad. Por ejemplo la creación de chat que manejaran grandes volúmenes de mensajes, o portales educativos donde se requiere la interacción en tiempo real con alumnos,etc.

si lo que hacemos seria construir una website que al final de cuentas solo sirva una pagina estática, no estaríamos usando todo el beneficio de las tecnologías que crean WebSocket por el simple hecho de que no lo necesitaremos.

Vamos a considerar que :

· WebSockets es un protocolo de más bajo nivel

· WebSockets es un protocolo con estado

· Con WebSockets se deben tener en cuenta los proxies, firewalls,…

· La seguridad no está definida en los WebSockets

Ajax y el nuevo cambio en HTML5

Ajax ha sido un estandar de facto para poder construir RIA(Rich Internet Application), y hasta el día de hoy sigue siendo muy bien soportada por muchos navegadores y en muchas de las librerías de JavaScript entre ellas la mas famosa jquery, ha venido soportando la creación de ajax, sin embargo esta está enfocada mas en eventos, osea en la aplicación de ajax a eventos que hace el usuario sobre las etiquetas HTML. Sin duda muchas de las cosas que hemos empezado hacer cuando trabajamos o estudiamos sobre la creación de aplicación real time ha sido usar jquery y sus métodos para creación de ajax, pero esto no es lo único que vamos a encontrar, un ejemplo también es Comet y WebSocket (como lo describí lineas atrás).

HTML5 trajo consigo una revolución en la manera como vemos la web y con ella la posibilidad de la construcción desde cero de WebSockets.

Valor agregado de WebSocket

la diferencia que da valor agregado a WebSocket,esta en que provee una conexión duplex entre tu navegador y el servidor con una sola conexión TCP/IP, ademas que genera pocos headers HTTP en los mensajes. Ademas el protocolo que usa se adapta bien a diversidad de clientes como:

Microsoft Silverlight

JavaScript

dobe Flex

JavaFX

Pusher y Rails 5

Bueno luego de dar un concepto comprimido de lo que es WebSocket y Pusher como una manera de usarlo, es hora de ver como funciona y para ello usaré unos de los framework mas famosos para la construcción de sitios web dinámicos como es el caso de Ruby on Rails.

La explicación dentro del código será con “#”

creamos nuestro proyecto.

rails new pusher-rails -d posgresql

Esta vez vamos a construir nuestro controlador y vistas con un rápido scaffold ya que no nos estamos centrando en la creación de una app completa y con mucho detalle en la vistas, estoy seguro que eso lo podemos modificar luego.

Bien construimos nuestro scaffold.

rails g scaffold Message user_name:string text:text

luego rake db:migrate

en nuestro Gemfile vamos a agregar la gema de Pusher con:

gem 'pusher'

y como es de rutina damos un bundle install en nuestra terminal.

En nuestro archivos de routes vamos a usar peticiones con resources, así que simplemente agregaremos una linea con:

resources :messages

Antes de continuar es importante registrarnos en Pusher, aquí les dejo el link.

Login | Pusher

al momento de crearnos una cuenta Pusher nos crea un dashboard con id para nuestra app, en este ejemplo solo usaremos el código para nuestro Backend y nuestro cliente que también estará en nuestro chat en Rails.

Vamos a editar nuestra carpeta config/initializers agregando un nuevo archivo llamado pusher.rb en el cual contendrá nuestras credenciales que estará asociado a nuestra app en el dashboard de Pusher.

En nuestras vistas la única modificación sera en nuestro layout y nuestro index.html.erb

layout

en messages/index.html.erb

En nuestro controlador

En assets/javascript/messajes.js

Resultado

Eso seria todo en este post , tengo que mencionar que actualmente con RoR 5 viene por defecto una funcionalidad agregada en esta version como es el caso de cable.js , se trata de crear un WebSocket apartir de estos archivos en Rails.

Si deseamos crear algo mas a medida tenemos una buena alternativa con Socket.io que se integra bastante bien a node.js, eso seria motivo de otro post :) .

si te gustó dale click en el ❤.