As people RSVP to meetup events around the world, we receive the stream of RSVP’s and display them on the map in the appropriate location. Depending on the time of day, it’s fun to watch and see what parts of the world are awake and RSVP’ing to events.
Is this super useful? Maybe not, but it lets us look at how the Meetup API uses WebSockets, so just come along for the ride.
You can get all the code for this example here: https://github.com/agilityfeat/meetup-streaming
bower install must
If you take a look inside the must.js file, you’ll notice wrappers for a variety of streaming API’s: event RSVP’s, comments, check-ins, and photos. We’re just going to use the RSVP’s endpoint in this example, but you can extend our example to also display comments from users about events, check-in’s at events, or display photos as they are uploaded to Meetup in real-time.
Here is the relevant part of must.js for event RSVP’s:
Our code will need to pass a callback method to must.js so that they know where to send rsvp objects as they come in. Must.js itself is just making a call to the root webservice for streaming rsvps, and passing them back to our callback method.
By default must.js is doing this using WebSockets so that it is done in an efficient socket model, but if your browser doesn’t support WebSockets, then must.js will automatically fall back to a less efficient long polling method. Must.js checks to see if you can support WebSockets here:
Assuming that you can in fact support WebSockets, then the must.js code is going to drop down to this chunk of code for receiving call back events from the meetup API:
In this code snippet, the .onmessage event is fired whenever there is data to process from Meetup, and then the must.js code above will parse the JSON data returned, and as long as there are no errors, it calls a local method handleJson which will basically just pass the json data (now stored in the variable “ary”) along to our callback method.
You can see the complete file here, but let’s look at just a few key code snippets.
This calls to the init method, just above, where we see the two key actions that happen on page load:
Below the call to the map initialization, is this statement:
This is the call we make to tell must.js to stream all rsvp callbacks to our method display_rsvp(). Display_rsvp lives in our app.js file, and let’s look at the full method here:
This method will be called once for each rsvp that comes in from the Meetup streaming api. An object named “rsvp” will be passed into our method, and that object from Meetup contains information about the group name for the rsvp, the name of the meetup member who registered, the date and time of the meetup event, venue name, and more. We take all that information and throw it into a few div tags for display as a marker on the map.
The rsvp.venue object also contains latitude and longitude for the venue, which is obviously crucial for the google maps Marker object that we’re going to create on the map. Once the Marker and the associated InfoWindow are created, we call the google maps method to open those.
We’re dealing with real-time data from a very popular website, and so our map would fill up with markers if we didn’t close them down automatically. The last part of the display_rsvp method sets a timeout function on the Marker and InfoWindow so that they are removed from the map after a second to make space for the next set of RSVP’s coming in from Meetup.
This all makes for a fun and relatively simple way to see the power of WebSockets and real-time data streams. What free and publicly available data streams do you want to see us build an example with? Contact me at Arin@AgilityFeat.com and let me know, maybe we’ll use it as the basis of a future blog post.
You can see a live version of this example up at RealTimeWeb.co/geocode, and you can learn more about building real-time web applications in our book at RealTimeWeb.co. In this book, our team shows you how to use publish/subscribe networks and WebRTC to build real-time web applications that involve video, audio, and data applications.
Many thanks go to Allan Naranjo for his work on this example. Allan is a developer at AgilityFeat and lead developer on the example application for our RealTimeWeb.co book.