5

我是 Backbone 的新手，我正在尝试构建一个实时绘制和映射数据的 Backbone 应用程序。我按照这个示例代码实现了一个 websocket 。问题是，我想使用比示例代码更广泛的数据集，如果我理解代码，它只是创建一个模型——单个点数组。我想要一个模型集合，其中每个模型都有纬度、经度和数量（只是一个数值）。

如何实现 websocket，以便当我的后端发送一些 JSON 时，我的应用程序会创建一个具有这些属性的新模型？我在博客上读到我需要重写 Backbone.sync 并实现一个事件聚合器，但我见过的唯一例子是使用 socket.io。由于我在后端使用的语言/框架，Socket.io 不是一个选项。此外，最终我会将后端切换到socket.io也不支持的另一种语言，所以我想找到一种更通用的方法来在前端实现websocket，而不涉及像这样的库套接字.io。

4

3 回答 3

4

我找到了解决我自己的问题的方法。再说一次，我是 Backbone 的新手，所以我不确定这是否是最好的方法——我会对这个解决方案是否遵循最佳实践的反馈感兴趣。该代码基于Andrew Cholakian 的这个示例。我保留了一些打印语句，当您运行代码时它们会很有帮助。

该代码假定您的后端以以下形式发送 JSON 数据 {data: "{"lat": latitude, "long": longitude, "amt": amount}"}

// this function opens the websocket and will trigger add_point when
// a new message is received
Stream = function () {
    _.extend(this, Backbone.Events);
    var self = this;

    self.socket = new WebSocket("ws://" + document.domain + ":5000/websocket");
    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('add_point', JSON.parse(e.data));
    };

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

DataPoint = Backbone.Model.extend({
    defaults: {
        lat: null,
        long: null,
        amt: null
        }
});

DataSet = Backbone.Collection.extend({
    model: DataPoint,
    initialize: function(options) {
        this.stream = options.stream;
        var self = this;
        this.stream.on("add_point", function(pt) {
            self.add( new DataPoint({
                lat: pt.lat,
                long: pt.long,
                amt: pt.amt
            }));
            console.log('updated collection');
            console.log(self.models);
        });
    }
});

MapView = Backbone.View.extend({
    initialize: function(options) {
        this.dataSet = options.dataSet;
    }
});

$(function() {
    var stream = new Stream();
    var dataSet = new DataSet({ stream: stream });
    var mapView = new MapView({ dataSet: dataSet });
});
于 2013-01-31T22:53:05.473 回答
1

您可以使用Backbone.WS，它允许您在原生 WebSockets 上使用 Backbone 资源。没有额外的依赖！

于 2015-08-11T11:45:27.090 回答
0

您可以使用基于 WebSocket 上的 WAMP 协议的骨干网.wamp

于 2015-05-14T16:41:39.803 回答