Flash 聊天室

今天我们来制作 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 变量中，在写入时加进去：