sábado, 26 de noviembre de 2011

Configuración de Apache para uso de WebSocketen sitios HTML5

Antes que nada esto fue implementado en un servidor local Apache2 sobre Ubuntu 11.04.


Primero debemos elegir un directorio para descargar mediante svn el pywebsocket que es el que utilizaremos:


Eh elegido /var/ luego descargamos las fuentes:
sudo svn checkout http://pywebsocket.googlecode.com/svn/trunk/ pywebsocket-read-only


Una ves descargado, procedemos a ingresar al directorio contenedor:
cd pywebsocket-read-only/src/


Y ejecutamos:
sudo python setup.py build


Luego:
sudo python setup.py install


Y voala, ya tenemos nuestro pywebsocket instalado, ahora procedemos a configurar nuestro apache, para ello editamos el archivo /etc/apache2/httpd.conf agregando lo siguiente:


PythonPath "sys.path+['/usr/local/lib/python2.7/dist-packages/mod_pywebsocket']" PythonOption mod_pywebsocket.handler_root /var/websockets/ PythonHeaderParserHandler mod_pywebsocket.headerparserhandler


Bueno en la segunda linea eh dado como ruta para los archivos manejadores /var/websockets/ por razones de seguridad no usamos el directorio root http (var/www/) pero puedes eligir la ruta que mejor te plazca, otra cuestión es que debes chequear la versión de python instalada, en mi caso fue la 2.7 y el directorio lleva por nombre python2.7, pero es posible que instales una versión superior en cuyo caso este cambiaría, solo es cuestión de revisar las rutas desde la consola con nuestro famoso cd + tab.


Ahora bien, es obvio que usaremos python para gestionar nuestro websocket, por lo que Apache requerirá de el modulo de python para gestionarlo, por lo que lo instalamos:


sudo apt-get install libapache2-mod-python


Y luego lo agregamos a la configuración por defecto de sitios, editamos el archivo /etc/apache2/sites-available/default e incluimos estas 3 ultimas lineas en negrita:


Options Indexes FollowSymLinks MultiViews AllowOverride None Order allow,deny allow from all AddHandler mod_python .py PythonHandler mod_python.publisher PythonDebug On


A estas alturas te habrás fijado que van incluidas en el bloque /var/www/


Y para verificar que nuestro Apache procesa el python, reiniciamos el servidor y creamos un archivo en nuestro root apache (/var/www/) con el nombre de test.py incluyendo el siguiente contenido:


def index(req): return "Test completado"


Luego vamos al browser y lo probamos (localhost/test.py) y lo que debemos obterner es un print con la frase "test completado".


Con esto ya tenemos nuestro websocket listo para usar, ahora si toca un ejemplo:


En la ruta que definiste para el websocket (en mi caso /var/websockets) crea el siguiente archivo:


date_wsh.py con el siguiente contenido:


from mod_pywebsocket import msgutil from datetime import datetime import time _GOODBYE_MESSAGE = 'Goodbye' def web_socket_do_extra_handshake(request): print 'Conectado.' pass # Always accept. def web_socket_transfer_data(request): while True: time.sleep(1) date = datetime.now() hoy= date.strftime("%Y-%m-%d %H:%M:%S") msgutil.send_message(request, 'dataformat!%s' % hoy)




Y en el var/www/ el siguiente html:


prueba_websocket.html


<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script> $(document).ready(function(){ var ws; if ("WebSocket" in window) { //debug("Horray you have web sockets. Trying to connect..."); ws = new WebSocket("ws://localhost/data"); ws.onopen = function() { // Web Socket is connected. You can send data by send() method. debug("connected..."); ws.send("hello from the browser"); ws.send("more from browser"); }; run = function() { var val=$("#i1").val(); // read the entry $("#i1").val(""); // and clear it ws.send(val); // tell erlang return true; // must do this }; ws.onmessage = function (evt){ //alert(evt.data); var data = evt.data; var i = data.indexOf("!"); var tag = data.slice(0,i); var val = data.slice(i+1); $("#" + tag).html(val); }; ws.onclose = function(){ debug(" socket closed"); }; }else{ alert("You have no web sockets"); }; function debug(str){ $("#debug").append("<p>" + str); }; }); </script> </head> <body> <h1>Interaction experiment</h1> <h2>Debug</h2> <div id="debug"></div> <fieldset> <legend>Clock</legend>
<div id="dataformat"></div>
</fieldset> </body> </html>




Carga el archivo html en tu browser y listo! veras como tienes un reloj informandote cada segundo su estado, directamente de tu servidor usando un websocket!!


Como nota adicional, esto solo funciona con Google Chrome, el resto de navegadores no fue testeado.


Saludos y mis disculpas por la poca redacción, es tarde y estoy muy cansado, pero queria compartirles esto.