Using Communication Components > RoomList component > Using the RoomList component

  

Using the RoomList component

For this component, you'll create two applications: a lobby and a room. The lobby application acts as a starting point for the user; the room acts as a destination for the user.

Note: You must host and access this application using a web server, either locally or remotely. For example, a typical development environment hosts test applications locally on http://localhost.

The RoomList component can launch any communication application as a room. You can have several instances of the same application open, as long as each instance has a unique session.

The RoomList component does not require client-side scripting if you use it with the SimpleConnect component. The lobby application you'll create requires a main.asc file that loads the component.asc file.

The room application requires a server-side script in the main.asc file that loads the component.asc file, gets the user and room name, and manages the room and user counters. This main.asc file contains server-to-server calls to pass parameters back and forth, but none of these calls controls whether the user is actually connected to the room application. The server-side functionality simply updates the number of people displayed in each room for the lobby application and passes the name of the application to the application. This allows the room name to be displayed dynamically in each instance.

The room application that you open from the RoomList component must use the username and appInstance parameters being sent to it. If the application uses the SimpleConnect component, this process is handled automatically. For an example, see the sample_room application, which is installed with Flash Communication Server MX.

In the lobby application you'll take the following steps:

1

Add a SimpleConnect component.

2

Add a RoomList component.

3

Load the components.asc file to enhance the lobby application.

Then, in the room application you'll take these additional steps:

4

Alter the preexisting chat room application to make it a destination point.

5

Alter the HTML wrapper to pass values from the lobby application to the chat room.

The following list describes two ways to use this component:

Chat lobby: Create a central lobby or meeting place for users to congregate. Later, they can select a room to join.

Application instance launcher: Create a virtual center from which users can launch multiple instances of your application.

Note: The following example assumes you have completed the example in Using the Chat component.

 
To use the component in a lobby application:

1

Make sure Flash Communication Server is running.

2

Create a directory in the Flash Communication Server applications directory, and name it lobby_com_test.

3

In Flash MX, drag the SimpleConnect component onto the Stage.

4

In the Property inspector for the SimpleConnect component, provide the following parameters:

In the Application Directory text box, type the URI of the application that you created in Step 2: rtmp:/lobby_com_test.

Double-click the Communication Components text box. In the Values dialog box that appears, click the plus sign (+) and type the instance name of the RoomList component: roomList_mc. Click OK.

5

Drag the RoomList component onto the Stage.

6

In the Property inspector for the RoomList component, provide the following values:

Give the component the instance name roomList_mc. This value will be used in the room application's main.asc file.

In the Room Application Path text box, type the relative location of the room application, for example, ../chat_room_test/chat_room_test.html. This provides the room application HTML filename, which you will generate when you publish the chat_room_test.fla file.

7

Save and publish the file as lobby_com_test.swf.

8

In the lobby_com_test directory, create a file named main.asc with the following code:

 
load("components.asc");

 
To create a room application that works as a destination of the lobby application:

1

Make a copy of the chat_test application you created earlier in Using the Chat component. Rename the registered application's directory on your web server chat_room_test, and rename the FLA file copy chat_room_test.fla.

2

In the chat_room_test.fla file, select the SimpleConnect component on the Stage and change the Application Directory setting to rtmp:/chat_room_test.

3

In the Property inspector for the SimpleConnect component, give the component the instance name connector_mc. This value will be called from the destination room's main.asc file.

4

Save and publish the file as chat_room_test.swf.

When you publish your application, Flash MX generates a chat_room_test.html file.

5

Open the chat_room_test.html file in an HTML editor and replace the <BODY>...</BODY> tag, and everything within it, with the following code:

 
<BODY bgcolor="#FFFFFF">
<SCRIPT LANGUAGE=JavaScript1.1>
<!--
	// This extracts any parameters passed to the HTML document
	// and passes them directly to the Flash movie
	var appURL = String(document.location);
	if (appURL.indexOf("?") != -1) {
		var appParams = appURL.substr(appURL.indexOf("?"));
	} else {
		var appParams = "";
	}
	document.write('<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');
	document.write('  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" ');
	document.write(' ID="chat_room_test" WIDTH="550" HEIGHT="300" ALIGN="">');
	document.write(' <PARAM NAME=movie VALUE="chat_room_test.swf' + appParams + '"> ');
	document.write(' <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> ');
	document.write(' <EMBED src="chat_room_test.swf' + appParams + '" quality=high bgcolor=#FFFFFF  ');
	document.write(' swLiveConnect=FALSE WIDTH="550" HEIGHT="300" NAME="chat_room_test" ALIGN=""');
	document.write(' TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">');
	document.write(' </EMBED>');
	document.write(' </OBJECT>');
