Web Sockets

Search…
Web Sockets
Web Sockets es una tecnología que permite a los navegadoress recibir información del servidor y actualizarse en tiempo real, sin necesidad de refrescar la página.
La forma en que funciona Web Sockets es que el navegador, a través de JavaScript, abre una conexión HTTP con el servidor y mantiene esa conexión abierta para que el servidor pueda enviarle información al navegador en cualquier momento (el cliente también puede enviarle información al servidor a través de esta conexión).
Para que Web Sockets funcione se debe escribir código tanto en el cliente (con JavaScript o CoffeeScript) como en el servidor (p.e. con Ruby).
Rails 5 introduce Action Cable, un módulo que facilita la implementación de WebSockets en nuestras aplicaciones.
Conceptos básicos
Antes de empezar a trabajar con Action Cable debes conocer los siguientes conceptos:
Connection: representa la conexión HTTP entre el cliente y servidor, generalmente se abre una única conexión por sesión (por pestaña del navegador).
Channel: los canales son lo equivalente a los controladores en Rails, nos permiten organizar la comunicación entre el servidor y los clientes.
Subscription: los clientes realizan subscripciones a los canales de los cuáles les interesa recibir información.
Nuestro primer canal
Lo primero que debemos pensar en nuestras aplicaciones es qué canales vamos a necesitar crear.
Por ejemplo, si estamos creando un sistema de chat con "cuartos" donde varias personas pueden interactuar en un mismo cuarto, podríamos pensar en un canal llamado Room que represente cada cuarto que se cree. Cuando un usuario ingresa a un cuarto se suscribe al canal de ese cuarto para recibir los mensajes de otras personas.
Para crear un canal se puede utilizar el siguiente generador para canales:
1
$ rails generate channel room
Copied!
El comando anterior crea dos archivos:
app/channels/room_channel.rb - nos permite configurar el canal y recibir información del cliente desde el servidor.
app/assets/javascripts/channels/room.coffee - crea la conexión al canal y nos permite enviar y recibir información al servidor (desde el cliente).
Ahora podemos empezar a enviar información del servidor al cliente y viceversa!
Nota: Con el comando anterior se crea un único canal al que todos los clientes se van a conectar automáticamente. Más adelante vamos a ver cómo pasarle parámetros a los canales.
Enviando información al cliente (desde el servidor)
Para enviar un mensaje a todos los clientes conectados a un canal utilizamos el método ActionCable.server.broadcast desde cualquier canal, controlador, modelo o helper:
1
data = { message: "Hola Amigos", user: "pedro0553" }
2
ActionCable.server.broadcast("RoomChannel", data)
Copied!
Nota: Estas líneas no las puedes ejecutar desde rails console ni desde un background job. Para hacerlo debes utilizar Redis como vamos a ver el final de este capítulo.
Recibiendo información en el cliente
Para recibir información en el cliente se debe modificar el archivo que fue generado para el cliente cuando se creó el canal, en nuestro ejemplo app/assets/javascripts/channels/room.coffee:
1
App.room = App.cable.subscriptions.create "RoomChannel",
2
  connected: ->
3
​
4
  disconnected: ->
5
​
6
  received: (data) ->
7
    console.log(data); # acá recibimos la información
Copied!
El método received se llama cada vez que se recibe un mensaje del servidor. En este caso estamos haciendo un console.log pero acá podemos, por ejemplo, modificar el HTML para mostrar el mensaje.
Enviando información al servidor (desde el cliente)
Para enviar información al servidor utilizamos el método send sobre el canal desde cualquier archivo JavaScript (o CoffeeScript). En nuestro ejemplo anterior sería de la siguiente forma:
1
App.room.send({ message: "Hola a todos", user: "miguel8734" });
Copied!
Estamos utilizando App.room porque así se llama la variable en app/assets/javascripts/channels/room.coffee.
Recibiendo información en el servidor
Para recibir información en el servidor se debe modificar el archivo que fue generado para el servidor cuando se creó el canal, en nuestro ejemplo app/channels/room_channel.rb:
1
class RoomChannel < ApplicationCable::Channel
2
  def subscribed
3
  end
4
​
5
  def unsubscribed
6
  end
