LearningFMS3中文版第4章 升级了的文本聊天

4.6.一个升级了的文本聊天

现在你已经对共享对像怎么工作有了一具概念，下一个应用程序向你展示了怎么样制作一个漂亮的文本聊天应用程序。到了这一点，涉及到的共享对象一直很简单，这样您就可以看到基本的。不过，现在你需要重新考虑用户界面，为这一个文字聊天的应用程序。

在任何应用程式，你不能认为代码简单。尤其使用Flash Media Server 3 。你应该考虑交互作用和由两个或更多的人的动作。您想要体验您的应用程序变得尽可能容易－容易，没有人使用您的应用程序的时候注意到它。是的，当然，除非您想要，应用程序带给用户一些注意。
4.6.1.需要考虑的一些关于聊天者的琐碎东西

当用户参与一个文本聊天，他们的手在键盘上。一旦他们完成消息输入，不得不把手从键盘上移开，去用鼠标点击发送按纽，他们应该可以选择使用键盘来发送他们的消息。所以，第一件要做的事就是在TextSO例子中添加它。当一个用户完成当前消息的输入，他可以点击发送按纽或者按下Enter键来发送消息。

另外，不同的用户在聊天室中，当他们发言时，应该有一个标识。添加一个名称到一个消息中有两个重要的作用：1.与其它发言人区分开来，有助于明确的通信。2.标识了发言人，所以每个人都知道是谁发的言。

作为最后一步，使聊天者变得更轻松，一旦聊天者在输入窗口中输入消息，该消息应消失。为下一步的消息输入而消除消息，这是一个不大的事，但它使得聊天流程更平滑。

要回顾一下，这里有您需要创建的项目，以提高文字聊天的应用程序：

   1. 允许用户按下回车键来发送消息，而不需要去点击发送按纽
   2. 依照用户分开在聊天窗口中的消息
   3. 在用户发送一个消息后，输入框中的消息被消除

4.6.2.一个更好的聊天应用程序

这个升级的实时聊天应用程序，需要添加更多的事件和第二TextInput组件 ，给参加者可输入他们的名字。为了使它容易，应用还将包括一个焦点事件（ FocusEvent），使当一个人输入他或她的名字，输入框中的提示消息消失。此外，应用程序应该验证用户输入一个名称，不要保留提示消息或者一个空白的名字在输入框中。

为了给参与者利用键盘输入的机会，该脚本将包括ComponentEvent类。这个类，能侦听存放在常量中的不同事件，包括ENTER，来取得 Enter 或者 Return键。由于应用程序只侦听Enter/Return，该脚本不使用KeyboardEvent类。如果这样做将会要求应用程序侦听每一个按键，在聊天的应用中，这样会对处理器添加许多的工作。

按下面步骤来建立应用程序：

   1. 打开TextSO.fla，改变文档类为TextChat，把TextSO.fla文件另存为TextChat.fla。
   2. 使用18号字体，建立一个静态文本，内容为“Text Chat Center”。位置x=16,y=17。参考图4-6
   3. 建立一个TextChat.as，输入以下代码：

Example 4-5. TextChat.as

    Code View:

   package

    {

      import fl.controls.TextArea;

      import fl.controls.Button;

      import fl.controls.TextInput;

      import flash.display.Sprite;

      import flash.events.SyncEvent;

      import flash.events.NetStatusEvent;

      import flash.events.MouseEvent;

      import flash.events.FocusEvent;

      import flash.net.SharedObject;

      import flash.net.NetConnection;

      import fl.events.ComponentEvent;

     

      public class TextChat extends Sprite

      {

            private var button:Button;

            private var text_so:SharedObject;

            private var nc:NetConnection;

            private var textArea:TextArea;

            private var textInput:TextInput;

            private var chatName:TextInput;

            private var rtmpGo:String;

            private var good:Boolean;

            private var catchKey:Boolean;

            private var noName:Boolean;

            public function TextChat ()

            {

                 //Set up UIs

                 textArea=new TextArea();
      textArea.setSize (500,280);

                 textArea.move (20,54);

                 addChild (textArea);

     

                 textInput=new TextInput();

                 textInput.setSize (500,24);

                 textInput.move (20,340);

                 textInput.addEventListener (ComponentEvent.ENTER,checkKey);

                 addChild (textInput);

     

                 button=new Button();

                 button.width=50;

                 button.label="Send";

                 button.move (20,370);

                 button.addEventListener (MouseEvent.CLICK,sendMsg);

                 addChild (button);

     

                 chatName=new TextInput;

                 chatName.setSize (100,24);

                 chatName.move (80, 370);

                 chatName.text="<Enter Name>";

                 chatName.addEventListener (FocusEvent.FOCUS_IN,cleanName);

                 addChild (chatName);

     

                 rtmpGo = "rtmp://192.168.0.11/basicSO";

                 nc = new NetConnection( );

                 nc.connect (rtmpGo);

                 nc.addEventListener (NetStatusEvent.NET_STATUS,doSO);

            }

     

            private function doSO (e:NetStatusEvent):void

            {

                 good=e.info.code == "NetConnection.Connect.Success";

                 if (good)

                 {

                       //Set up shared object

                       text_so=SharedObject.getRemote("test",nc.uri,false);

                       text_so.connect (nc);

                       text_so.addEventListener (SyncEvent.SYNC,checkSO);

                 }

            }

     

            private function checkSO (e:SyncEvent):void

            {

                 for (var chng:uint; chng<e.changeList.length; chng++)

                 {

                       switch (e.changeList[chng].code)

                       {

                            case "clear" :

                                 break;

     

                            case "success" :

                                 break;

     

                            case "change" :

                                 textArea.appendText (text_so.data.msg + "\n");

                                 break;

                       }

                 }

            }

     

            private function cleanName (e:FocusEvent):void

            {

                 chatName.text="";

            }

     

            private function sendMsg (e:MouseEvent):void

            {

                 noName=(chatName.text=="<Enter Name>" || chatName.text=="");

                 if (noName)

                 {

                       textArea.appendText ("You must enter your name \n");

                 }

                 else

                 {

                       text_so.setProperty ("msg",chatName.text +": "+ textInput.text);

                       textArea.appendText (chatName.text +": "+textInput.text + "\n");

                       textInput.text="";

                 }

            }

     

            private function checkKey (e:ComponentEvent):void

            {

                 noName=(chatName.text=="<Enter Name>" || chatName.text=="");

                 if (noName)

                 {

                       textArea.appendText ("You must enter your name \n");

                 }

                 else

                 {

                       text_so.setProperty ("msg",chatName.text +": "+ textInput.text);

                       textArea.appendText (chatName.text +": "+textInput.text + "\n");

                       textInput.text="";

                 }

            }

      }

    }

Figure 4-6. Text chat with name-delineated messages

clip_image002

一旦你放置了所有代码，与另一个使用者测试（或在您的计算机上打开两个浏览器）。这种应用程序对独立实时文本聊天或者作为另一个应用程序的一部分，作为一个聊天模块。如果你把它放在服务器上，您可以在聊天室与世界各国人民聊天。您甚至可能考虑重新配置您的Flash Media Server，以接纳更多并发用户，使用较小的带宽，因为相比音频和视频，文本传输占用了较少的带宽。