To prove just how easy it is to get a simple application made using the right technologies, this tutorial was built to show how Red5 and Flash help you build something from scratch in a very short amount of time once you have the right code in place. In five quick steps we will show you how to get your first app up and running!
First Step -
You will need a default application template which you can find inside your Red5 directory on your hardrive, usually located here:
C:\Program Files\Red5\doc\templates\myapp
Copy the folder about into this directory:
C:\Program Files\Red5\webapps\
Easy enough. Once that’s taken care of, it’s time to move on to the next step.
Second Step -
Since the default template is in the right place to run the server side application we want, we can now change its configuration to meet that need. All you need to do is change the name of the “myapp” directory to “sample”. The directory’s title is the name of your application. Next, let’s edit the configuration files within this sample directory.
We’ll structure our application so that it has Sample linking with WEB-INF and lib. The WEB-INF will link directly to:
red5.web.properties
red5-web.xml
web.xml
log4j.properties
Now we open red5-web.properties and edit the contextPath to the folder “sample” to look like this:
webapp.contextPath=/sample
webapp.virtualHosts=localhost, 127.0.0.1
Then we open web.xml so we can change the webAppRootKey and display to look like this:
My tutorial application made with Red5
webAppRootKey
/sample
Then we are going to open red5-web.xml so we can alter the application names to look like this:
class="org.xyz.Application"
singleton="true" />
In the example above, org.xyz represents the package structure we’re using. You could replace it with the application’s real structure if you wanted to. In this instance, the lib directory will have the application’s jar file inside it.
Third Step -
Now that we’re prepared for the server side configuration of the application we will make the application itself so that it can work with the Flash client.
Using a Java IDE such as Eclipse, you need to create a new Java project. You’ll name this sample and give it a structure where Sample links to:
src (which links to org that in turn links to xyz)
classes
lib
The folder named “src” will hold the application package structure we’ve named org.xyz, our compiled class file will reside within the “classes” folder and the folder “lib” will hold the jar file of our compiled class.
It’s time to create build.xml so we can build this project a tool. Our build file will look like this:
In the “jar” target we’ve made a copy of the jar file we created within the folder where our application is, “webapps” inside the Red5 installation. You can copy and paste it by hand.
Remember, add red5.jar from your Red5 installation in CLASSPATH of Eclipse so it will know where to find the Red5 libraries to compile the application. Otherwise you are bound to receive errors.
Fourth Step -
It is now time to create the source file we need. make a new Java file named Application.java
Now we will create our source file. Create a java file, name it to Application.java
Here is the code that needs to be in the Application.java file:
package org.xyz;
//log4j classes
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
//Red5 classes
import org.red5.server.adapter.ApplicationAdapter;
import org.red5.server.api.IClient;
import org.red5.server.api.IConnection;
import org.red5.server.api.IScope;
/**This is the sample application class */
public class Application extends ApplicationAdapter{
/**Variable used for generating the log*/
private static final Log log = LogFactory.getLog(Application.class);
/**This method will execute when Red5 server will start*/
public boolean appStart(IScope app){
if(super.appStart(app) == false){
return false;
}
log.info(”Application start method of Application called”);
return true;
}
/**This method will execute when first client will connect to Red5 server*/
public boolean roomStart(IScope room){
if(super.roomStart(room) == false){
return false;
}
log.info(”Inside room start of Application”);
return true;
}
/**This method will execute everytime when a client will connect to Red5 server*/
public boolean roomConnect(IConnection conn, Object params[]){
if(super.roomConnect(conn, params) == false){
return false;
}
log.info(”Inside room connect method of Application”);
return true;
}
/**This method will be called when a client disconnect from the room*/
public void roomDisconnect(IConnection conn){
super.roomDisconnect(conn);
log.info(”Inside room disconnect method of Application”);
}
/**This method will be called when a client will be disconnected from application*/
public void appDisconnect(IConnection conn){
log.info(”Inside app disconnect method of Application”);
}
/**This method will be called from the client. This method will show “Hello World!” on *the flash client side .
*/
public String sayHello(Object[] params){
log.info(“I got your name:-”+params[0].toString());
return “Hello World!” + params[0].toString();
}
} ////////End of Application class
That file gives us a feel of what the server side code needs to look like. The documentation that comes with Red5 gives further details on the methods for the ApplicationAdapter class. We defined a method called sayHello and this gets the user name from the Flash client and adds it to the “Hello World!” statement before passing it back to the Flash client.
It’s time to run the jar task of our build.xml file to compile the application class, generate the jar we need, and copy it to the application directory we placed inside the Red5 installation.
Fifth and Final Step -
We’ve now prepared our server side application so we can start on the Flash application in order to connect it with the Red5 server.
Now you need to create a new Flash document, so:
Go to window-components in the library and drag an Alert component out. Open the Action-Frame and inside there you need to write this code:
import mx.controls.Alert;
var nc:NetConnection = new NetConnection();
nc.val = this;
nc.onStatus = function(info){
switch(info.code){
case “NetConnection.Connect.Success”:
Alert.show(”Got connected with application);
this.val.callServer();
break;
case “NetConnection.Connect.Failed”:
Alert.show(info.application);
break;
case “NetConnection.Connect.Rejected”:
Alert.show(info.application);
break;
case “NetConnection.Connect.Closed”:
Alert.show(”Client Disconnected”);
break;
}
};
nc.connect(”rtmp://localhost/sample”);
function callServer(){
var resultObj:Object = new Object();
nc.call(”sayHello”, resultObj,”Your Name”);
resultObj.onResult = function(str){
Alert.show(str); //This will display “Hello World! Your Name”
}
};
}
After the code is in place, save the application with the name sample.fla(user preferred)
Since this code shown above is Action Script 1 code it can also be put into an external .As file which can be referred to from within the application but we aren’t covering that method in this tutorial. Nevertheless, it is a valid option.
At last, you can run the Flash client and it should successfully connect with the Red5 server to show an alert box that reads, “Hello World! Your Name”
It really is that simple and now that you know the basics, expanding upon your knowledge will allow you to get the most from your Red5 experience!
Popularity: 3% [?]
_03.gif)
_03.gif)
