WebSockets in ErsteOps

Los WebSockets es un protocolo de conexiones constantes los cuales con la ayuda de Django Channes proporcionaran notificaciones o actualizaciones en tiempo real.

Veremos 3 de sus funciones principales que son:

• La coneccion
• Enviar datos
• Recibir datos

La coneccion

Para realizar la coneccion no es necesario estar en una urls especifica, puede realizarse desde cualquier parte del frontend, pero requiere una sesión activa para recibir y enviar datos.

Esta es la sugerencia de configuracion

var ws_scheme = window.location.protocol == "https:" ? "wss" : "ws";

var ws_path = ws_scheme + '://' + window.location.host + "/notify/emergency/";

console.log("Connecting to " + ws_path);

var socket = new ReconnectingWebSocket(ws_path);

para realizar la coneccion se deve apunta a la siguiente url de nuestro host

"/notify/emergency/" o "/notify/derivation/"

dependiendo de que actualizaciones se quieren recibir

y ReconnectingWebSocket es el script que mantendrá la coneccion activa y re conectara en caso de que se cierre, esta dependencia se debe agregar en los scripts del template

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/reconnecting-websocket/1.0.0/reconnecting-websocket.min.js"></script>

Recibir Datos

con nuestra variable var socket podemos escuchar cuando lleguen datos con la función socket.onmessage y obtener los datos de message.data, estos datos seran Json's de los objetos cada que los mismos sean creados actualizados en el backend

socket.onmessage = function(message){ var dataTemp = JSON.parse(message.data); var data = JSON.parse(dataTemp); };

nota: requiere de los 2 parse, ya que con solo el primero solo se obtiene un str en lugar de un json

Enviar Datos

Para esta aplicacion no se enviaran datos por websockets, pero esta es la forma en la que se pueden enviar, igualmente es con nustra variable var socket y su funcion socket.send, se puede mandar cualquier tipo de dato, pero se recomienda que sea un json.

$("#chatbuton").click(function(event) { var message = { handle: $('#handle').val(), message: $('#message').val(), } socket.send(JSON.stringify(message)); $("#message").val('').focus(); return false; });

este es un pequeño ejemplo de como se puede mandar datos usando mediante un click de un boton

Script

los codigos completos para su implementacion se encuentran en este git sobre la rama feature/add_django_channels

ersteops/static/notifications/Scripts.js

ersteops/templates/notifications/templates.html