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;

}