The Chat App Walkthrough

*We assure you that we do not spam. You may receive occasional emails from us.
 You can always unsubscribe.
AppWarp SDKs
AppWarp Concept
Tutorials
ebook

The Chat App Walkthrough

The Chat App’ is developed using the v1.2 of HTML5 SDK of AppWarp. v1.2 involves the major changes in the listener pattern, instead of objects, functions are used to listen to the events. Also from v1.2 you can only define listeners that you want to use instead of declaring all listeners as was done in previous releases of SDK. One of the major changes is also the introduction of AppWarp namespace. All the functions, constants and classes are defined inside ‘AppWarp’ Namespace. The WarpClient is a singleton class, so you must use getInstance() to get the instance.

View Source Code here

Try it here

Samples
Chat sample 1
The Chat App Walkthrough
The Chat Sample 3
var _warpclient;	
  AppWarp.WarpClient.initialize(apiKey, secreteKey);
  _warpclient = AppWarp.WarpClient.getInstance();

To set listeners, use setResponseListener() and setNotifyListener()

_warpclient.setResponseListener(AppWarp.Events.onConnectDone, onConnectDone);
  _warpclient.setNotifyListener(AppWarp.Events.onChatReceived, onChatReceived);

The Chat App Uses Twitter Bootstrap for Looks. We have used jQuery to handle the events.



Initially the user, has to enter a name in text box. Once a name is entered and continue button is pressed, We initialize the AppWarp SDK, sets the listeners and connects to the AppWarp Server. 

$("#nameBtn").click(function(){
                    
	if($("#nameText").val() != "")
	{
		nameId = $("#nameText").val();
						
		$("#nameRow").hide();
		$("#roomsRow").show();
									
		$("#roomInfo").html("Connecting...");
		AppWarp.WarpClient.initialize(apiKey, secreteKey);
		_warpclient = AppWarp.WarpClient.getInstance();
		_warpclient.setResponseListener(AppWarp.Events.onConnectDone, onConnectDone);
		_warpclient.setResponseListener(AppWarp.Events.onGetAllRoomsDone, onGetAllRoomsDone);
		_warpclient.setResponseListener(AppWarp.Events.onGetLiveRoomInfoDone, onGetLiveRoomInfo);
		_warpclient.setResponseListener(AppWarp.Events.onJoinRoomDone, onJoinRoomDone);
		_warpclient.setResponseListener(AppWarp.Events.onSubscribeRoomDone, onSubscribeRoomDone);
		_warpclient.setResponseListener(AppWarp.Events.onLeaveRoomDone, onLeaveRoomDone);
		_warpclient.setResponseListener(AppWarp.Events.onUnsubscribeRoomDone, onUnsubscribeRoomDone);
		_warpclient.setNotifyListener(AppWarp.Events.onChatReceived, onChatReceived);
		_warpclient.connect(nameId);
	}
});

The listener functions are defined outside the document.ready() function. Once the client is connected to the server, we search for all rooms and added them in the sidebar, from where user can select a room to join in.

function onConnectDone(res)
{
    if(res == AppWarp.ResultCode.Success)
    {
        $("#roomInfo").html("Connected");
        $("#chat").html("Getting Rooms!!!!");
        _warpclient.getAllRooms();
    }
    else
    {
        $("#roomInfo").html("Error in Connection");
    }
}

The user can then select the room from side bar and join it. Programmatic-ally we first join the room and on success we subscribe that room. Once you are in room, start sending chat messages. 

$("#chatBtn").click(function()
{
    if(inRoom == true)
    {
        if($("#chatText").val() != "")
        {
            _warpclient.sendChat($("#chatText").val());
            $("#chatText").val("");
        }
    }
});

The onChatReceived() handles the chat messages arriving from the server. 

function onChatReceived(chat)
{
    $("#chat").html("
"+chat.getSender() + "
" + chat.getChat() + "
" + $("#chat").html());
}

This is how, a very basic chat app can be easily developed in no time with AppWarp. You can extend this chat app and create a complex chat app by adding features like facebook integration, etc.