FLASH CS4 + PHP 开发一个FLASH简易聊天室

http://www.51xflash.com/article/flashcs3/200910/31-11080.html

这次我打算写一个新的系列教程,就是用FLASH CS4 + PHP 开发一个简易的FLASH聊天室(可以点击图片看看),也可以说成是留言板的扩展版本，大家如果认真的看的话,可以学到,FLASH是如何与PHP通信,然后再得到返回的数据，mysql输出XML数据等一些技巧.
      在开始之前,我先把整体思路说一下,今天第一篇,不往深了讲,只说FLASH是如何与PHP通信的,只要理解了这点,再往下面讲就简单了很多.具体的制作简易聊天室思路会在下一篇详细说明.
      那么FLASH是怎么样与PHP通信的呢?
      首先我们先把PHP端的代码写好,如下:

<?php
$m = $_GET['messages'];
echo $m;
?>

       并把这个PHP文件命名为 message.php,然后你测试下,输入路径,然后最后加上:  ?messages=hello;看看页面是否显示,OK,如果显示出:hello,那说明PHP端的文件搞定了,
       下一步我们详细说明 FLASH端的代码.我把这些个步骤形容为:三板斧。
        第一板斧：点击

       简单的很，只要在 FLASH舞台上放个BUTTON，然后命名为： send_btn.然后在主AS里，先写上第一行代码，主要是监听点击事件。
      

send_btn.addEventListener(MouseEvent.CLICK,btnClick);
function btnClick(e:MouseEvent):void{
  sendMessage();
}

       这就是第一板斧，很简单，那么你肯定会问，为什么不把发送的代码全写在 btnClick构造函数里呢，而是另放在 sendMessage()这个构造函数里，其实这是为了代码方便，也是为了下一步有用。

        第二板斧：发送
       顾名思义，就是把 FLASH里的内容发送给PHP，这个代码如下：
      

function sendMessage():void {
   //定义PHP文件地址
  var phpFile:String="http://localhost/flashChatroom/message.php";

  var variables:URLVariables = new URLVariables();
  variables.messages="hello";

  var urlRequest:URLRequest=new URLRequest(phpFile);
  //可选，不过为了数据安全建议用上，然后把PHP端的$m = $_GET['messages'];
  //修改为 $m = $_POST['messages'];即可
  urlRequest.method=URLRequestMethod.POST;
  urlRequest.data=variables;


  var urlLoader:URLLoader = new URLLoader();
  urlLoader.addEventListener(Event.COMPLETE,getMessage);
  urlLoader.load(urlRequest);
}

第三板斧：接受
     这个就简单了，目前我们只用 trace();命令来接收数据，代码如下：

function getMessage(e:Event):void {
  trace(e.target.data);
}

     

      总结，看了这三板斧，大概明白了吧，怎么让 FLASH 与 PHP 通信，不过目前只是讲个最初的概念，不过别看这么简单，后期的程序都是以此框架展开的。特别是第三板斧，因为根据数据不同，格式不同，接收的方法也会不一样，里面有很多文章可做。所以等第二篇吧，明天应该可以写出来了。 
理解了 FLASH与PHP的通信后，下一步就是按照这三板斧，丰富程序。那么先说一下制作聊天是大概思路：
       
       所谓聊天室，我就把他比喻成一个箱子，你一言，我一句的全部扔在这个箱子里，那么我们大家只要关注这个箱子的情况就可以了。也就是说，我们每个人的客户端，发送的是我们自己的信息，收到的是箱子的整体情况。当然这里面肯定有些小问题，但是我们暂时不管。
       那么如何来发送呢，这就是需要用PHP和MYSQL数据库了，发送：只要把 FLASH发送的信息到PHP，然后用PHP把数据记录到数据库就可以，这比较简单；接收：就是需要PHP从数据库读取数据，然后返还给 FLASH，我们这里可以用PHP读取数据，然后生成XML，让 FLASH读取XML就可以，这也是目前比较流行的做法。

       按照三板斧概念，就可以这么说：
       第一板斧：设置，点击。
       第二板斧：把自己客户端口的信息发送到聊天室箱子。
       第三板斧：用自己客户端读取程序把聊天室箱子里的信息读过来，并且设置一个时间函数，大概每5秒从聊天室箱子读取一次，保持数据更新。
       OK，思路理清，我们就开始制作了。

        首先第一板斧：设置、点击
       我们首先设置聊天室箱子，有了箱子，我们才好做这个客户端口的东西。
      装上PHP，打开PhpMyAdmin，加入新的数据库：flashchat，同时新建一个数据表格:chats,设置为4行，分别是:id(编号),username(用户名),message(信息),dateAdd(信息添加时间，这个后面说)，id为主键。sql代码如下：

