1.1 Tutorials: iPhone/Simple Chat

» Introduction

In this tutorial you'll learn how to build a basic chat application in iPhone using the SmartFox Objective C iPhone API. We won't however go into the iPhone SDK specific things too much and rather focus on how to use the SmartFox API, for further reference about how to do things in iPhone SDK please see the documentation included with the iPhone SDK.

» connect to the server
» log in users
» send and receive chat messages

We'll start by loading the iPhone project iPhoneSmartFoxiPhoneClient_SimpleChat.xcodeproj.

» Connection

The connection to the server is made in the INFSmartFoxiPhoneClient_SimpleChat_AppDelegate.m source file.

INFSmartFoxiPhoneClient_SimpleChat_AppDelegate.m

applicationDidFinishLaunching will be called by the iPhone OS automatically when you app launched.

We create our login screen. This is done by loading the INFSmartFoxiPhoneClient_SimpleChat_LoginViewController.xib interface builder file which we created in the Interface Builder.

UIViewController *aViewController = [[INFSmartFoxiPhoneClient_SimpleChat_LoginViewController alloc] initWithNibName:@"INFSmartFoxiPhoneClient_SimpleChat_LoginViewController" bundle:[NSBundle mainBundle]];

This xib file is linked with INFSmartFoxiPhoneClient_SimpleChat_LoginViewController.h file in the Interface Builder. INFSmartFoxiPhoneClient_SimpleChat_LoginViewController.m includes the the necessary handlers for the interface events and INFSmartFoxiPhoneClient events.

Then we add the created screen to our application's window,

[window addSubview:viewController.view];
[window makeKeyAndVisible];

create the smartFox object

smartFox = [[INFSmartFoxiPhoneClient iPhoneClient:YES delegate:self] retain];

smartFox variable holds our main INFSmartFoxiPhoneClient object which we'll use to to connect and communicate with the server.

Then we call loadConfig with autoConnect set to YES for our smartFox client to connect to the server.

[smartFox loadConfig:@"config" autoConnect:YES];

The actual connection is handled in onConnection handler.

» Login

Once a successful connection have been established, we enable the login button and the text field.

INFSmartFoxiPhoneClient_SimpleChat_AppDelegate.m

When the user taps the login button, onLoginTouchUp handler will be called in the INFSmartFoxiPhoneClient_SimpleChat_LoginViewController.m. The handler calls the login function of our application class.

INFSmartFoxiPhoneClient_SimpleChat_AppDelegate.m

» Chat

When we successfully logined to the server, the screen is will make a transition to the chat screen.

We then call

[users reloadData];

to trigger the Users tableView interface element to load itself. When triggered, it will call numberOfRowsInSection to get the number of elements and cellForRowAtIndexPath to get the element at an index.

We get the number of users,

INFSmartFoxRoom *room = [smartFox getActiveRoom];
return [[room getUserList] count];

and name of these users,

room = [smartFox getActiveRoom];
userList = [room getUserList];
userListArray = [userList allValues];
user = [userListArray objectAtIndex:indexPath.row];
cell.text = [user getName];

in the callback functions. We also call [user reloadData] when a user leaves the room or when a new user enter the room. We catch this situations with the following events.

- (void)onUserEnterRoom:(INFSmartFoxSFSEvent *)evt
- (void)onUserLeaveRoom:(INFSmartFoxSFSEvent *)evt

When the user writes a message and taps the send button, textFieldShouldReturn event is called.

We call SendPublicMessage with the content of the textbox to our currently active room and clear the textbox so it's ready for a new message.

Now lets see how we handle the reception of a public message. The event to look for is OnPublicMessage;

The event handler recieves a message string (message), and a user object (User) in an NSDictionary object; We create separate UILabel objects with different colors to store the user name and the message. Then we add them to the scrollView component as sub views. We also set the scroll position to the maximum to scroll the message area down so the last message is always visible.

» Running the chat application in iPhone Simulator / Device

You can configure the Active Configuration and Active Device settings from the top left drop down menu to run your application in debug/release modes and in the iPhone Simulator or in the iPhone Device.

Then you can click Build and Debug to run you application.