【as3】flash聊天室 |
| [来源：Flash AS 基理殿堂 | 作者：FL 车在臣 | 时间：2009-02-22 | 点击： | 收藏本文 【大 中 小】] |
|
|
| 5uflash文章摘要：今天我们来制作 Flash 聊天室，学习使用 Socket 类，用 Java 作后台，开发一个 C / S 架构的多人聊天程序。首先，设计用户界面。
一、界面设计
界面的元件全部使用 Flash CS3 自带的组件：
首先，放入 TextInput 组件（实例名 input_txt），作 |
今天我们来制作 Flash 聊天室，学习使用 Socket 类，用 Java 作后台，开发一个 C / S 架构的多人聊天程序。首先，设计用户界面。
一、界面设计
界面的元件全部使用 Flash CS3 自带的组件：
首先，放入 TextInput 组件（实例名 input_txt），作为用户输入；
再放入 Button 组件（实例名 submit_btn），用于提交输入的信息；
最后放入 TextArea 组件（实例名 output_txt），显示聊天信息。
二、组件参数初始化
由于客户端代码不是很多，我们这次就写在动作帧上：
// ************ 组件参数初始化 ************
submit_btn.label = "发送消息";
output_txt.editable = false;
// 设置各组件中字体的大小
input_txt.setStyle("textFormat", new TextFormat(null, 15));
output_txt.setStyle("textFormat", new TextFormat(null, 15));
submit_btn.setStyle("textFormat", new TextFormat(null, 15, null, true));
// 当按下回车或点击 submit_btn 按钮后调用事件处理函数
submit_btn.addEventListener(MouseEvent.CLICK, sendMessage);
addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
// 事件处理函数
function onKeyDown(evt:KeyboardEvent):void {
if (evt.keyCode == Keyboard.ENTER) {
sendMessage(null);
}
}
function sendMessage(evt:Event):void {
// 测试：将 input_txt 的内容输出到 output_txt 中
output_txt.appendText(input_txt.text + "\n");
// 清空 input_txt，并设置焦点到 input_txt
input_txt.text = "";
stage.focus = input_txt;
}
三、编写客户端 Socket
1. 首先，Socket 连接非常简单：
var socket:Socket = new Socket();
socket.connect("127.0.0.1", 8888);
其中 connect() 方法中的两个参数分别为是主机名和端口号（端口号尽量用 1024 以上）。好了，这样就连接上了。接下来是读写的问题。
2. 向服务器端写入字符串：我们在 sendMessage() 方法中进行写入操作，注意写出的字串必需以回车（\n）结束：
function sendMessage(evt:Event):void {
var bytes:ByteArray = new ByteArray();
bytes.writeUTFBytes(input_txt.text + "\n");
socket.writeBytes(bytes);
socket.flush();
// 清空 input_txt，并设置焦点到 input_txt
input_txt.text = "";
stage.focus = input_txt;
}
3. 读取服务器端写回的字符串：最后将服务器发回的字符串输出到 output_txt 文本域中：
// 当客户端 socket 收到数据后会调用 readMessage() 函数
socket.addEventListener(ProgressEvent.SOCKET_DATA, readMessage);
function readMessage(evt:ProgressEvent):void {
output_txt.appendText(socket.readUTF() + "\n");
}
四、Flash 客户端全部脚本
// ************ 组件参数初始化 ************
submit_btn.label = "发送消息";
output_txt.editable = false;
input_txt.setStyle("textFormat", new TextFormat(null, 15));
output_txt.setStyle("textFormat", new TextFormat(null, 15));
submit_btn.setStyle("textFormat", new TextFormat(null, 15, null, true));
submit_btn.addEventListener(MouseEvent.CLICK, sendMessage);
addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
function onKeyDown(evt:KeyboardEvent):void {
if (evt.keyCode == Keyboard.ENTER) {
sendMessage(null);
}
}
function sendMessage(evt:Event):void {
var bytes:ByteArray = new ByteArray();
bytes.writeUTFBytes(input_txt.text + "\n");
socket.writeBytes(bytes);
socket.flush();
input_txt.text = "";
stage.focus = input_txt;
}
// ************ 客户端 Socket ************
var socket:Socket = new Socket();
socket.connect("127.0.0.1", 8888);
socket.addEventListener(ProgressEvent.SOCKET_DATA, readMessage);
function readMessage(evt:ProgressEvent):void {
output_txt.appendText(socket.readUTF() + "\n");
}
五、编写 Java 服务器端 Socket
最后，我们需要编写 Java 后台服务器端的代码。
首先，创建一个 ServerSocket 作为Socket 服务器。当有客户端连接后通过 accept() 方法即可得到客户端的 Socket：
ServerSocket socketServer = new ServerSocket(8888);
System.out.println("服务器已启动，等待客户端连接");
// accept() 方法是阻塞式的，当有客户端连接成功后才继续执行
Socket socket = socketServer.accept();
System.out.println("客户端连接成功");
然后得到与客户端的输入流和输出流（输入流是客户端连接到服务器的管道，输出流则是服务器到客户端的管道）：
// 获得输入流和输出流，输入流为 BufferedReader 类型，输出流为 DataOutputStream 类型
BufferedReader reader =
new BufferedReader(new InputStreamReader(socket.getInputStream(), "UTF-8"));
DataOutputStream writer = new DataOutputStream(socket.getOutputStream());
拿到输入输出流以后，就可以通过输入流（InputStream）读取 Flash 客户端发来的字符串，通过输出流（OutputStream）向 Flash 客户端写字符串：
while (true) {
// readLine() 方法也是阻塞式的，当客户端有消息发来就读取，否则就一直等待
String msg = reader.readLine();
// 当客户端发送的字符串为 null 时，说明客户端已经关闭，此时退出循环
if (msg == null) {
System.out.println("客户端已离开");
break;
}
// 将读入的信息加工后再写回客户端
writer.writeUTF("写回客户端的" + msg);
}
以上是ServerSocket 与 AS 3 Socket 通信的基本原理。在实际应用中，会有多个客户端连接这个ServerSocket，因此要创建一个多线程的 Socket 服务器。
下面简述一下多线程 Socket 服务器原理：当socketServer.accept() 之后就需要实例化一个线程对象，在该对象中持有socketServer.accept() 返回的 Socket 对象，然后让线程跑起来执行读写操作。如果再来一个客户端就再跑一个线程，同样执行读写操作。同时，用一个 List 容器来管理这些对象。
最终服务器端的代码如下：
import java.io.BufferedReader;
import java.io.DataOutputStream;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.UnsupportedEncodingException;
import java.net.ServerSocket;
import java.net.Socket;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
public class FlashScoket {
private List<Client> clientList = new ArrayList<Client>();
public static void main(String[] args) {
new FlashScoket().runSocket();
}
private void runSocket() {
try {
ServerSocket socketServer = new ServerSocket(8888);
System.out.println("服务器已启动，等待客户端连接");
while (true) {
// accept() 方法是阻塞式的，当有客户端连接成功后才继续执行
Socket socket = socketServer.accept();
System.out.println("客户端连接成功");
// 实例化一个 Client 对象，并启动该线程
Client client = new Client(socket);
clientList.add(client);
client.start();
}
} catch (IOException e) {
e.printStackTrace();
}
}
class Client extends Thread {
private Socket socket;
private BufferedReader reader;
private DataOutputStream writer;
private Client(Socket socket) {
this.socket = socket;
try {
// 获得输入流和输出流，输入流为 BufferedReader 类型，输出流为 DataOutputStream 类型
reader = new BufferedReader(new InputStreamReader(socket.getInputStream(), "UTF-8"));
writer = new DataOutputStream(socket.getOutputStream());
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
@Override
public void run() {
try {
while (true) {
// readLine() 方法也是阻塞式的，当客户端有消息发来就读取，否则就一直等待
String msg = reader.readLine();
// 当客户端发送的字符串为 null 时，说明客户端已经关闭，此时退出循环
if (msg == null) {
clientList.remove(this);
System.out.println("客户端已离开");
break;
}
// 将读入的内容写给每个客户端
for (Iterator<Client> it = clientList.iterator(); it.hasNext();) {
Client client = it.next();
client.getWriter().writeUTF(msg);
}
}
} catch (IOException e) {
e.printStackTrace();
} finally {
// 关闭 socket 及相关资源
try {
if (reader != null) {
reader.close();
}
} catch (IOException e) {
e.printStackTrace();
} finally {
try {
if (writer != null) {
writer.close();
}
} catch (IOException e) {
e.printStackTrace();
} finally {
try {
if (socket != null) {
socket.close();
}
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
}
public DataOutputStream getWriter() {
return writer;
}
}
}
六、补充技术
1. 如何测试？
* 首先要编译FlashScoket —— javac FlashScoket
* 然后启动FlashScoket —— java FlashScoket
* 最后将 Flash 发布为 exe 文件格式，同时开启多个即可。
2. 自动跟踪到最后一行：当收到新的消息时自动滚动到最后一行，在 readMessage() 方法中加入：
output_txt.verticalScrollBar.scrollPosition = output_txt.verticalScrollBar.maxScrollPosition;
3. 当出现输入/输出错误并导致发送或加载操作失败时提示用户，加入对IO_ERROR 的侦听：
socket.addEventListener(IOErrorEvent.IO_ERROR, socketIOError);
function socketIOError(evt:IOErrorEvent):void {
output_txt.appendText("服务器端尚未开启，请稍后再试\n");
}
4. 在sendMessage() 中加入对空字符串的验证，如果为空则 return：
if (input_txt.text == "") {
return;
}
5. 在消息前面显示用户名：大家可以制作一个登录页面，输入用户名，假设已将输入的用户名存放在 userName 变量中，在写入时加进去：
var userName:String = "FL 车在臣";
在 sendMessage() 中相应改为：
bytes.writeUTFBytes(userName + " : " + input_txt.text + "\n");
6. 使用output_txt .htmlText 输出文字，那么相应的写入格式可以调整为：
bytes.writeUTFBytes("<font color='#0000FF'>" + userName + " : </font>" + input_txt.text + "\n");
七、源文件及代码下载：
http://d.download.csdn.net/down/659792
八、分享一下我再学校机房部属的客户端界面（仅供参考）
|
|
| 文章如果有错误或者缺少文件，请发邮件提交给我们 |
|
|
|
|
|
|
| >>> 最新评论:(共有 0 位网友发表了评论) 查看所有评论 |
|
|
| 发表评论 |
|
| ·本站发布内容均为客观表达作者观点，不代表闪无忧立场，请勿攻击和漫骂 |
| ·用户发表意见仅代表其个人意见，并且承担一切因发表内容引起的纠纷和责任 |
| ·本站管理人员有权在不通知用户的情况下删除不符合规定的评论信息或留做证据 |
| ·请客观的评价您所看到的资讯，提倡就事论事，杜绝漫骂和人身攻击等不文明行为 |
|
|
|
 |
教程分类 |
|
|
|
|
|
|
