聊天工具系统Word下载.docx

1、1.1 开发背景1.1.1 课题现状分析传统网络程序的开发是基于页面的、服务器端数据传递的模式，把网络程序的表示层建立于HTML页面之上，而HTML是适合于文本的，传统的基于页面的系统已经渐渐不能满足网络浏览者的更高的、全方位的体验要求了，这就是被Macromedia公司称之为的“体验问题”。而富因特网应用程序（RIA）的出现也就是为了解决这个问题。富因特网应用程序是下一代的将桌面应用程序的交互的用户体验与传统的Web应用的部署灵活性和成本分析结合起来的网络应用程序。富因特网应用程序中的富客户技术通过提供可承载已编译客户端应用程序（以文件形式，用HTTP传递）的运行环境，客户端应用程序使用异步

2、客户/服务器架构连接现有的后端应用服务器，这是一种安全、可升级、具有良好适应性的新的面向服务模型，这种模型由采用的Web服务所驱动。当然，Flash也可以有更多的动态的效果。 这些都是基于网络的带宽的提高。Flash网页聊天不同于其它网页聊天的特别之处便在于它结合了声音、视频和实时对话的综合通信技术，丰富了用户因特网互动的体验。使用Flash制作的聊天室上网发布容易、交流和实时性强。Flash 从6.0开始Flash就逐步具备建立窗体风格的应用程序的功能。据称已经有98以上的桌面系统的浏览器都安装了 Macromedia Flash Player。这使得以Macromedia Flash Pl

3、ayer为客户端的RIA可以支持种类广泛的平台和设备。 Flex是为满足希望开发 RIA的企业级程序员的需求而推出的表示服务器和应用程序框架，它可以运行于J2EE和.NET平台。Flex表示服务器提供基于标准的、声明性的编程方法和流程，并提供运行时服务，用于开发和部署丰富客户端应用程序的表示层。Flex开发者使用直观的基于XML的MXML来定义丰富的用户界面。该语言由 Flex服务器翻译成SWF格式的客户端应用程序，在Flash Player中运行。1.2 开发环境以及相关技术1.2.1 开发环境Adobe Flash Buider4.7：是一款由Adobe公司开发的软件。它可以帮软件开发人员

4、快速开发跨平台富 Internet 应用程序。它包含对智能编码、调试及可视设计的支持，提供功能强大的测试工具，这些工具可以提高开发速度并创建出性能更高的应用程序。ActionScript 3.0 是一种强大的面向对象编程语言，创建效果丰富的 Web应用程序所需的功能和灵活性。ActionScript 3 现在为基于 Web 的应用程序提供了更多的可能性,适合高度复杂的 Web应用程序和大数据集。ActionScript3可以为以 Flash Player 为目标的内容和应用程序提供高性能的开发效率。ActionScript3有两类特性：语言特性和 Flash Player API 特性。1.2

5、.2 相关技术Flash Media Server：是跟Flash息息相关的一款影音服务器软件。利用flash和fms可以快速开发出令人瞠目结舌的RIA产品，fms具有以下几个新的特征：运行多个应用程序和主机更加稳定；支持多用户连接；服务器将记录更多更详细的log信息；数据支持加密传输等。 第2章 需求分析2.1 项目概述该项目为基于flash的网页聊天系统，主要包括文字聊天和视频聊天。实现多用户通过FMS服务器的交流，安全快捷。用户登上网页实时聊天页面，可以更加方便的和远方的网友进行交流。该聊天页面应该包括输入框，即需要用户输入聊天内容。这些聊天内容可以经过服务器，然后再转发到对方的网页聊天

6、页面。当对方收到信息后，同样可以在聊天框内编写聊天内容，同样经过服务器回复对方内容。文字视频聊天作为一种广泛的网络应用对其基础的承载网络环境有着较高的网络要求。其中应重点考虑的是网络的带宽情况、端到端的时延、时延抖动、丢包率。尽量将做出来的程序完整化，功能多样化，符合人的合理使用习惯。开发环境是WindowsXP操作系统，服务器要使用FMS，软件运行的前提是电脑要安装flashplayer播放器。该聊天页面可以以HTML的形式打开，也可以通过浏览器在网页上打开，只要用户登陆了服务器，在网页聊天页面中的好友列表里就可以看见。同时你的所有聊天内容其他人都可以看见并进行回复。2.2 要实现的功能2.

