HTML and CSS Reference
When you create a new pusher instance, a new connection will be established to the pusher service.
the next thing to do is to check if you are connected. You can do this manually by using the pusher Debug Console,
one of the developer tools we mentioned earlier. to do this, go to the pusher Dashboard for your application and
click the Debug Console link. Now, in a different browser window, open up your new htML document. If you take a
look at the pusher Debug Console, you'll see that a new Connection has been listed, as in Figure 3-2 .
Figure 3-2. Pusher Debug Console
You can also check that a connection has been established within your code by binding to events on the
pusher.connection object. 5 this can be useful if you want to give the user feedback about the connection status
or if you need the application to act differently when a connection is not available—if the user is currently offline.
as mentioned earlier, pusher uses the concept of events, and this is also the case when monitoring connection
state. In the code below we'll bind to the state_change event and display the current state in the page. the code
changes required to achieve this are shown in bold:
<meta charset="utf-8" />
<title>Realtime Web Apps – Exercise 3-2</title>