Flex and fms3 create online chat rooms (using netconnection objects and sharedobject objects)

Flex, fms3 SeriesArticleNavigation

1. Index of flex and fms3 articles

 

This article isVideo chat, conference Development Instance series articlesThe links to all the articles in this series are as follows:
Http://www.cnblogs.com/aierong/archive/2008/12/30/Flex.html#sp

1. Understand
For more information about flex and fms3, see
Http://www.cnblogs.com/aierong/archive/2008/12/30/flex1.html

 

2. Development Preparation
Flex development tool (IDE): for installation of flex builder 3, see
Http://www.cnblogs.com/aierong/archive/2008/12/26/MyCrack.html

Fms3
Adobe official website provides a free development version with a maximum of 10 connections (the retail version is USD 4500)
You can leave a message if you cannot find it.
When fms3 is installed, all the way to next will require you to enter the serial number in the middle. If you do not enter the serial number, it will be a free development version. Before the end of the installation, you will need to enter the account and password that will be used to enter the management of the fms3, do not lose.

Flash Player debug (Flash Player debugging)
Debug in debug mode of flex builder 3CodeAdobe official website provides free download

 

3. Understand the jsondobject object

Once the data (chat record) in the mongodobject object is modified by any client, the MS sends the latest chat record in the current mongodobject to all clients (broadcast ), refresh the data displayed in the client chat window.

 

4. Start code
Procedure:
(1) Find the application folder under the installation directory of the FMS. There are already two directories, regardless of which, create another folder test_myapp in the application, this is equivalent to the root directory of the server project in our chat room (the subsequent jsondobject object will be stored here)

(2) Start the FMS
In the installation directory, find the Tools Folder and click startserverservice. BAT to start the FMS. There is also a stopserverservice. BAT in this folder that stops the FMS.
In fact, you can also go to the Start Menu of windows to start Adobe Flash Media Server 3.0.1 and start Flash Media Administration Server 3.0.1.

(3) log on to the FMS
In the installation directory, find fms_adminconsole.swf. Click and enter the username and password you entered during installation. Then, the logon is successful.

(4) Open flex builder 3 and create a flex project,ProgramThe type is Web (easy to debug)

(5) drag the control in the main mxml. The interface is as follows:

The Code is as follows:
<Mx: textarea x = "33" Y = "10" Height = "159" width = "366" id = "txt_content"/>
<Mx: textinput x = "33" Y = "177" width = "62" id = "txt_nickname"/>
<Mx: Label x = "103" Y = "179" text = ""/>
<Mx: textinput x = "146" Y = "177" width = "185" id = "txt_message"/>
<Mx: button x = "334" Y = "177" label = "send" id = "btn_send"/>

