Pusher showcase showing my location in real time

Just get in touch with Pusher and have a simple apps online, an apps that is able to show my location on Google Map in real time.

Use your HTML5-enabled browser such as Google Chrome, or iPhone device, and pointed to this URL http://fyhao.com/showcase/p/map.html, and then you will see my (fyhao) location on Google Map in real time.

By right, at the first time you visit this web page, you will see a text indicating “Connecting…” at the top left, it will change to “Connected” and disappeared after sometimes, depend on your device and network location. (At the time of writing, I try to use Google Chrome on Mac to access but it is damn slow, however, iPhone is very fast to connect)

After that, you may see “Updated” text fade in and fade out at the top left, indicated that the map had been updated. Now, your job is just waiting the map to be updated without refreshing the browser screen. If nothing happened, meant there is no any new updated information from me.

How it works? I will create another script to get my current location using HTML5 Geolocation API and send the location to Pusher for about 3 seconds interval, and it will immediately update your screen with my latest location. But I will not open my phone’s screen to point to this page for longer time, so you may not see any updated for certain times..

 

Conclusion

Pusher is an amazing tool to easily integrate real time feature in our web apps and mobile apps. Using the Pusher API is very easy, and there are many industry use case, see the Pusher examples here.

Author: fyhao

Jebsen & Jessen Comms Singapore INTI University College Bsc (Hon) of Computer Science, Coventry University

Leave a Reply