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 變量中,在寫入時加進去:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章