Question

I am trying to create a shared calendar as a web app. When someone adds an event on the calendar i want everyone who shared that calendar to see that event too. When someone create an event, I made an ajax that sends the data to a database. Is there a way to send the event from server to other clients that are online on the page and share the same calendar? I did it now by constantly ‘refreshing’ the info from database.
If anyone has a clue how this can be made, please tell me.

Answer 1

Wanting a web server to “push” information back to the browser is a time old issue. The traditional way to handle this is to have any active clients (i.e. the people still logged into your app with a page open) continuously “poll” the server at a regular interval to see if there’s any new information for it. In your case, you can have some JS on the page make an AJAX call every 10 seconds to see if they have any new calendar events they should be aware of. This does increase the overall traffic to your web server so pick your polling time appropriately – otherwise you’ll cripple your web server because it will spend all of its time handling these “is there anything new?” requests when most of the time there won’t be.

If you want to be a little more cutting edge, you can look at HTML5 websockets. A google search for “html5 websockets tutorial” should give you plenty of resources. They’re a bit trickier to use and require that you are running a web server that supports them (you probably are). For browsers that support it, you can maintain a more long term open connection where you can then push data from the web server back to the browser like you want to and your JS will capture “onmessage” events with the updated info. Pointing you at google isn’t trying to flake out of a more complete answer, but there’s already a number of excellent tutorials out there so look for HTML websockets and you should be able to pull off what you’re looking to do.