5

我在 Tornado 框架中使用 WebSockets，无法以 html 形式获取要发送到 tornado 类的数据。

这是我的代码：

class MainHandler(tornado.web.RequestHandler):
    event = []
    def get(self):
        self.render('main.html')             

    def post(self):
        MainHandler.event = self.get_argument('event')

当我尝试将事件发送到 WebSocketHandler 类时。没有从表单接收到数据：

class WSHandler(tornado.websocket.WebSocketHandler):

    def open(self):
            print "tailing..."
            db = Connection().blah
            coll = db.blah_tail

            event = MainHandler.event
            print 'Filtered', event

'Filtered' 只打印一个空列表：“Filtered []”。

html表单：

<form action="/" method="post">
            <input type="text" name="event" />
            <input type="submit" id="open" value="Submit Query" />
        </form>

如何将表单数据发送到 WSHandler 类？

谢谢

创建websocket的js：

<script>
        $(document).ready(function() {
            var ws;

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

        ws = new WebSocket("ws://" + "localhost" + ":" + "8888" + "/ws");

        ws.onmessage = function(evt) $("#display").append(evt.data + "<br />");

        ws.onclose = function(evt) {alert("Server connection terminated");};
    });
   }); 
    </script>
4

2 回答 2

4

就像 Tornado 文档中的示例一样，我将 aset用于 WebSocket 客户端。改进这一点留给读者作为练习。

# clients listing on the WebSocket
clients = set()

class MainHandler(tornado.web.RequestHandler):
    def get(self):
        return self.render("index.html")

    def post(self):
        global clients

        event = self.get_argument("event")
        print "got event", event
        if not clients:
            print "No WebSockets, no point in querying the database"
            return
        for coordinate in self.get_coordinates(event):
            for client in clients:
                print "sending coordinate", coordinate, "to client", client
                client.write_message(json.dumps(coordinate,
                                                default=json_util.default))

    def get_coordinates(self, event):
        # replace with a real database query
        for coordinate in ("No", "man's", "land"):
            time.sleep(1)
            yield coordinate

class WSHandler(tornado.websocket.WebSocketHandler):
    def open(self):
        global clients
        print "WebSocket opened..."
        clients.add(self)

    def on_close(self):
        global clients
        print "WebSocket closed..."
        clients.remove(self)

index.html模板 的相关部分：

    <script type="text/javascript">
        $(document).ready(function() {
            var ws;
            // open WebSocket for getting the results
            ws = new WebSocket("ws://" + location.host + "/ws");
            ws.onmessage = function(evt) {
                $("#display").append(evt.data + "<br>");
            };
            ws.onclose = function(evt) {alert("Server connection terminated");};

            $("#open").click(function(evt) {
                evt.preventDefault();
                $.post("/", $("#eventForm").serialize());
            });
        });
    </script>
</head>
<body>
    <h1>Event follower</h1>
    <h2>Enter the event you would like to follow</h2>
    <form id="eventForm" action="/" method="post">
        <input type="text" name="event" />
        <input type="submit" id="open" value="Submit Query" />
    </form>
    <h2>Coordinates</h2>
    <div id="display">
    </div>
</body>

加载页面时，会与服务器建立到WSHandler类的 WebSocket 连接，并将客户端添加到clients集合中。当页面关闭时，WebSocket 连接关闭，服务器会将其从集合中移除。

单击打开提交按钮时，表单将使用 AJAX 异步提交到MainHandler.post. 该方法将找出与该事件相关的坐标，并在监听客户端出现时将它们发送给它们。浏览器接收每个坐标并将其附加到display div。

于 2012-11-10T21:00:51.827 回答
1

您的函数 MainHandler 或 WSHandler 的处理程序是什么，

一次只有一个调用，因此您的语法 event = MainHandler.event 不会为您产生任何结果。

  1. 如果您的目标只是提交表单。然后在提交类型的事件中，您必须在 JS 中编写与您的提交调用相关联的帖子或获取函数，这将与服务器端的普通 tornado.web.RequestHandler 一起使用。

参考。龙卷风网络套接字聊天示例

我更新了聊天示例：

$(document).ready(function() {
    if (!window.console) window.console = {};
    if (!window.console.log) window.console.log = function() {};
    $("#messageform").live("submit", function() {
            newMessage($(this));
            return false;
     });
     $("#message").select();
    }
});

function newMessage(form) {
        var message = form.formToDict();
        var disabled = form.find("input[type=submit]");
        disabled.disable();
        $.postJSON("URL", message, function(response) {
            console.log(response);
        });
    }

    function getCookie(name) {
        var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
        return r ? r[1] : undefined;
    }

    jQuery.postJSON = function(url, args, callback) {
        args._xsrf = getCookie("_xsrf");
        $.ajax({url: url, data: $.param(args), dataType: "text", type: "POST",
                success: function(response) {
            if (callback) callback(eval("(" + response + ")"));
        }, error: function(response) {
            console.log("ERROR:", response)
        }});
    };

当您打电话时$("#message").submit()，您将在“URL”功能中收到表单数据

如果你想使用 WSHandler 那么

参考。示例链接将对您有所帮助。

看看这是否有帮助。

于 2012-11-10T18:09:02.237 回答