Exercise 1: Getting connected

Connecting to the Kwwika service

In this exercise we will connect to the Kwwika service. To do this you need to add the KwwikTag (Kwwika JavaScript API script tag) to your page and connect using the API. You should then connect to the Kwwika service using the kwwika.connect() call.

Adding the KwwikTag

Adding the KwwikTag is very simple. Just add the following script tag to within the <head> tag in your web page.

<script type="text/javascript" src="http://api.kwwika.com/latest/"></script>

kwwika.connect()

In a new <script> tag use the Kwwika API to connect to the Kwwika service and pass a connection listener. Write some JavaScript in theconnectionStatusUpdated method to update the web page to display the current connection status.

Hints & Tips

Helper "log" function

Each exercise contains a method called log(sMsg) to help you develop during your exercise.

Note: You can only call the log function once the full page has loaded since it relies on the <div id="debuglog"></div>

HTML

An example of the connection status area we used. You could do something similar.

</div>

Elements you want to refer to again from code (e.g. to modify them in some way) should have an id attribute defined.

Images

We’ve given you some png images to use for the different connection states. These are in the images folder.

Changing an image from Javascript

document.getElementById(elementId).setAttribute("src",imgurl);

e.g. elementId might be connection_status_image and imgurl might be "images/connecting.png"

You can also change the alt attribute to adjust what (most) browsers will show on hover, or if images are turned off.

Changing the contents of an HTML element

document.getElementById(elementId).innerHTML = sHtml;

Where elementId is a string containing the id of the element you want to change the contents of and sHtml is a string containing what you want the new HTML to be. If you want to append the new html rather than replace it entirely you can use +=. In this case, if you've used a similar HTML to us, you'd make the elementId connection_status_message to change the message.

Kwikka connection API

// Define a connection listener object

var ConnectionListener = function() {

// Define the call back

this.connectionStatusUpdated = function(sStatus) {

// code to react to changes in connection status go here.

}

};

var oConn = kwwika.connect(new ConnectionListener());

Statuses that connectionStatusUpdated can get called with:

kwwika.ConnectionStatus.CONNECTING:

kwwika.ConnectionStatus.RECONNECTED:

kwwika.ConnectionStatus.CREDENTIALS_RETRIEVED:

kwwika.ConnectionStatus.CONNECTED:

kwwika.ConnectionStatus.LOGGED_IN:

See: The kwwika.ConnectionStatus API documentation.

Next exercise is Exercise 2: Subscribing

	Search this site