[Python-es] Comunicación entre Tornado y Javascript

Diego Uribe Gamez diego.uribe.gamez en gmail.com
Mie Nov 14 21:24:39 CET 2012


Hola,

Tengo un problema y es que no logro entender como comunicar la pagina html
y el servidor usando Tornado usando Javascript como intermediario, en
especial para traer una variable:

como hago para disparar este código desde el navegador?
----------------------------------------------------------------------
    def on_message(self, message):
        print 'message received %s' % message
----------------------------------------------------------------------

y también que me imprima en terminal una variable enviada desde el
navegador? o en este caso el message

Este es el código que estoy usando para el ejemplo:

server.py
----------------------------------------------------------------------

# -*- coding: utf-8 -*-
import tornado.httpserver
import tornado.websocket
import tornado.ioloop
import tornado.web


class WSHandler(tornado.websocket.WebSocketHandler):
    def open(self):
        print 'new connection'
        self.write_message("Hello World")

    def on_message(self, message):
        print 'message received %s' % message

    def on_close(self):
      print 'connection closed'


application = tornado.web.Application([
    (r'/ws', WSHandler),
])


if __name__ == "__main__":
    http_server = tornado.httpserver.HTTPServer(application)
    http_server.listen(8888)
    tornado.ioloop.IOLoop.instance().start()


HelloWorld.html
----------------------------------------------------------------------

<!doctype html>
<html>
  <head>
    <title>WebSockets Hello World</title>
    <meta charset="utf-8" />
    <style type="text/css">
      body {
        text-align: center;
        min-width: 500px;
      }
    </style>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script>
      $(document).ready(function () {

        var ws;

        $("#open").click(function(evt) {
          evt.preventDefault();

          var host = $("#host").val();
          var port = $("#port").val();
          var uri = $("#uri").val();

          ws = new WebSocket("ws://" + host + ":" + port + uri);

          ws.onmessage = function(evt) {alert("message received: " +
evt.data)};

          ws.onclose = function(evt) { alert("Connection close"); };

          ws.onopen = function(evt) {
            $("#host").css("background", "#00ff00");
            $("#port").css("background", "#00ff00");
            $("#uri").css("background", "#00ff00");
          };
        });

      });
    </script>
  </head>

  <body>
    <h1>WebSockets Hello World</h1>
    <div>
      <label for="host">host:</label>
      <input type="text" id="host" value="localhost"
style="background:#ff0000;"/><br />
      <label for="port">port:</label>
      <input type="text" id="port" value="8888"
style="background:#ff0000;"/><br />
      <label for="uri">uri:</label>
      <input type="text" id="uri" value="/ws"
style="background:#ff0000;"/><br />
      <input type="submit" id="open" value="open" />
    </div>
  </body>
</html>

Sacado de:
"http://mbed.org/cookbook/Websockets-Server"

-- 
 *Diego Alonso Uribe Gamez*
------------------------------

*Desarrollador web*

Twitter: @DiegoUG <http://www.twitter.com/DiegoUG>

Google+: http://gplus.to/diegoug
------------------------------
------------ próxima parte ------------
Se ha borrado un adjunto en formato HTML...
URL: <http://mail.python.org/pipermail/python-es/attachments/20121114/d2155545/attachment.html>


Más información sobre la lista de distribución Python-es