實作 Red5 上的應用程序-HelloWorld

參考了 Red5 內附的說明文件之後，是否迫不及待的想開始動手寫一支可以執行的程式呢？

身為網民，我了解在網路上找範例文章是很痛苦的一件事，尤其是 Red5 這種資源少得可憐的技術或是導覽文章更是難找 ( 除非你不認為語言是一種限制的話...)，就算找到了，你跟著 Step Bye Step，結果還是搞不起來，為什麼？我想，每個人的運作環境都不太可能一樣，這其中的差異性，往往就會在關鍵的地方產生問題，因此，我有必要詳細說明我的環境：

IDE：
我使用 Flex3 Builder ( 如果你是用 Eclipse，其實也差不多，或許有些選項名詞不太一樣，這我並不是很清楚，但你應該能夠自行轉換...如果真的有差別的話== )。

Server：
我的 Red5 是安裝在一台獨立的 RedHat 8 機器上，並且開放 Samba 做連線磁碟機直接指向 /opt/red5 目錄，所以在 IDE 的路徑上可能就和你有所不同，這點請注意。

好，廢話不多說，現在立刻就來進行，當然啦，在還不了解 Red5 Server API 之前，是別想搞出什麼驚天動地的大專案的啦，但是我們可以從最經典的 HelloWorld 開始！

1.首先，我們先來想一下，這個 Project 的基本結構，我想把它取名為 HelloWorld_red5，在參考過 如何在 Red5 上建立一個應用程序 之後，我們知道，在 webapps 目錄下，我們應該先建立一個如下圖的基本結構：

關於這個動作，在 Linux 機器上，可以使用以下指令完成：

#cp -r /opt/red5/doc/templates/myapp /opt/red5/dist/webapps/HelloWorld_red5

但是要注意，執行此命令的身份必須是和用 Samba 登入網芳的使用者同一個群組，否則會因為目錄權限的關係，在網芳中會無法存取。不過，如果你懶得再用 putty 去下指令，直接從你的網芳中複製、貼上也就可以了，這其中的差別就在於群組的權限控制，如果你的開發團隊只有一個人，其實是不用把它搞得這麼複雜的。

2.接下來，要修改 red5-web.properties 這個檔案，因為這個檔案是從 myapp 模板拷貝來的，它的原始內容如下：

webapp.contextPath=/myapp
webapp.virtualHosts=localhost, 127.0.0.1

我們要把它改成

webapp.contextPath=/HelloWorld_red5
webapp.virtualHosts=*,localhost, 127.0.0.1

3.修改 web.xml 檔，找到以下二組標籤，它的原始內容應該是

<display-name>My sample Red5 application</display-name>

<context-param>
 <param-name>webAppRootKey</param-name>
 <param-value>/myapp</param-value>
</context-param>

把它修改成

<display-name>HelloWorld_red5 TEST</display-name>

<context-param>
 <param-name>webAppRootKey</param-name>
 <param-value>/HelloWorld_red5</param-value>
</context-param>

4.再來修改 red5-web.xml 這個檔案，找到以下區塊

<bean class="the.path.to.my.Application" id="web.handler" singleton="true">

把它修改成

<bean class="my.first.Application" id="web.handler" singleton="true">

5.開啟 Flex3 Builder，點擊 File>New>Other ，出現如下圖視窗，請選擇 Java > Java Project

6.點擊 Next ，出現如下圖視窗，請在 Project name 欄位填上 HelloWorld_red5，在 Contents 內點選 Create new project in workspace ( 預設值 ) 後，點擊 Finish

7.點擊 Finish 後，在 Flex3 Builder 左側 Navigator 處就會顯示出如下圖般的空專案內容：

8.接下來，我們要在這個空專案中，把專案結構做起來，在左側 Navigator 中點選 HelloWorld_red5 按右鍵，點選 New > Folder ，建立二個子目錄 classes 和 lib，在 src 中，建立第一層子目錄為 my ，第二層為 first ，之後在 src 上按右鍵點 Build Path > Remove from Build Path，整體結構如下圖所示：

9.現在，我們要來建立一份稍後用來編譯專案的 build.xml 檔，請在左側 Navigator 中點選 HelloWorld_red5 按右鍵，點選 New > File 後，File name 欄位填上 build.xml 後點擊 Finish，完成後會在左側 Navigator 看到多了一個 build.xml 檔，中間編輯區則是這份檔案的空白內容，把下面的程式碼拷貝貼上，視實際情況修改你的路徑：

<project default="deploy" name="HelloWorld_red5">
<property location="src" name="src.dir"></property>
<property location="lib" name="lib.dir"></property>
<property location="classes" name="classes.dir"></property>
<property name="class.file" value="${classes.dir}/Application.class"></property>
<property name="jar.file" value="${lib.dir}/myapp.jar"></property>
<target name="clean">
<echo message="清除 classes 目錄下檔案">
 <delete file="${class.file}">
<echo message="清除 lib 目錄下檔案">
 <delete file="${jar.file}">
