Streaming CZML into Cesium using HTML5 EventSource

Question

I'm currently looking into using Cesium as a way of visualising data for a personal project, and real-time updates would be a great thing to be able to do.

Reading the wiki, I found this section which outlines how dynamically updating objects in Cesium can be accomplished using the HTML EventSource API.

I have written a rather simple server in Node.js that creates a text/event-stream which sends out updates of an object's position periodically. This part works fine and I can successfully connect to and log this data to the console.

My problem lies with Cesium. I've spent hours digging through the documentation (both the Github wiki and the JSDoc documentation included with the download) and I can't figure out how to get my CZML to be added to the globe. Using the Cesium Viewer application provided with the source code I can see how CZML files can be loaded from both local and remote resources, but I can't figure out how to modify this approach to ingest CZML packets coming in from EventSource events.

A sample of my CZML packets:

{
  'id': 'myObject',
  'availability': '2014-01-15T00:00Z/2014-01-01T24:00Z',
  'point': {
    'color': {
      'rgba': [255, 255, 0, 255]
    },
    'outlineWidth': 2.0,
    'pixelSize': 3.0,
    'show': true
  },
  'position': {
    'cartesian': [0.0, -2957000.0, -840000.0, 5581000.0],
    'epoch': '2014-01-01T00:00Z',
    'interpolationAlgorithm': 'LINEAR',
    'interpolationDegree': 1
  }
}

My current approach is as follows:

var czmlStream;
var czmlStreamUrl = 'http://127.0.0.1:8080/czml-stream';

viewer.dataSources.add(czmlStream);

var czmlEventSource = new EventSource(czmlStreamUrl);
czmlEventSource.addEventListener('czml', function(czmlUpdate) {
  czmlStream.load(JSON.parse(czmlUpdate.data));
}, false);

Unfortunately, this doesn't work. I based it on how a static CZML file can be loaded:

var source;
var sourceURL = 'http://127.0.0.1/czml-static.czml';

source.loadUrl(sourceURL).then(function() {
  viewer.dataSources.add(source);
}

Does anyone know where I am going wrong, or better yet, the right way of doing this? I am using Cesium b24 in case that makes a difference. If you need any more information from me to be able to assist please ask and I'll update the question.

I have tried Googling for a solution and example code but I can't find anything except the wiki page describing how EventSource could be used.

Answer 1

I know this question is a few weeks old, but did you ever figure this out? From the above example, the first thing I notice is that you are calling czmlStream.load instead of czmlStream.process. load clears out an existing data while process doesn't. For streaming, calling load results in only the last packet ever showing up.