Question

我在Tornado框架中使用WebSockets，无法将html格式的数据发送到龙卷风类。

这是我的代码：

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

'已过滤'只会打印一个空列表：“已过滤[]”。

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>

Answer 1

就像Tornado文档中的示例一样，我将为WebSocket客户端使用set。改善这一点是留给读者的练习。

# 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>

加载页面时，将Web服务器与服务器连接到WSHandler类，并将客户端添加到clients集。当页面关闭时，WebSocket连接将关闭，服务器将从集合中删除它。

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

Answer 2

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

只有其中一个人一次调用你的语法 event = MainHandler.event不会为您产生任何结果。

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

参考。 tornado web socket chat example

我更新了聊天示例：

$(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()时，您将在“网址”功能

如果您想使用WSHandler，那么

<强>参考。 example link会对您有所帮助。

看看这是否有帮助。

Tornado类未收到HTML表单数据

2 个答案: