How to obtain live data with websockets?

[MattFox]

Hi again all,

Am running Mango 3.2.1 and am attempting to create updating GPS points on the mapbox gl map library.
Am hitting a bit of a wall with how I can update longitude and latitude variables in real time in which I can push to the map. I could use Ajax but polling doesn't seem like a good idea to me and I would prefer to keep the app as lightweight as possible. With regards to this I feel it would be wiser to learn how to hook into the websocket connection. If I can have some advice or even an idea where to get some inspiration from I'd be grateful. Thanks
Fox

[Jared Wiltshire]

Hey @MattFox are you doing this inside a custom page or dashboard? Are the lat/long values coming from an alphanumeric data point?

edit. If you are going to connect to the websocket yourself independently to the Mango AngularJS environment I'd suggest looking at the frames in Chrome's developer tools e.g.

[MattFox]

@Jared-Wiltshire, twice in one week eh?
Haha, yes custom dashboard derived from your admin template in the overrides folder. Variables are Alphanumeric.
I can see the frames but I was not sure if I need to connect by writing my own websocket connection method and subscribing to the /point-values URL or if I could utilise what's already there to accomplish the same thing.
Seeing how it connects when you log in I'd imagine I would just have to tap into the connection and add additional subscriptions to the GPS points I require - does that seem like a fair assumption?

[Will Geller]

Just to chime in, If you are interested we have already built a component for working with the google map library. There is an example here /ui/examples/utilities/google-maps that shows how you can interact with the markers and set marker position based on lat/long values.

A lot less work then writing your own websocket subscription code to get data to MapBox library. There also may be AngularJS directives written that wrap MapBox and if you bring that in you could just bind the lat/long data in with HTML as we do with our map component.

Here's one for example: http://licyeus.github.io/angular-mapbox/

[MattFox]

That's the problem, it's the ability to bring the data in, I cannot pull the data in and bind it fast enough before the map loads.
Despite using AJAX with promises I still have undefined value errors. It would be good to have the data ready for when I initialise the map page. That and the fact I'm updating polygons, not individual coordinates.
I'm either going at this at the completely wrong angle or some more advice is required. This is likely due to my limited knowledge of angular but I'd rather not have to start over and use google maps if I can help it. Only as a last resort.

[Jared Wiltshire]

@mattfox said in How to obtain live data with websockets?:

twice in one week eh?

I aim to please :D

@mattfox said in How to obtain live data with websockets?:

I can see the frames but I was not sure if I need to connect by writing my own websocket connection method and subscribing to the /point-values URL or if I could utilise what's already there to accomplish the same thing.

Yeah since you are using our framework you can definitely use our AngularJS services to get the values via websockets.

@mattfox said in How to obtain live data with websockets?:

That's the problem, it's the ability to bring the data in, I cannot pull the data in and bind it fast enough before the map loads.

There should be a way to set the data via the Mapbox API after the map loads.

Here's an example of how to use the websockets from app.js. This is an example of injecting the maPointEventManager service into the run() block, this will subscribe to the events when the app first runs. You could also do this from a controller or a directive's controller.

myApp.run(['maPointEventManager', function(maPointEventManager) {
    const eventTypes = ['REGISTERED', 'UPDATE', 'TERMINATE', 'INITIALIZE'];
    const handler = (event, payload) => {
        console.log(event, payload);
        // handle the payloads here and call the Mapbox API
    };
    
    // subscribe to the datapoints you want
    maPointEventManager.subscribe('DP_370045', eventTypes, handler);
    maPointEventManager.subscribe('DP_394777', eventTypes, handler);
    maPointEventManager.subscribe('DP_222324', eventTypes, handler);
}]);

[MattFox]

@Jared-Wiltshire thank you so much!
I'll get started and will see what I can pull off. Was ready to do the token 'beat head against keyboard' in a fit of ennui... :D