HTML and CSS Reference
This demonstrates how to use the WebSocket API and gives you a glimpse of how useful it could be. But, as
we covered in Chapter 1, the WebSocket API is not fully supported in all browsers just yet, and we need a fallback
mechanism. As a result, implementing realtime apps can be cumbersome, tricky, and extremely time-consuming if
we have to handle browser compatibility issues ourselves.
Fortunately for the rest of us, there are a number of services out there that have overcome these hurdles and created
APIs that start by checking for WebSocket support; then regressively check for the next-best solution until they find one
that works. The result is powerful realtime functionality without any of the headache of making it backward-compatible.
Among these companies offering realtime services, Pusher stands out for its extreme ease of implementation,
free accounts for services that don't have large user bases, great documentation, and helpful support staff.
functionality such as auto-reconnection and a Publish/Subscribe 12 messaging abstraction through its API, which can
make it much easier to use than simply dealing with generic messages, as would be the case if we used the native
Finally, because Pusher is a hosted service, it will handle maintaining the persistent connections over which data
will be delivered and can deal with scaling to meet demand for us. Although this latter point might not be a big deal
for our sample application, it's a valid consideration when you are building a production application.
For those reasons, we'll be using Pusher in this topic to build our realtime.
Why Do We Need It?
Pusher will allow you to add realtime notifications and updates to the application, including the following:
• Updating all users when a new question is added: This means that when a user adds a
new question, all users currently using the app in that room will receive the new question
• Updating attendees when the presenter marks a question “answered”: When the presenter
answers a question, marking it “answered” will instantly update all attendees' devices to
• Updating the presenter when more than one attendee wants the same question answered:
If more than one user is interested in having a question answered, they can upvote that
question. The presenter will receive a visual indication to let them know that the question is
• Updating all attendees when a room is closed: When the presenter closes the room,
attendees need to be updated so they know not to ask any questions that won't be answered.
What Role Does It Play?
Pusher will play the role of the app's nervous system: it will be informed when changes are made and relay that
information to the brains of the app so that they can process the information.