The related source file for
this article is found in the "Examples/advancedChat" folder
under the name of "advancedChat.fla".
In this tutorial we will expand the concepts learned so far and
we will enhance the "SimpleChat" demo to make it a more
advanced chatting application.
The picture below shows the main GUI (graphical user interaface)
of the "AdvancedChat"
Here's a list of the features that we're going to add to our previous
- A roomlist:
it will show every room available with realtime user count
you will be able join any room by clicking on it
you will be able to join password protected rooms
you will be able to create new rooms (with password also)
- A better UserList:
by clicking on one user you will be able to send a private message
- An exit button:
by clicking it you will log out of the chat.
[ THE ROOMLIST ]
By opening the source .FLA file you will notice that the code in
the first two labels is almost identical to the previous sample,
so you can safely position the playhead on the "chat"
The first thing you should notice in the GUI is the presence of
a new listbox called roomList_lb.
Now open the Actionscript panel (F9) and inspect the code for
the onRoomListUpdate() event:
- smartfox.onRoomListUpdate = function(roomList)
- for (var i in roomList)
- var room = roomList[i]
- roomList_lb.addItem(room.getName() + " (" + room.getUserCount() + ")", room.getId())
- roomList_lb.sortItemsBy("label", "ASC")
- // Join the default room
The first line makes sure that no item is present in the listbox.
Then we proceed by iterating through the roomList
array and we add each room name to the listbox (plase note that
the label is built by joining the room name and the user count for
Once the list is populated we can sort it in ascending alphabetical
Just like we did in the other tutorials we call the autoJoin()
method to automagically join the default room.
using the autoJoin() method is not mandatory but it is usually easier,
if you always need to bring the "just-arrived" users in
a default room. Also the autoJoin() method works
only if you have defined an autoJoin room in the zone, if none was
defined the call will fail.
[ UPDATING THE ROOM STATUS ]
Now that we have a complete list of rooms with the number of users
for each of them how do we know
when something changes? What happens if two users exit one room?
SmartFoxServer will send you notices of these changes, so all we
need to do is writing the appropriate handler for the onUserCountChange
- smartfox.onUserCountChange = function(roomObj)
Every time the event is fired the server passes a Room object
that represents the room in which the change occured.
We have setup a simple function called updateRoomStatus
that will take care of changing the label in the room list component.
- function updateRoomStatus(roomId)
- var room = smartfox.roomList[roomId]
- var newLabel = room.name + " (" + room.getUserCount() + ")"
- for (i=0; i < roomList_lb.getLength(); i++)
- var item = roomList_lb.getItemAt(i)
- if (roomId == item.data)
- roomList_lb.replaceItemAt(i, newLabel, item.data)
The function takes the id of the room and loops through the list
box items until it finds the right item.Then it changes its label
updating the user count.
This technique should feel familiar to you at this point.
[ JOINING ANOTHER ROOM ]
At the very beginning of the code you will find these lines:
- // Setup components callback functions
They set the name of the function to call when an item in the list
component is clicked. We'll concentrate on the changeRoom() method
- function changeRoom()
- var item = roomList_lb.getSelectedItem()
- // new Room id
- var newRoom = item.data
- if (newRoom != smartfox.activeRoomId)
- // Check if new room is password protected
- var priv = smartfox.getRoom(newRoom).isPrivate()
- if (priv)
- // Save newroom as _global for later use
- _global.newRoom = newRoom
- // Pass the room id
The code checks that the room we've selected is different from
the one we're currently in, and it uses a SmartFoxClient property
that we haven't met yet: activeRoomId. This property
always holds the id of the last room we've joined.
Another important check we have to do is controlling if the room
is password protected.
- var priv = smartfox.getRoom(newRoom).isPrivate()
The getRoom(id) method returns a Room
object. The isPrivate() is a Room method:
it returns a boolean (true = password needed, false = no password).
If the room has no access restrictions we can join it by simply
using smartfox.joinRoom() and passing the room id to it.
If the room needs a password we need to do some extra operations:
1) save the id of the room we want join somewhere for later use
(_global.newRoom = newRoom)
2) show a dialog box and wait for user input (link to prev article)
3) finally send the login and password: smartfox.joinRoom(_global.newRoom,
Once the password is submitted the dialog box will call the loginProtectedRoom()
method in the main timeline:
- function loginProtectedRoom(pwd)
- smartfox.joinRoom(_global.newRoom, pwd)
which in turn sends the previously saved room Id and the password.
We have used the joinRoom() method with one argument for rooms
passwords and with two arguments when a password is needed. To
tell the truth the full set of arguments is this:
- joinRoom = function(newRoom, pword, dontLeave, oldRoom)
SmartFoxServer allows a user to be present in more than one room
at a time. This can be useful for complex applications where you
need more advanced user interaction. However to keep things simple
the joinRoom method leaves the current room by
default before entering a new one as this is the most common behaviour
for most applications.
If you need to stay in one room while joining a new one you can
pass the dontLeave parameter as true.
One more thing about the newRoom argument. You can both pass the
room Id or the room name as first parameter.
Now that we have sent our joinRoom request
we should be prepared to receive complaints by the server.
For example the server may generate an error if the room we're trying
to join is already full. Antoher error could be generated if the
password sent is wrong.
The onJoinRoomError is responsible of handling
- smartfox.onJoinRoomError = function(errorMsg)
- var win = showWindow("errorWindow")
- win.errorMsg.text = errorMsg
- // Put the selected room in the combo box back to its old value
The first two lines will show an error window and the text box
inside the dialog box will show the error message passed by the
The next line invokes the resetRoomSelected():
this is a little "trick" that we use to restore the selected
item in the room list component if the joinRoom request fails.
That's all for the first part of our "Advanced Chat"
See you in the next article.