Tutorials > Tutorial 4: Hello Server

  

Tutorial 4: Hello Server

This tutorial allows a user to connect to the server. The server sends back a message acknowledging that the user has connected.

 
Viewing the application

Open the tutorial_hello.html file, enter a name, and get a message back from the server that includes the name you entered.

 
Re-creating the application

This tutorial is the first to use Server-Side Communication ActionScript. In it, you write your client-side ActionScript in Macromedia Flash MX. Then, you write a corresponding function in server-side ActionScript that you store in a file called main.asc. The tutorial_hello.fla file provides the ActionScript for sending information from the server to the client.

Before you start to re-create the application, see "Creating your working environment" in Developing Communication Applications.

 
To create the user interface:

1

In the Flash MX authoring environment, select File > New to open a new file.

2

From the toolbox, select the Text tool and draw a text box. In the Property inspector (Window > Properties), select Input Text for the type of text box, select the Show Borders Around Text option, and give it the instance name User.

This is where you'll type your login name.

3

Add a dynamic text box for a debug window by selecting the Text tool and drawing another text box. In the Property inspector, select Dynamic Text for the type of text box, select the Show Borders Around Text option, and give it the instance name Message.

There is where the message from the server will be displayed.

4

To add the button for connecting to the server, open the Components panel (Window > Components) and drag a push button onto the Stage. In the Property inspector, give it the instance name Connect_btn, the label Connect, and the click handler doConnect.

5

Save the file as tutorial_hello.fla.

6

To register your application with the server, create a directory with the same name as your application, tutorial_hello, in your /applications directory in the Flash Communication Server directory.

 
To write the client-side ActionScript:

1

Select the keyframe in the Timeline and open the Actions panel (Window > Actions).

2

In the Actions panel, stop the progress of the movie.

 
stop();

3

Open a connection and handle any status messages.

 
// Open connection to the server
client_nc = new NetConnection();

// Handle status message
client_nc.onStatus = function(info) {
	trace("Level: " + info.level + "   Code: " +  info.code);
}

4

Create the event handler for the Connect button. If the user selected the button when the label was Connect, then connect to the server. If the button label is Disconnect, close the connection.

 
// Event handler for Connect_Btn
function doConnect() {
	
	// If user wants to connect...
	if (Connect_btn.getLabel() == "Connect") {
		
		// Connect to the chat application
		client_nc.connect("rtmp:/tutorial_hello/room_01", User.text);
	
		// Update button label
		Connect_btn.setLabel("Disconnect");

	// If user wants to disconnect...
	} else if (Connect_btn.getLabel() == "Disconnect") {

		// Close connection
		client_nc.close();

		// Reset button label
		Connect_btn.setLabel("Connect");

		// Reset the text fields
		user.text = "";
		message.text = "";
	}
}

5

Write the function the server will call to return the message to the client.

 
// Callback function server calls to send message back to
// this client.
client_nc.msgFromSrvr = function(msg) {

	var msg;
	_root.Message.text = msg;

}

 
To write the server-side ActionScript:

1

Create a new file using your server-side ActionScript editor, and write an event handler for when the user connects. In it, you'll receive the name passed in by the client, accept the client connection, create a message that uses the client's name, and call the client msgFromSrvr function to return the message.

 
application.onConnect = function(newClient, name) {

	// Give this new client the same name as the user name
	newClient.name=name;
	
	// Accept the new client's connection
 	application.acceptConnection(newClient);
	
	// Create a customized "Hello [client]" message
	// that the server will send to the client
	var msg = "Hello! You are connected as: " + newClient.name;
	
	// Print out status message in the application console
	trace("Sending this message: " + msg);
	
	// Call the client function, message, and pass it the msg
	newClient.call("msgFromSrvr", false, msg);
}

2

Save the file as main.asc in the registered application directory, the /applications/tutorial_hello directory in the Flash Communication Server directory.

Note: If you have chosen to store your server-side application files in a location other than the default, you should save this main.asc file in that directory and register your applications there as well. For example, the default location is in the /applications directory in the Flash Communication Server directory. The <AppsDir> tag in the Vhost.xml server configuration file contains the location of your /applications directory. For more information see Chapter 1 in Developing Communication Applications.

 
To test your application:

1

In the Flash MX authoring environment, after you have saved your work, publish it by selecting File > Publish.

2

Open the SWF file.

3

Type your name in the input text box and click Connect. You'll see a message like this one in the Message text box:

 
Hello! You are connected as: [your name]