7、2.1 文字聊天功能作为聊天系统，文字聊天是最基础的交流方式，也是本项目实现的最基本的功能。当用户在聊天系统中输入文字后，按发送，这样其他人都可以可见发送的内容。首先要启动服务器端，用户登录到服务器。只有当有两个以上的用户启动客户端时，才可以进行文字聊天，聊天内容要经过服务器中转，分别在服务器端和两个聊天的客户端显示聊天的内容。2.2.2 文字修改功能为了让文字更好看或者按照个人的喜好来使用习惯的字体，允许用户修改字体。用户所能修改的应该包括宋体,楷体,黑体等常用的字体。如果可以的话应该可以设置字体的大小，颜色等，可以让用户根据自己的爱好来选择自己喜欢的字样。2.2.3视频聊天功能一个完整的聊

8、天工具，用户是可以按照自己的意愿进行视频聊天的。当两个用户需要要进行视频聊天时，根据该用户名在后台链表中的对应IP地址查找用户并请求视频连接。当双方确认视频连接后就进行视频传输，并显示在客户端。两个用户可以实现点对点的语音视频聊天。在进行语音视频聊天的过程中，不能再与其它用户进行视频聊天，但能够与其它用户进行文字聊天。第3章 概要设计3.1 搭建FMS服务器首先要安装FMS，在Adobe网站注册一个账号，然后用该账号登录。双击运行安装FMS，在安装的过程中输入用户名和密码，同时可以利用该用户名字和密码登录FMS控制台进行管理和查看。将Server poit设置为默认值1935，Admin Po

9、it设置为默认的1111。3.2 配置FMS服务器3.2.1 设置用户名和密码用记事本打开安装目录下的fms.ini文件，找到配置信息。修改如下信息USENAME=Admin，PASSWORD=123。如果想要使用户名和密码生效，需要重新启动FMS服务器。3.2.2 设置服务器端口和服务端口在fms.ini找到配置信息。如下 ADMINSERVER_HOSTPORT=:1111为管理端口WEADAPTOR.HOSTPORT=1935为服务器端口，使设置生效需要重启FMS服务器。3.2.3 设置应用程序路径打开FMS的安装目录，找到applications文件夹。打开fms.ini将VHOST.

10、APPSDIR的值修改为application的路径，本项目中的所有app都将放在d：fmsapplications文件目录下。为使设置生效，需要重启fms服务器。3.2.4 设置视频存放路径找到fms的安装目录，打开_defaultVHost中的Application.xml文件夹，将视频存放路径设置为D：myStreams，为使设置生效，需要重启fms服务器。3.3 管理FMS服务器 在登陆模块中，Server Name用来指定FMS服务器的名称。在Server Address可以添加服务器的IP地址，这个是本地的IP地址或者是远程的IP地址。然后输入先前设置好的用户名和密码进行登陆，同时

11、用户也可以添加多个服务器名称，这样就可以用一个控制台来管理多台FMS服务器。选中Remember my password复选框可以将当前的密码保存下来，这样下次登陆时就会自动填入。选中Automatically connect me复选框可以是下次管理控制台启动后自动登陆。在View Applications选项卡中，可以查看应用程序的活动日志，客户端的连接情况，共享对象，媒体流，服务器性能。在Manager Users选项中，可以添加管理员，删除管理员，修改密码等。在Manager Server选项卡中，可以查看服务器的细节、连接情况，应用程序、协议和服务器日志。第4章 界面设计聊天软件的用

