Esta es la segunda entrada en la documentación de una aplicación web que recibe actualizaciones en tiempo real, utilizando websockets. El objetivo de esta entrada es poder enviar información en el momento en el que se visita una url de esta manera tendríamos lo necesario para poder construir algo más complejo
El primer problema con el que me encontré fue que con Flask no pude enviar contenido aparentemente porque ya es un tema Asíncrono. Buscando y buscando encontré otro micro-framework llamada Klein.
Klein es muy similar a Flask así que no debería ser tan problemático, la ventaja de utilizar este framework es que se integra perfectamente con Twisted al igual que crossbar así que debería ser mucho más sencillo.
La meta a la que se llega en esta entrada es que al visitar una url el index, se enviará una notificación que se recibirá en el index y mostrará un contador de visitas. Nada complicado, pero este paso es esencial para poder crear algo mejor.
Para comenzar el primer paso fue que tuve que editar el app.py para que en lugar de usar Flask utilizar Klein
app.py
import jinja2
from klein import Klein
from twisted.internet.defer import inlineCallbacks, returnValue
from autobahn.twisted.wamp import Application
# This is our WAMP application
##
wampapp = Application('com.example')
# This is our Web application
##
webapp = Klein()
webapp.visits = 0
webapp.templates = jinja2.Environment(loader=jinja2.FileSystemLoader('templates'))
@webapp.route('/')
def home(request):
webapp.visits += 1
wampapp.session.publish('com.example.onvisit', webapp.visits)
page = webapp.templates.get_template('index.html')
return page.render(visits=webapp.visits)
if __name__ == "__main__":
import sys
from twisted.python import log
from twisted.web.server import Site
from twisted.internet import reactor
log.startLogging(sys.stdout)
reactor.listenTCP(5000, Site(webapp.resource()))
wampapp.run("ws://crossbar:8080/ws", "realm1")
Dockerfile
FROM python:3.7
WORKDIR /code
ENV FLASK_APP app.py
ENV FLASK_RUN_HOST 0.0.0.0
COPY requirements.txt requirements.txt
RUN pip install -r requirements.txt
EXPOSE 5000
COPY . .
CMD ["python", "app.py"]
docker-compose.yml
version: '3'
services:
web:
build: ./web
depends_on:
- crossbar
ports:
- "5000:5000"
volumes:
- ./web:/code
environment:
FLASK_ENV: development
crossbar:
image: "crossbario/crossbar"
ports:
- "8080:8080"
y por último el index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://localhost:8080/js/autobahn.min.js"></script>
</head>
<body>
hellor world. Visits: <span id="visits">{{visits}}</span>
</body>
<script type="text/javascript">
var connection = new autobahn.Connection({url: 'ws://localhost:8080/ws', realm: 'realm1'});
connection.onopen = function (session) {
function onevent(args) {
element = document.getElementById('visits');
console.log(element);
element.textContent = args[0];
console.log("hello");
console.log(args);
}
session.subscribe('com.example.onvisit', onevent);
};
connection.open();
</script>
</html>
y para ejecutarlo hay que ir servicio por servicio
docker-compose up crossbar
docker-compose up web
Conclusión
Realmente fue muy complicado encontrar esta ruta, para poder solo poder mostrar un mísero contador de visitas, en fin, en la próxima entrada supongo que comenzaré con vue, para ver que se me ocurre.
Otro de los problemas que tengo y aun no soluciono es el siguiente hay que ejecutar los servicios uno por uno en vez de solo hacer solo up
El resultado final es un poco desepcionaste pues solo muestra un numerito que se actualiza solo.
Añadir nuevo comentario