7
​
8
  def received(data)
9
    puts data # acá recibimos la información del cliente
10
  end
11
end
Copied!
El método received se llama cada vez que recibimos información del cliente.
Parametrizando los canales
Nuestro ejemplo anterior no es muy útil porque sólo soporta un "cuarto". Generalmente queremos que los canales soporten parámetros (p.e. el id o el nombre del cuarto en nuestra aplicación de chat).
Para soportar parámetros en nuestros canales debemos modificar tanto el servidor como el cliente.
En el servidor vamos a modificar el método subscribed de nuestro canal en app/channels/room_channel.rb:
1
class RoomChannel < ApplicationCable::Channel
2
  def subscribed
3
    stream_from "room-#{params[:name]}"
4
  end
5
end
Copied!
El método stream_from nos permite nombrar el canal y utilizar parámetros en el nombre.
En el cliente vamos a modificar la forma en que nos suscribimos al canal en app/assets/javascripts/channels/room.coffee:
1
App.room = App.cable.subscriptions.create { channel: "RoomChannel", name: "micuarto" },
2
  connected: ->
3
​
4
  disconnected: ->
5
​
6
  received: (data) ->
7
    console.log(data); # acá recibimos la información
Copied!
En vez de pasarle un string al método create le vamos a pasar un objeto que tiene el canal y cualquier parámetro adicional que necesitemos (en este caso el name con valor "micuarto").
Sin embargo, no queremos que siempre se conecte al cuarto micuarto, así que lo mejor sería encapsular el código de la suscripción en una función que podamos llamar desde otra parte de nuestro código JavaScript. Modifiquemos room.coofee:
1
window.subscribeToRoom = (room) => {
2
  App.room = App.cable.subscriptions.create { channel: "RoomChannel", name: room },
3
    connected: ->
4
​
5
    disconnected: ->
6
​
7
    received: (data) ->
8
      console.log(data); # acá recibimos la información
9
}
Copied!
Y más adelante en nuestro código (p.e. cuando la persona entre a un cuarto):
1
subscribeToRoom("micuarto");
Copied!
Nota: En este ejemplo hemos almacenado la función en window, quizá una mejor práctica es almacenarla en App o en otro objeto para no contaminar el contexto global.
Identificando las conexiones
En la mayoría de aplicaciones vamos a necesitar identificar cada conexión (p.e. para saber qué usuario es).
Para identificar las conexiones vamos a modificar el archivo app/channels/application_cable/connection.rb:
1
module ApplicationCable
2
  class Connection < ActionCable::Connection::Base
3
    identified_by :current_user
4
​
5
    def connect
6
      self.current_user = User.find_by(id: cookies.encrypted[:user_id])
7
    end
8
  end
9
end
Copied!
En este ejemplo estamos identificando la conexión utilizando una variable current_user que inicializamos en el método connect (es decir, cuando se abre la conexión con el servidor). Fíjate que es necesario acceder a las cookies para encontrar el id del usuario.
Nota: Ojalá más adelante integren Action Cable con Devise para no tener que hacer este paso manualmente y que la autenticación funcione como funciona en los controladores!
Comunicación entre procesos
Para desplegar en producción (p.e. en Heroku) o para probar desde rails console debes instalar y utilizar Redis.
Por defecto, la configuración de Action Cable se encuentra en el archivo config/cable.yml, que se puede configurar de la siguiente manera:
1
development:
2
  adapter: async
3
​
4
test:
5
  adapter: async
6
​
7
production:
8
  adapter: redis
9
  url: redis://10.10.3.153:6381
10
  channel_prefix: appname_production
Copied!
El adaptador async es para desarrollo y testing, no para producción. Este adaptador no permite la comunicación entre procesos.
El adaptador redis se recomienda para producción y si quieres probar el broadcast desde rails console o desde un background job.
Creando una Web API
Express.js
Last modified 2yr ago
Copy link
Contents
Conceptos básicos
Nuestro primer canal
Enviando información al cliente (desde el servidor)
Recibiendo información en el cliente
Enviando información al servidor (desde el cliente)
Recibiendo información en el servidor
Parametrizando los canales
Identificando las conexiones
Comunicación entre procesos