12、户界面是指用之间户交流的窗口，所以该窗口应该尽量简洁，外观干净舒适，包含聊天基本的功能按键。在此基础上应该尽量的对其进行美化和规范化设计。4.1 结构设计软件界面如图4.1所示，其中包括聊天内容显示部分，聊天内容输入部分，表情框按钮，字体设置，发送按钮和服务器信息提示部分。4.2用户登录部分图4.1 用户登录页面4.3整体聊天页面布局聊天内容显示部分 发送表情框部分字体设置聊天内容输入部分第五章 详细设计与实现图4.2 聊天页面第5章 具体实现5.1文本聊天实现userName1用来显示自己的用户名，userName2用来显示聊天对象。其中userName1和userName2是俩个动态文本框

13、，实例名分别为userName1和userName2；peopleList是一个实例名为peopleList的List组件，他将用来显示列表；chatContent是一个实例名为chatContent的TextArea组件，用来显示聊天内容；willSendMsg是一个实例名为willSendMsg的TextInput组件，用来输入聊天内容；发送按钮时一个实例名为sendBtn的Button组件，单击它将把TextInput中的文字内容发送出去。当客户端与服务器端成功建立连接后，客户端通过mySO=SharedObject.getRemote方法建立一个远程共享对象mySO，给远程对象时有服务

14、器端脚本main.asc建立的。利用该对象，当有客户端连接或断开服务器时，可以立即刷新在线用户列表。SharedObject对象有本地和远程之分，本地的SharedObject对象类似cookie，利用它可以在本地计算机存储一些数据，如程序的运行次数、本地用户记忆的用户名和密码以及保存的聊天记录；远程的SharedObject对象可以看做实时的数据传输设备，利用它可以是多个客户端实时共享数据。远程的SharedObject共享对象通过SyncEvent.SYNC实时刷新数据，利用mySO.addEventListener（SyncEvent.SYNC，mySoSync）。FMS服务器相当于一个

15、中转站，某个客户端参与聊天室，它先把聊天的内容发送大FMS服务器，然后又FMS服务器转发给其他客户端或某个客户端。要实现这一功能需要用NetConnection的call方法去调用服务器端的函数，如myNC.call（“msgFromClient”,null，userName1.text,userName2.text,msg,allPeople）；服务器端的函数msgFromClient从客户端获取传递来的参数后，在利用call方法去调用客户端的函数，并传递参数，实现不同用户之间的信息传递。一般需要指定客户端NetConnection的client对象为this。5.1.1 表情框对每个表情建

16、一个class，并且赋初值。public var m_pic5:Class;设置每个图片的高度height、宽度width，并且建立触发事件events.IndexChangedEvent，用来改变图片。建立一个鼠标触发事件OnClick， 当鼠标点击想要发送的表情时，就会选中functionOnClick（event：MouseEvent）。利用函数初始化function setData（pic1:Class, pic2:Class, pic3:Class, pic4:Class, pic5:Class）初始化了五个聊天表情。5.1.2 XXXXX5.1.3 XXXX5.2 连接FMS服务器

17、 使用FMS捕获用户客户端的视频和音频流。信息通过FMS使用Real-Time Messaging Protocol （RT协议被传递到客户端（用户计算机上必须要有Flash Player）。当一个Flash影片应用程序要使用 FMS时，Flash Player就连接到服务器，这样就在客户端Flash Player和FMS之间提供了往复的源源不断的信息流，称为network stream（网络流）。其他的用户也可以同时连接到相同的FMS接收信息、更新数据以及音频和视频，这些都是“网络流”。 Main.asc是FMS专用的服务器端文件，它和客户端的ActionScript协同工作以实现各种功能。

18、有一点需要注意的是除了使用main.asc外，还可以使用main.js、textChat.asc、textChat.js作为文件名，它们都可以作为默认的服务器端脚本被客户端访问到。当用户请求连接时，执行application.onAppStart一次，以后再有客户连接服务器时，该函数不再执行。使用trace（“程序启动”）来监视程序的运行情况。通过NetConnection的connect方法连接到fms服务器,这时候服务器并不能完全连接。（rtmp:/localhost/PlayStreams），并添加网络连接的事件处理函数，在此函数内判断网络连接状态，如果连接成功（连接状态：NetConn

