3

Flask/Python サーバーが緯度と経度のデータを websocket を介してフロント エンドに送信するバックボーン アプリを構築しています。各位置は、D3 を使用してリアルタイムでプロットされます。Websocket を開閉する開始ボタンと停止ボタンが必要です。Websocket を閉じる方法がわかりません。停止ボタンが実際に locMap.model.stream.socket.close(); をトリガーしていることを確認しました。私はバックボーンに非常に慣れておらず、アプリの開始と停止のために書いたjQueryがどこに行くべきなのかもわかりません。これが私のコードです（無関係なD3コードの一部が削除されています）：

// Initialize the websocket and wrap it in a Backbone Event
LocationStream = function () {
    this.addr = "ws://" + document.domain + ":5000/websocket";
    _.extend(this, Backbone.Events);
    var self = this;

    self.socket = new WebSocket(this.addr);
    console.log("Using a standard websocket");

    self.socket.onopen = function(e) {
        self.trigger('open',e);
        console.log('socket opened');
    };

    self.socket.onerror = function (e) {
         self.trigger('error', e);
    };

    self.socket.onmessage = function (e) {
        self.trigger('message', e);
        self.trigger('data', e.data);
        self.trigger('point', JSON.parse(e.data))
    };

    self.socket.onclose = function (e) {
        self.trigger('close', e);
        console.log("socket closed");
    };
    self.socket.onerror = function (e) {
        self.trigger('error', e);
    };
 };

// Models

// Create a Backbone model to keep track of streaming location data
LocationSequence = Backbone.Model.extend({
    initialize: function (opts) {
        this.stream = opts.stream;
        var self = this;
        this.stream.on('point', function (pt) {
            var points = self.get('points');
            var updated = (new Date()).getTime();
            var coordinates = projection([pt.long, pt.lat]);
            points.push([updated, coordinates]);
            self.set({points: points, last_update: updated});
        });
     },
            defaults: {
                points: []
            }
     });

// Views

// Add a #locations 'g' element to the SVG containing the map of the US
// location points will be appended to this element
var LocationMap = Backbone.View.extend({
         initialize: function () {
         d3_map.append("svg:g")
             .attr("id", "locations");
         this.model.on('change', this.render, this);
     },
         render: function () {
         var locations = d3_map.select("#locations").selectAll('circle')
             .data(this.model.get('points'),
                 function (d) { return d[0]; });
         locations.enter()
            .append("svg:circle")
             .attr("id", "circle")
             .attr("cy", function(d) { return d[1][1]; })
             .attr("cx", function(d) { return d[1][0]; })
             .attr("r", 4.5);
     },
 });

 $("#start").click(function () {
     var locStream = new LocationStream();
     var locations = new LocationSequence({stream: locStream});
     var locMap = new LocationMap({model: locations});
     console.log("start triggered");

     $("#stop").click(function () {
         locMap.model.stream.socket.close();
     });
 });
4

1 に答える 1

0

私は密集していますか、それともこれでうまくいきませんか:

locStream.socket.close();

申し訳ありませんが、私はこれを見たばかりで、あなたが答えを得たかどうか疑問に思っていました. コメントするランキングもないので、この「回答」にせざるを得ませんでした。

あなたがそれを解決したかどうか私たちに知らせてください！

于 2013-10-31T21:42:28.753 に答える