Can't close websocket in Backbone.js app - backbone.js

Question

I'm building a Backbone app where a Flask/Python server sends latitude and longitude data to the front end through a websocket. The each location will then be plotted in real-time using D3. I want to have a start and stop button which will open and close the websocket. I can't figure out how to get the websocket to close. I have checked that the stop button is in fact triggering locMap.model.stream.socket.close();. I'm very new to Backbone and am also unsure where the jQuery I wrote for starting and stopping the app is supposed to go. Here is my code (with some of the irrelevant D3 code removed):
// 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();
});
});

Answer 1

Am I being dense or would this not do it:
locStream.socket.close();
Sorry, I just saw this and was wondering if you ever got an answer. I don't have the ranking to even comment, so I had to make this "answer."
Let us know if you solved it!