在没有Socket.io的Backbone.js应用程序中使用WebSocket
我是主干网新手,我正在尝试构建一个主干网应用程序,该应用程序可以实时绘制和映射数据。我实现了一个websocket,下面是示例代码。问题是,我想使用比示例代码更广泛的数据集,如果我理解代码,它只是创建一个模型——一个点数组。我想要一个模型集合,其中每个模型都有纬度、经度和数量(只是一个数值)在没有Socket.io的Backbone.js应用程序中使用WebSocket,backbone.js,websocket,Backbone.js,Websocket,我是主干网新手,我正在尝试构建一个主干网应用程序,该应用程序可以实时绘制和映射数据。我实现了一个websocket,下面是示例代码。问题是,我想使用比示例代码更广泛的数据集,如果我理解代码,它只是创建一个模型——一个点数组。我想要一个模型集合,其中每个模型都有纬度、经度和数量(只是一个数值) 我如何实现websocket,以便当我的后端发送一些JSON时,我的应用程序使用这些属性创建一个新模型?我在博客上读到,我需要覆盖Backbone.sync并实现一个事件聚合器,但我所看到的唯一的例子是使用
我如何实现websocket,以便当我的后端发送一些JSON时,我的应用程序使用这些属性创建一个新模型?我在博客上读到,我需要覆盖Backbone.sync并实现一个事件聚合器,但我所看到的唯一的例子是使用socket.io。由于我在后端使用的语言/框架,Socket.io不是一个选项。此外,最终我会将后端切换到socket.io不支持的另一种语言,因此我想找到一种更通用的方法,在前端实现websocket,而不涉及像socket.io这样的库。我找到了一个解决我自己问题的有效方法。再说一次,我对主干网还不熟悉,所以我不确定这是否是最好的方法——我想知道这个解决方案是否遵循了最佳实践。代码基于Andrew Cholakian编写的。我在中保留了一些打印语句,这些语句在运行代码时非常有用 代码假定您的后端正在以
{数据:{lat:纬度,“long”:经度,“amt”:金额}
基于WebSocket上的WAMP协议,您可以使用它,它允许您在本机WebSocket上使用主干资源。没有额外的依赖关系
// 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 });
});