5

TornadoフレームワークでWebSocketを使用していますが、トルネードクラスに送信する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

'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のドキュメントの例のようにset、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接続が閉じられ、サーバーはそれをセットから削除します。

[送信を開くMainHandler.post]ボタンをクリックすると、フォームはAJAXを使用して非同期に送信されます。このメソッドは、そのイベントに関連する座標を見つけて、リスニングクライアントが到着したときにそれらを送信します。ブラウザは各座標を受け取り、それをディスプレイ divに追加します。

于 2012-11-10T21:00:51.827 に答える
1

関数MainHandlerまたはWSHandlerのハンドラーは何ですか。

一度に呼び出すのはそのうちの1つだけなので、構文 event = MainHandler.event によって結果が生成されることはありません。

  1. フォームを送信することだけが目的の場合。次に、送信タイプのイベントで、JSで送信呼び出しに関連付けられた投稿またはget関数を作成する必要があります。これは、サーバー側の通常のtornado.web.RequestHandlerで機能します。

参照。トルネードWebソケットチャットの例

チャットの例を更新しました：

$(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 に答える