</target>
<target name="compile">
<echo message="編譯 class">
 <javac destdir="${classes.dir}" srcdir="${src.dir}">
</target>
<target name="jar">
<echo message="打包 myapp.jar">
 <jar basedir="${classes.dir}" jarfile="${jar.file}">
</target>
<target depends="clean,compile,jar" name="deploy">
<echo message="佈署 myapp.jar 到 Red5">
 <copy file="${jar.file}" tofile="Z:\dist\webapps\HelloWorld_red5\WEB-INF\lib\myapp.jar">
</target>
</project>

10.再來，我們要來開始準備撰寫程式碼了，在這之前，有一件很重要的事要做，那就是引入 red5.jar 這個檔案，在左側 Navigator 裡點選 HelloWorld_red5 按右鍵，點選最下方的 properties，出現如下圖視窗，在 Java Build Path 中，點選 Add External JARs 找到你的 red5.jar 加入後點擊 OK 離開 ( 不知道為什麼？當我用這個方法時，用 Ant 編譯會出錯 ( javac )，我的解決方法是，乾脆把 red5.jar 拷貝到 %JAVA_HOME%\jre6\lib 之下，然後只引入一個 JRE System Library 就沒問題了，真是奇怪 )：

11.在左側 Navigator 點選 first 按右鍵，點 New > File ，File name 填入 Application.java 後點擊 Finish 後，在左側 Navigator 中可看到多了一份檔案 Application.java ，中間編輯區則是這份檔案的空白內容，我們現在開始撰寫程式碼，內容如下：

package my.first;
import org.red5.server.adapter.ApplicationAdapter;
public class Application extends ApplicationAdapter{
 public String Hello(Object[] params){
  return "Hello World"+params[0].toString();
 }
} 

12.存檔後，就可以開始編譯了，在左側 Navigator 中點選 build.xml 按右鍵，選 Run As > 2 Ant Build，如果前面操作步驟都正確無誤的話，你的 webapps\HelloWorld_red5\WEB-INF\lib 目錄下應該就會產生一個 myapp.jar 檔案。

13.完成了伺服端的程式碼之後，接下來就要撰寫客戶端的程式碼，我使用的是 Flex3 Builder 撰寫 ActionScript，如果你擅用 Flash 的話，也可以改用 Flash...。這裡以 Flex3為例，在右上角的地方可以切換成 Flex Development，如下圖：

14.點選功能表的 File > New > Flex Project，Project name 欄位填上 HelloWorld_swf ，因為我想直接發佈到我的 Apache 根目錄下，所以在下方 Application server type 選擇了 PHP，如下圖：

15.點選 Next 後，在 web root 我填入 \\Linux\Apache2 ( 記得嗎？我已事先用 Samba 開放了網芳 )，Root URL 我則填上我的伺服器主機名稱 http://linux ，如下圖：

16.點擊 Finish 後，我們可以看到整個 IDE 已經切換到 Flex3 的設計界面了

17.現在，就開始來撰寫 ActionScript 的部份了，請在左側 Navigator 雙擊 HelloWorld_swf.mxml，中間的編輯區會變成它的程式碼區塊，請將下列程式碼拷貝貼上：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 <mx:Script>
  <![CDATA[
   //引入包裝
   import mx.controls.Alert;
   
   private var nc:NetConnection;
   private var responder:Responder=null;
   
   //連接 rtmp伺 服器
   private function connect():void{
    nc=new NetConnection();
    nc.addEventListener(NetStatusEvent.NET_STATUS,ncHandler);
    nc.connect("rtmp://192.168.1.254/HelloWorld_red5");  
   }
   
   //NetConnection.Connect 的六種 infocode
   private function ncHandler(event:NetStatusEvent):void{
    switch(event.info.code){
     
     //連接成功才呼叫 HelloWorld_red5 內函數
     case "NetConnection.Connect.Success":
      responder=new Responder(result,error);
      nc.call("Hello",responder,"Kalvin");
      break;
     
     case  "NetConnection.Connect.Failed":
      Alert.show("The connection attempt failed.");
      break; 
     
     case "NetConnection.Connect.Rejected":
      Alert.show("The connection attempt did not have permission to access the application.");
      break;
     
     case "NetConnection.Connect.AppShutdown":
      Alert.show("The specified application is shutting down.");
      break;
      
     case "NetConnection.Connect.InvalidApp":
      Alert.show("The application name specified during connect is invalid.");
      break;
     
     case "NetConnection.Connect.Closed":
      Alert.show("The connection was closed successfully.");
      break;
    }
   }
   
   private function result(obj:Object):void{
    Alert.show(obj.toString()); 
   }
   
   private function error(obj:Object):void{
    Alert.show(obj.toString());
   }
  ]]>
 </mx:Script>
 <mx:Button label="Test" click="connect()" horizontalCenter="0" verticalCenter="0"/>
</mx:Application>

好啦，如果以上動作都無誤的話，試著執行看看，你可以在瀏覽器內看到輸出的結果