【as3】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 变量中,在写入时加进去:
    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

八、分享一下我再学校机房部属的客户端界面(仅供参考)

时间: 2024-10-07 10:47:56

【as3】flash聊天室的相关文章

flash聊天室

今天我们来制作Flash聊天室,学习使用Socket类,用Java作后台,开发一个 C/S架构的多人聊天程序.首先,设计用户界面. 一.界面设计 界面的元件全部使用Flash CS3 自带的组件: 首先,放入 TextInput 组件(实例名 input_txt),作为用户输入: 再放入 Button 组件(实例名 submit_btn),用于提交输入的信息: 最后放入 TextArea 组件(实例名 output_txt),显示聊天信息. 二.组件参数初始化 由于客户端代码不是很多,我们这次就

Flash/Flex学习笔记(53):利用FMS快速创建一个文本聊天室

先来看客户端fla的构成: 第一帧:登录界面 第一帧的代码: import flash.events.MouseEvent; import com.adobe.utils.StringUtil; import utils.Alert; stop(); var userName:String=""; Alert.init(stage); btnLogin.addEventListener(MouseEvent.CLICK,btnLoginClick); function btnLogin

fms-使用flash和FMS做语音聊天室怎样不播放自己的声音

问题描述 使用flash和FMS做语音聊天室怎样不播放自己的声音 使用NetStream流发布实时语音到服务器nsOut.publish("dummy", "live"); 然后客户端使用另一个NetStream播放nsIn.play("dummy"); 现在问题是自己说的话也被自己播放出来了这个该怎么解决,或者说做语音聊天室不是用这个方法做的 还求各位大大给个思路

用Flash和XML来构造一个聊天室_XML/RSS

点击这里下载源文件 前面的教程我们介绍了Flash与XML结合使用的原理以及一个论坛的实现,下面我们继续结合Flash与XML来实现一个简单的聊天室,有在线聊天.在线人员名单.在线时间.简单的管理操作等功能.根据需要在此基础上稍作修改,就可以实现一个功能比较完备的聊天室了. 一.原理 用Flash和XML来构造聊天室,跟直接用Flash和Asp来构造聊天室的基本原理是一样的.都是先在Flash端发送一个XML请求到服务器端,然后等待从服务器端的XML返回值,当值返回Flash端后,解释所返回的X

基于AJAX的ASP.NET聊天室-如何建立共识

ajax|asp.net|聊天室 这是一篇从技术角度来说非常入门级的文章,别看到标题又是AJAX又是chat room,就以为用到了Atlas和HttpHandler之类复杂的东西,实际上它仅仅使用了XMLHttpRequest和Page.这就降低了读者所需要跨越的技术门槛,即使你平常只是使用Page,而对XMLHttpRequest也仅有一点点的了解,也不会妨碍你阅读这篇文章. 文章开篇第一段Introduction简单介绍了项目的背景,作者说他最初设计聊天室是使用ASP,只放置了两个文本框,

FluorineFx+Flex视频聊天室案例开发----应用部署篇

这段时间的随笔一直都是关于及时通信应用方面的,其中有许多的朋友对于开发都没什么 问题,但是在程序部署上就出问题了.本篇将简单的介绍FluorineFx + Flex视频聊天室的部 署方面的相关内容. 首先需要需要注意一点就是Flex的配置文件service-config.xml,后面的flash将通过 service-config.xml里配置的RTMP通信信道与FluorineFx的RTMP服务器连接连接,详细配置 如下: <channel-definition id="my-rtmp&

使用Java和WebSocket实现网页聊天室实例代码_java

在没介绍正文之前,先给大家介绍下websocket的背景和原理: 背景 在浏览器中通过http仅能实现单向的通信,comet可以一定程度上模拟双向通信,但效率较低,并需要服务器有较好的支持; flash中的socket和xmlsocket可以实现真正的双向通信,通过 flex ajax bridge,可以在javascript中使用这两项功能. 可以预见,如果websocket一旦在浏览器中得到实现,将会替代上面两项技术,得到广泛的使用.面对这种状况,HTML5定义了WebSocket协议,能更

聊天室服务分析设计

如果你需要写一个简单的聊天室的服务,那么我想很多网上的demo都可以直接拿来用.但是如果你要做的是给线上百万甚至千万级用户用的服务,那么,整个结构和聊天室Demo是必然不一样的.本文就从设计一个大用户量的聊天室服务的角度出发来思考. 分布式? 首先用户量大必然先考虑的问题是服务是单进程还是多进程,单机器还是多机器,单进程代表的是单机上跑一个服务,单机器代表的是单机上跑一个或者多个服务,这两种方案都是不可行的.理由是考虑下面几个方面: 1 单进程或单机器对机器性能要求较高:由于一台机器上的一个进程

FluorineFx:基于RSO(远程共享对象)的文本聊天室

在前一篇"FluorineFx:远程共享对象(Remote SharedObjects)"里,已经大致知道了在FluorineFX中如何使用RSO,这一篇将利用RSO完成一个简单的文本聊天室. 原理: RSO对象中,创建二个属性:msg和online,分别用来保存"用户每次发送的聊天内容"以及"在线用户列表" 运行截图: 服务端代码: using System.Collections; using FluorineFx.Messaging.Api