More on Nonpersistent Client-Side Remote Shared Objects - A Better Chat Application

(Page 4 of 4 )

With this knowledge in hand, we’re all set to create a better text chat application. This one has shared objects for both a username (the person who typed the message) and the text itself. In this way, you can see who’s saying what as shown in Figure 4-6. Use Figure 4-6 as a guide to instance names and the placement of objects on the stage. Here are the classes and objects you’ll use:

Classes
   NetConnection

   SharedObject

Objects
   Input Text Fields (2)

   TextArea Component (1)

   Button Component (2)

The following steps show how to put it together:

1. Open up a new Flash document and set up the following layers, from top to bottom: Actions, Buttons, Text, and Labels.
   
2. Select the Buttons layer and add two button components using the instance namesconnect_buttonandsend_button placing them as shown in Figure 4-6. Lock the layer.
   
3. Click the Text layer and add one TextArea component and provide it with the instance namechat_ta. By using a TextArea component instead of a dynamic text field, we get a built-in scroll bar.
   
4. Also with the Text layer selected, add two input text fields using the Text tool. Name the top onename_txtand the bottom onemessage_txt. Use Figure 4-6 for positioning the Text fields. Lock the layers. (I added a drop shadow to both input text fields and a Logo. Add your own logo and unless you are using Flash 8, skip the drop shadows.)
   
   
   Figure 4-6.  Objects and instant names
   
5. Once all of your objects are in place, click on the first frame of the Actions layer and add the following script:

    1  //Label button components
    2  connect_button.label = "Connect";
    3  send_button.label = "Send";
    4  // Open connection to server
    5  var nc:NetConnection = new NetConnection();
    6  nc.onStatus = function(info) {
    7      chat_ta.text = info.code+newline;
    8      if (info.code == "NetConnection.Connect.Success") {
    9         connect_button.label = "Connected";
   10      }
   11  };
   12  var rtmpGo:String;
   13 var text_so:SharedObject;
   14 rtmpGo="rtmp:/ztextchat"
   15  //rtmpGo = "rtmp://192.168.0.11/ztextchat";
   16 function init() {
   17      if (connect_button.label == "Connect") {
   18        nc.connect(rtmpGo);
   19     } else {
   20         connect_button.label = "Connect";
   21        nc.close();
   22     }
   23      chat_ta.text = "";
   24     text_so = SharedObject.getRemote("sharedtext",nc.uri,false);
   25     text_so.connect(nc);
   26     text_so.onSync = function(list) {
   27         for (var i = 0; i<list.length; i++) {
   28             //"textValue" is the name of the text_so.data for text chat data. Ln41
   29             if (list[i].name == "textValue" && list[i].code != "success") {
   30                 _level0.chat_ta.text += text_so.data.uname+": "+text_so.data.
      textValue;
   31                 talk_ta.vPosition = talk_ta.maxVPosition;
   32                 break;
   33              }
   34          }
   35      };
   36  }
   37  connect_button.addEventListener("click", init);
   38 //Send remote shared object
   39 var sender:Object = new Object();40 sender.click = function() {
   41     text_so.data.uname = name_txt.text;
   42     text_so.data.textValue = message_txt.text+newline;
   43     chat_ta.text += name_txt.text+": "+message_txt.text+newline;
   44     talk_ta.vPosition = talk_ta.maxVPosition;
   45     message_txt.text = "";
   46  };
   47  send_button.addEventListener("click",sender);
   48  //Send with Key Press
   49  function keyMessage() {
   50      if (Key.isDown(Key.ENTER)) {
   51         text_so.data.uname = name_txt.text;
   52         text_so.data.textValue = message_txt.text+newline;
   53         chat_ta.text += name_txt.text+": "+message_txt.text+newline;
   54         talk_ta.vPosition = talk_ta.maxVPosition;
   55          message_txt.text = "";
   56      }
   57  }
   58 var keySend:Object = new Object();59 keySend.onKeyDown = keyMessage;
   60 Key.addListener(keySend);

Once you have all of the code in, test it with another user (or just open two browsers on your computer). This kind of application is useful for both a standalone real-time text chat or as part of another application as a chat module.

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

Comments On: More on Nonpersistent Client-Side Remote Shared Objects

· This article is an excerpt from the book "Learning Flash Media Server 2, an O'Reilly...   >>> Post your comment now!