HTML and CSS Reference
In-Depth Information
the Pusher object initialization and channel subscription are placed directly in the footer to take advantage of
php-powered templating.
Note
Add Event Binding for Each Supported Action
For every action that needs a realtime response, an event will be fired that needs to be “listened” for by our app.
Pusher makes this extremely easy with the bind() method, which should be familiar to any developer who has used
JavaScript in previous projects.
The bind() method takes the name of the event to be listened for as its first argument and the function to be
executed when that event occurs as its second.
Bind a function for each event in the app using the following bold code:
(function($) {
channel.bind('close', function(data){ });
channel.bind('open', function(data){ });
channel.bind('ask', function(data){ });
channel.bind('vote', function(data){ });
channel.bind('answer', function(data){ });
})(jQuery);
These bindings add virtually no overhead to the app, so binding to all five at once will not add a performance hit.
Note
these methods don't do anything just yet; you'll add that functionality in the next section.
Adding Effects
The app is now sending and receiving realtime events, so all that's left to do is add the effects that do something with
the new data.
Handling Room Events
When the presenter closes a room, it needs to be made known to the attendees immediately so they don't try to ask
any new questions or cast new votes.
Similarly, if a presenter reopens a room, all attendees should immediately be made aware that the room is now
open again.
Since the markup varies significantly from a closed room to an open one, the most straightforward and least
error-prone method of alerting attendees of changes to a room's open state is to simply refresh the page.
In init.js , create a new object called room that has two methods: open() and close() . Both should simply
reload the page when called.
 
 
Search WWH ::




Custom Search