AS3范例：使用 Socket 、Java ，开发一个 C / S 架构的多人聊天室

AS3实例：使用 Socket 、Java ，开发一个 C / S 架构的多人聊天室

今天我们来制作 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");

?