CREATE TABLE `chats` (
  `id` int(10) NOT NULL auto_increment,
  `username` varchar(255) NOT NULL,
  `message` text NOT NULL,
  `dateAdd` int(11) NOT NULL default '0',
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

      
       数据设置完毕，下面就是开始写PHP端口的程序了，我们分成两部，第一部分是发送信息到数据库的 sendMessage.php，第二部分是从数据库得到数据的 getMessage.php。
       不过在开始前，我们还需要制作一个connection.php，就是连接数据库的。代码为：
      

<?php
               $dbconnect=mysql_connect("服务器","用户","密码");,
               //比如:$dbconnect=mysql_connect("localhost","root","12345");
                if($dbconnect){
                    die("连接问题" . mysql_error());
             }
             mysql_select_db("数据库",$dbconnect);
            //比如：mysql_select_db("flashchat",$dbconnect);
?>

        保存为 connection.php

       开始来制作 sendMessage.php，代码为:
    

<?php
                    include "connection.php";
                     //$_POST里面的参数，就是 FLASH那端发送过来的参数，你应该还记得上一篇的教程。
                    //这里就是把参数放到两个变量
                    $username = $_POST['userN'];
                    $message = $_POST['msg'];
                    $date = time();
                    
                    //把得到的两个变量存入数据库
                    mysql_query("INSERT INTO chats (username,message,dateAdd)
                                        VALUES ('$username','$message','$date')
                                       ");
                   
?>

       制作  getMessage.php，也就是用PHP从MYSQL读取数据，然后到处XML格式，再让 FLASH来读取，代码为：
      

<?php
                  include "connection.php";
                  $sql = "SELECT * FROM chats";
                  //其实上面这段是有问题的，你想每个人从聊天室箱子里读取数据，都是全部数据，
                  //这可不是好事，所以我们加了个dateAdd的用意就在这里，我们只需要根据时间
                  //来选择我们所需要的数据就可以了，比如下面这段
                 $sql = "SELECT * FROM chats WHERE dateAdd >" . (time()-(60*5));
                  //意思就是我们只读取我们前5分钟的留言
              
                 $result = mysql_query($sql);

                 $xmlData = "<datas>\n";
                 while($row = mysql_fetch_array($result)){
                        $xmlData .=  "  <data id='" . $row['id'] . "'>\n";
                        $xmlData .= "<name>" . $row['username'] . "</name>\n";
                        $xmlData .= "<message>" . $row['message'] . "</message>\n";
                        $xmlData .=  "  </data>\n";
                  }
                 $xmlData .= "</datas>";
                 print $xmlData;
?>

      
       这样就完成了第一板斧设置。PHP端的代码基本算是完成了。那么下面第二、三板斧，那就简单了， FLASH是啥？ FLASH就是客户端表现程序，明白？这个放到明天再写。 
第二板斧：发送
         不过在正式编写程序之前，我们需要在 FLASH舞台上放好三个组件。框架可以随你摆放，为了统一的格式，就按照我的DEMO摆放就可以了，等你以后熟悉了，就可以自己随便玩。Demo在哪里？点图片啊。
          我们需要摆放的是：一个TextArea(命名:messagesTxt);两个TextInput,消息板块一个，用户板块一个，分别命名为：newMsgTxt，usernameTxt；还有一个Button，就是点击发送功能，命名为:sendBtn

          好了，开始代码编写，新建一层，按“F9”，跳出代码窗口，往里面输入代码：

//设置PHP文件放置地址
var phpPath:String = "http://localhost/flashChatroom/";
var phpSendMessage:String= phpPath + "message.php";
var phpLoadMessages:String= phpPath + "getMessages.php";

function sendMessage(e:MouseEvent):void {
//如果用户名为空就返回
  if (usernameTxt.text == "") {
    return;
  }

//只有信息的字符大于1时，才发送数据
  if (newMsgTxt.text.length >= 1) {
    var variables:URLVariables = new URLVariables();
    variables.user = usernameTxt.text;
    variables.msg = newMsgTxt.text;


    var urlRequest:URLRequest = new URLRequest(phpSendMessage );
    urlRequest.method = URLRequestMethod.POST;
    urlRequest.data = variables;

    var urlLoader:URLLoader = new URLLoader();
    urlLoader.addEventListener(Event.COMPLETE, sendMessageHandler);
    urlLoader.load(urlRequest);
   
   //让新发的信息兵分两路，一部分发到PHP，添加到MYSQL数据库里，一部分就是添加到TextArea组件里
   //你可以好好想想为啥要这么做呢？
    addMessage(usernameTxt.text, newMsgTxt.text);
  }
}
function addMessage(user:String, msg:String):void {
  messagesTxt.htmlText += user + ": " + msg + "\n";
}

//其实这个构造函数在这里没多大用，因为我们有另外的读取函数
//这里只需要清空信息空格里的信息就可
function sendMessageHandler(e:Event):void {
        newMsgTxt.text = "";
}

//最后别忘了，点了按钮才能发送数据 
sendBtn.addEventListener(MouseEvent.CLICK, sendMessage);

   第三板斧：接收
      发是发完了，我们该怎么接收呢？前面说过，我们读的数据是PHP导出的XML文件 ，而且是需要每5秒去读取一次，保持数据的更新，那么我们先制作接收的构造函数，然后再制作时间计数器。
    

function loadMessages():void {
       //你说多个randomTxt是干嘛呢？就是为了能够不断的刷新缓存用的。
        var randomTxt:String= "?rand="+Math.random();
  var urlRequest:URLRequest = new URLRequest(phpLoadMessages +  randomTxt);
  
        var urlLoader:URLLoader = new URLLoader();
  urlLoader.addEventListener(Event.COMPLETE, loadMessagesHandler);
  urlLoader.load(urlRequest);
}
//下面的构造函数就是读取XML，然后分析XML，再把数据放到TextArea里
function loadMessagesHandler(e:Event):void {
  var loader:URLLoader = URLLoader(e.target);
  var xml:XML = new XML(loader.data);
       //清空数据
  messagesTxt.htmlText = "";

  for each (var item in xml..data) {
    addMessage(item.name, item.msg);
  }
}

//时间 计数器
var timer:Timer;
function init():void {
  timer = new Timer(5000, 0);
  timer.addEventListener(TimerEvent.TIMER, timerHandler);
  timer.start();
  loadMessages();
}
function timerHandler(e:TimerEvent):void {
  loadMessages();
}
//因为我需要一开始就让时间计数器就运行，所以程序初始就把计数器运行。
init();

     完成了，你只要把这两部分的代码放到一起，自己再整理下，应该能明白了。当然里面还有点这样那样的小问题，后面我会找两个比较重要的问题再写两篇文章。毕竟是简易聊天室嘛。
大概程序，我们已经完成了，那么里面肯定有无数这样那样的问题，我们就挑比较重要的几个来说一下。
          当我们输入信息的时候，我们是否可以之间按回车就发送信息呢？
          当然可以， FLASH的TextInput组件就有这个enter事件。只要在之前的代码里继续加上：

import fl.events.ComponentEvent;
newMsgTxt.addEventListener(ComponentEvent.ENTER ,sendMessageEnter);
function sendMessageEnter(e:ComponentEvent){
          sendMessage();
}

            其实这段代码是有个陷阱的，如果 你不注意，是肯定会出错的。为什么呢？
           因为，我们以前写的发送构造函数是点击Button后发生的，那么里面的Event就是MouseEvent,可是，我们现在又多加了个Enter事件，那么发送构造函数肯定要重新写。取个巧，把以前的 sendMessage(e:MouseEvent) 改成：sendMessage() ；然后把监听BUTTON CLICK事件和TEXTINPUT ENTER事件分开写成：
        

        sendBtn.addEventListener(MouseEvent.CLICK, sendMessageClick);
        newMsgTxt.addEventListener(ComponentEvent.ENTER ,sendMessageEnter);
        function sendMessageClick(e:MouseEvent):void{
                   sendMessage();
        }
        function sendMessageEnter(e:ComponentEvent):void{
                   sendMessage();
        }

         这样就解决了事件不同的问题，现在输入信息，直接按回车就可以发送数据了。
一个新的问题是：如果聊天的内容太多了，TextArea出现了滑动杆，但是如果不特意制作一下的话，里面的信息一直都不是最下面的。
           如何让TextArea里的文本保持在最下面呢？
          在TextArea里有个 verticalScrollPosition和 maxVerticalScrollPosition这两属性，只要让verticalScrollPosition  等于maxVerticalScrollPosition 这个数值，并且保持不断更新，那么就可以解决这个问题。所以新的代码为
      

addEventListener(Event.ENTER_FRAME,go);
function go(e:Event):void{
  messagesTxt.verticalScrollPosition = messagesTxt.maxVerticalScrollPosition;
}