Usar websockets en una aplicación Backbone.js sin Socket.io

Question

Soy nuevo en Backbone y estoy intentando construir una aplicación Backbone que grafica y mapea datos en tiempo real. Implementé un websocket siguiendo este código de ejemplo. El problema es que me gustaría usar un conjunto de datos más extenso que el código de ejemplo, y si entiendo el código, solo estoy creando un modelo: una única matriz de puntos. Quiero una colección de modelos en la que cada modelo tenga latitud, longitud y cantidad (solo un valor numérico).

¿Cómo implemento un websocket de modo que cuando mi back-end envíe algo de JSON, mi aplicación cree un nuevo modelo con esos atributos? He leído en blogs sobre esto que necesito anular Backbone.sync e implementar un agregador de eventos, pero los únicos ejemplos que he visto de esto usan socket.io. Socket.io no es una opción debido al lenguaje / framework que estoy usando en back-end. Además, con el tiempo cambiaré el backend a otro idioma que tampoco es compatible con socket.io, así que me gustaría encontrar una forma más general de implementar el websocket en la interfaz que no involucre una biblioteca como socket.io.

Answer 1

Puede usar Backbone.WS que le permite usar recursos Backbone sobre WebSockets nativos. Sin dependencias adicionales!

Answer 2

He encontrado una solución a mi propia pregunta que funciona. De nuevo, soy nuevo en Backbone, por lo que no estoy seguro de si esta es la mejor manera: me interesaría saber si esta solución sigue las mejores prácticas. El código está basado en este ejemplo de Andrew Cholakian. Mantuve algunas declaraciones impresas que son útiles cuando ejecuta el código.

El código asume que su backend está enviando datos JSON en la forma de {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 });
});

Answer 3

Puede usar backbone.wamp , basado en el protocolo WAMP sobre WebSocket