(6)
Start at <mx: SCRIPT>
<! [CDATA [

]>
</MX: SCRIPT>
Code Writing in the tag group

The import package and definition variables are as follows:
Import MX. Collections. arraycollection;
Import MX. Controls. Alert;
 
Private var mynetconnection: netconnection;
Private var serverapp: String = "rtmp: // 192.168.0.249/test_myapp ";
Private var talk_so: Export dobject;

Mynetconnection: the object used to connect flex to the FMS.
Serverapp: defines that the address of the FMS Service uses the rtmp protocol. The IP address is added to the root directory of the server project.
Talk_so: The export dobject object in the FMS.

(7) define the chat record object message
Package Vo
{
Public class message
{
Public Function Message ()
{
}

Public var nickname: string;
Public var MSG: string;
Public var time: date;

}
}
All chat records are stored in a collection object named msglist. For each chat record, I specifically defined the message object

(8) define a method for exchanging elements in an array
Private function convertarraycollection (arrnew: arraycollection, arrold: arraycollection): void
{
Arrnew. removeall ();

For (var I: Int = 0; I <arrold. length; I ++)
{
Arrnew. additemat (arrold. getitemat (I), I );
}
}

(9) define the UI font size to 12 (Chinese characters must be 12 to be clearly displayed). The initial method is init.
<Mx: Application xmlns: MX = "http://www.adobe.com/2006/mxml" layout = "absolute" fontsize = "12" creationcomplete = "Init ()">

(10) Implement Init ()
Private function Init (): void
{
Btn_send.addeventlistener (mouseevent. Click, btnsenclickhandler );
Mynetconnection = new netconnection ();
Mynetconnection. addeventlistener (netstatusevent. net_status, netstatushandler );
Mynetconnection. Connect (serverapp );
}

Code Description:
Add a mouse click event btnsenclickhandler to the button
Initialize netconnection
Add netstatus event netstatushandler to mynetconnection

(11) Implementing netstatushandler
Private function netstatushandler (EVT: netstatusevent): void
{
Trace (evt.info. Code); // used for code debugging

If (evt.info. Code = "netconnection. Connect. Success ")
{
Talk_so = export dobject. getremote ("talk", mynetconnection. Uri, true );
Talk_so.addeventlistener (syncevent. Sync, talksosynchandler );
Talk_so.connect (mynetconnection );
}
Else
{
Alert. Show ("link failed" + evt.info. Code );
}
}

Code Description:
Schedule netstatushandler when the netconnection object reports its status or error conditions.
The netstatus event contains an info attribute, which is an information object that contains event-specific information (for example, whether the connection attempt succeeds or fails.
If the connection to the FMS is successful, the remote export dobject object will be initialized.

Export dobject. getremote () Description:
Export dobject. getremote () to create a remote shared object permanently retained on the server, such as the phone book. Each time the client changes the shared object, the modified data can be used by all clients that are currently or subsequently connected to the object. If the object is permanently retained locally and the client changes the data when it is not connected to the server, the data will be copied to the object the next time the client connects to the remote shared object.
To create a remote shared object, call getremote () and connect () to connect the remote shared object to the server.

Sharedobject. getremote () parameter description:
1st parameters: name of the remote shared object. The name can contain a forward slash (/). For example, work/addresses is a legal name. Space is not allowed in the shared object name or the following characters are not allowed :~ % & \;: "',>? ? #
In fact, it is the name of the file generated by the export dobject object. The extension of the export dobject file is *. FSO, so the file is generated here as talk. FSO, And the generated location is in a folder under test_myapp.
2nd parameters: the URI of the server that stores the shared object. This URI must be the same as the uri of the netconnection object passed to the connect () method. In this program, rtmp: // 192.168.0.249/test_myapp
3rd parameters: Specifies whether the data attribute of the shared object is permanently stored locally or remotely.
True: indicates that only shared objects on the server are permanent.
False: the shared object on the specified client or server is not permanent. False indicates that the mongodobject object is stored in the memory. If the server test_myapp is stopped, the mongodobject object in the memory is cleared.

another important code is
talk_so.addeventlistener (syncevent. sync, talksosynchandler);
This is a listener for adding synchronization events to remote mongodobject objects. Once the remote mongodobject object is modified by any client, then, the System Broadcasts the latest mongodobject object to all clients for data synchronization. In this way, syncevent of the client is triggered. sync events. Only when the client adds a listener for this event can it know that the public mongodobject object has been modified and the latest version of information can be obtained.

(12) Implement talksosynchandler
Private function talksosynchandler (EVT: syncevent): void
{
Txt_content.text = "";
If (talk_so.data.msglist! = NULL)
{
VaR TMP: arraycollection = new arraycollection ();
Convertarraycollection (TMP, talk_so.data.msglist as arraycollection );

For (var I: Int = 0; I <TMP. length; I ++)
{
VaR message: Object = TMP. getitemat (I );

VaR fullmsg: String = message. Nickname + "in" + message. Time. totimestring () + "say:" + message. MSG;

Txt_content.text = txt_content.text + fullmsg + "\ n ";
}
}
}

Code Description:
The callback function is to retrieve the msglist object in talk. mongodobject, traverse all the message objects in it, and refresh the display control to display all the records.

(13) Click the implementation button to send the chat record.
private function btnsenclickhandler (EVT: mouseevent): void
{< br> var arr: arraycollection = new arraycollection ();
If (talk_so.data.msglist = NULL)
{< br> arr = new arraycollection ();
}< br> else
{< br> convertarraycollection (ARR, talk_so.data.msglist as arraycollection);
}< br> var OBJ: message = new message ();
obj. nickname = txt_nickname.text;
obj. MSG = txt_message.text;
obj. time = new date ();
arr. additem (OBJ);
talk_so.setproperty ("msglist", arr);
txt_message.text = "";
}

Code Description:
If msglist in mongodobject-talk does not exist (you are the first user in the chat room), create a collection object and add the message object to the collection.
If msglist already exists, obtain the set object and insert the new chat record to the end.
Finally, you can use the synchronized dobject. setproperty ("name", value) function to write your updated chat record list to a public synchronized dobject object.
Call setproperty () to change the attributes of the data object. The server updates these attributes, schedules sync events, and sends these attributes back to the connected client. This is why every client can see the same chat record.

(14) run the program

(15) Situation of the FMS Server
We can see the connection and export dobject of the client.

(16) code download
Http://files.cnblogs.com/aierong/fmsDemo.rar
After receiving the code, please return to the article and leave a message! If you don't receive it, I can send it again!
Code is provided for mutual learning and discussion! Please share more!
1. If you have any questions about the code, you can leave a message in the comment area of the article. I will do my best to reply to you!
2. If you find a bug while running the code, or have any suggestions or comments, you can leave a message in the comment area of the article and I will correct it in time!

Tips for using the comment area:
Comments in the comment area (using advanced comments) can be pasted with pictures. If there is a problem that is hard to describe, you can paste pictures and text to describe them together.
Thank you!

 

 

Favorites and sharing

Add QQ bookmarks to Baidu souzang {
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
Window. Open ('HTTP: // myweb.cn.yahoo.com/popadd.html? Url = '+ encodeuricomponent (document. location. href) + '& Title =' + encodeuricomponent (document. title), 'yahoo ', 'scrollbars = Yes, width = 440, Height = 440, Left = 80, Top = 80, status = Yes, resizable = Yes ');
}
}
}
}
}
} "> Add to Yahoo favorites

RSS subscribe to me What is RSS?

Dongguan. Net Club

Welcome to join