19、ection.Connect.Success）则通过NetStream建立视频流，调用NetStream的play方法播放指定的流媒体文件，然后将流附加到视频对象并显示在flash界面上。如图5.1所示。图5.1 服务器流程图5.2.1 fms与flash交互 建立一个Flash文件（ActionScript 3.0）。然后打开组件面板（可以按Ctrl+F7）从组件面板中拖拽一个button组件到刚建立好的Flash的舞台，然后通过属性面板（可以按Ctrl+F3）将button取名为（Flash中叫他为实例名,舞台中的每一个组件就是一相对应的对象的实例）btnConnFMS。完成上面两步后回到

20、舞台，鼠标在舞台中空白位置点击一下，然后同样打开属性面板，你会发现现在的属 要实现两端通信，在客户端和服务器端都需要编码，一边发起通信请求和接收通信响应信息（flash客户端）,一端则提供接收请求进行业务处理等（FMS服务器端）。以flash客户端于FMS服务器通信为核心。flash客户端向FMS服务器端发起请求，调用FMS服务器上的一个方法，然后将FMS服务器上的方法返回值输出到控制台。flash端的开发可以有两种方式实现：Flash和Flex。该程序使用的方式是Flex。如图5.2所示。5.2.2服务器管理流程新建一个数组Array（），在服务器新建立一个远程共享对象，mySO，当有客户端

21、连接时执行；将Client对性面板和先前的有些不一样，在发布选项下找到“类”，添加为“ConnFMS”，表示将要通过ConnFMS.as这个类文件来对当前的这个Flash进行编码。由ConnFMS.as来负责Flash的编码工作，建立一个ActionScript类文件，这个类文件一定是“ConnFMS.as”。象newClient放进数组，为Client对象newClient添加userName属性并赋值；为mySO添加新属性并赋值，定义服务器端函数，调用客户端函数，将消息分下去；5.3 在线用户列表设计与实现客户在线列表靠远程共享对象实现，在服务器端创建远程共享对象application.m

22、ySO=SharedObject.get（“mySO”,false）;其中参数mySO指定了共享对象的名称，false表示数据不再服务器上保存。当有客户端连接服务器是，会触发application.onConnect事件，application.onConnect=function（newClient,userName）其中第一参数newClient是一个Client对象，它用来标识每一个客户端，它具有agent、ip、uri等属性，在该事件中，每一个Client对象都被this.listusername=newClient；放入数组备用，以后需要服务器端调用客户端函数时，就从list数组中吧

23、相应的Client对象出来使用。图5.2 服务器流程图appliction.listallPeoplei.call（“msgFromServer”,null,msg）;服务器端允许客户端连接用的是：application.acceptConnection（newClient）；拒绝客户端连接用的是：application.rejectConnection（newClient，err）。 当服务器拒绝客户端连接时，会触发客户端的事件，在客户端可以利用event.infoapplication.message；接受从服务器端返回的错误信息。如果连接成功，客户端就可以开始聊天了。聊天内容首先由一个客

24、户端发送到服务器，然后由服务器转发给所有客户端。聊天内容的发送流程如图5.3所示。图5.3聊天内容发送流程图 5.3.1显示列表（display list）在显示列表中访问某个显示实例，首先建立使用路径。路径就像文件系统中的文件一样，通过一个个文件夹就可以找到某个文件。通过路径一级级下去，就可以找到某个显示实例。利用容器显示实例（任何一个显示实例肯定在一定的显示容器中。实例化显示类的时候，使用addChild（）方法把显示实例添加到显示列表中。如表5-1所示。表5-1 添加和移除显示实例的方法方法名说明addChild将显示实例添加到显示列表中addChildAt通过索引吧显示实例添加到显示列表removeChild从显示列表移除显示实例removeChildAt通过索引从显示列表移除显示实例 Stage下有俩个显示实例，要用程序得到显示实例的个数，使用DisplayObjectC