//-->
</SCRIPT><NOSCRIPT>This application requires JavaScript support</NOSCRIPT>
</BODY>

Note: The HTML extracts the parameters from the URL and passes them to the room application. This works properly only when you view the pages from a web server, such as http://localhost. Also, the element values must match the destination room's application and SWF filename. In the HTML above, for example, you use chat_room_test and chat_room_test.swf. If you publish your movie again from Flash MX, you will overwrite this HTML file.

6

Next, you'll add the code to the chat_room_test application's main.asc file to make it a destination for the lobby application.

Note: The main.asc file in the chat_room_test directory should already contain the following server-side ActionScript:

 
// Load the utility file
load("components.asc");

In the main.asc file of the chat_room_test application, write an onConnect handler that adds the user to the global list of clients, accepts the user connection, and makes the call to get the room instance name and update the room count.

 
application.onConnect = function( newClient, username, password ) {

	// Save the user name
	gFrameworkFC.getClientGlobals(newClient).username = username;

	// Accept the new user's connection
	application.acceptConnection(newClient);
	
	// Get the instance name and update the room count
	if (this.name.indexOf("/") != -1) {
		newClient.room = this.name.substr(this.name.lastIndexOf("/")+1);
		roomConnect(newClient);
	}
}

7

Write a roomResult handler to receive the result of the roomConnect call, and pass the result to the SimpleConnect component.

 
function roomResult(newClient) {
	this.onResult = function(roomName) {
		// "connector_mc" must match the instance name
		// of the SimpleConnect component
		newClient.call("FCSimpleConnect/connector_mc/roomName",
									null,
									roomName);
	}
}

8

Connect to the lobby to retrieve the room name the user selected, and call roomResult with the return value.

 
function roomConnect (newClient, room) {

	// Create a new NetConnection
	lobby_nc = new NetConnection();
	
	// If the connection to the lobby is successful,
	// make a server-to-server call, passing the room
	// that the user just joined as a parameter. This call
	// updates the number of users displayed in the lobby
	// and returns the name of the room back to the result object.
	lobby_nc.onStatus = function (infoStatus) {
		if (infoStatus.code == "NetConnection.Connect.Success") {
			// "roomlist_mc" must match the instance name of
			// the RoomList component
			lobby_nc.call("FCRoomList/roomlist_mc/roomConnect",
										new roomResult(newClient),
										newClient.room);
		}
	};
	// Connect to the lobby application
	lobby_nc.connect("rtmp://localhost/lobby_com_test");

}

9

Write an onDisconnect handler that notifies the lobby application.

 
// When the user disconnects, tell the lobby application
application.onDisconnect = function( client ) {
	if (client.room != null) {
		roomDisconnect(client.room);
	}
}

10

Adjust the room count and remove the user from the display.

 
function roomDisconnect (room) {

	// Create a new NetConnection
	lobby_nc = new NetConnection();
	
	// If the connection is successful then make a server-to-server call
	// that will decrement the number of users displayed in the specified room
	lobby_nc.onStatus = function (infoStatus) {
		if (infoStatus.code == "NetConnection.Connect.Success") {
			// "roomlist_mc" must match the instance name of
			// the RoomList component
			lobby_nc.call("FCRoomList/roomlist_mc/roomDisconnect", null, room);
		}
	}
	
	// Connect to the lobby application
	lobby_nc.connect("rtmp://localhost/lobby_com_test");
}

11

Save main.asc and reload your application from the Communication App Inspector.

 
To test the RoomList component:

1

Open the lobby_com_test.html file from a web browser and log in.

2

Select Create Room to add a room to the room list.

3

Click the room you created and click Join Room.

An instance of the chat_room_test application opens in the browser.

4

You can chat and change your text color.

5

Open another instance of the lobby_com_test application and log in as a different user to simulate a multiuser chat session.

 
RoomList component Property inspector

Name

Variable

Description

Room Application Path

roomPath

String; provides the path to the application that launches when you join a room. The path can be absolute or relative.