Construct a chat room using flash and XML

Click here to download the source file
In the previous tutorial, we introduced the principles of combining flash and XML and the implementation of a forum. Next we will continue to combine flash and XML to implement a simple chat room, it provides functions such as online chat, online personnel list, online time, and simple management operations. A chat room with complete functions can be implemented with slight modifications as needed.
I. Principles
Using Flash and XML to construct a chat room is the same as using flash and ASP to construct a chat room. First, an XML request is sent to the server on the flash end, and then wait for the XML return value from the server end. After the value is returned to the Flash end, the returned XML string is interpreted, perform operations based on the corresponding values.
In flash, we mainly use XML string construction and sendandload () function operations. In the ASP section, we mainly use global. the ASA file and application () attributes define several application objects first, and then place the content to be maintained in the Application object. When using the object, you can retrieve it directly from the application object.
The following describes the functions of the chat room one by one. Each introduction is divided into three parts: "transmitted XML", "Flash", and "asp.
2. Login
Login sends the user name and password to the server in XML format, and the server returns the verification results in XML format.
A. Passed XML
1. Request Message

<Login> <username> User Name </username> <PWD> password </pwd> </login>
2. Response Message

<Login> <usrename name = "User Name" Right = "permission"> User Name </username> </login>
B. Flash part
1. Create a New FLASH file in Flash MX 2004, set the frame label of the first frame of the scenario to "login", and add the Statement on the ActionScript panel:

Stop ();
2. In the first frame scenario, use a text tool to pull two text boxes of the "input type" type, and set the variable name VaR to "username" and "userpwd" respectively ", this is used to enter the user name and password.
3. Create a New button and drag it to the first frame, as shown in position 1. Add the following statement to the panel of the button:

On (release ){
If (length (_ root. username) = 0) {// comment 1
_ Root. Username = "guest ";
} Else if (length (_ root. userpwd) = 0) {// comment 2
_ Root. Username = "guest ";
}
Loginxml = New XML (); // comment 3
Loginelement = loginxml. createelement ("login"); // comment 4
// Name Node
Nameelement = loginxml. createelement ("username"); // comment 5
Namenode = loginxml. createtextnode ("name"); // comment 6
Namenode. nodevalue = _ root. Username;
Nameelement. appendchild (namenode); // Note 7
// PWD Node
Pwdelement = loginxml. createelement ("PWD"); // comment 8
Pwdnode = loginxml. createtextnode ("PWD ");
Pwdnode. nodevalue = _ root. userpwd;
Pwdelement. appendchild (pwdnode); // comment 9
Loginelement. appendchild (nameelement); // Comment 10
Loginelement. appendchild (pwdelement );
Loginxml. appendchild (loginelement); // comment 11
Xmlrepley = New XML (); // comment 12
Xmlrepley. onload = onloginreply; // comment 13
Function onloginreply (SUCCESS ){
If (SUCCESS ){
If (xmlrepley. firstchild. firstchild. Attributes. Right = "1") {// comment 14
_ Root. gotoandplay ("Main ");
} Else {
_ Root. Username = "Logon Failed ";
}
}
}
Loginxml. sendandload ("http: // localhost/xmlchat/login. asp", xmlrepley); // comment 15
}
Note 1: check the length of the user name in the input box. If it is null, the default value is guest.
NOTE 2: Check the password length in the input box.
NOTE 3: Create an XML object to be sent to the server.
Note 4: Create a login Node object.
Note 5: Create a username Node object. Note that text content cannot be placed directly in the Element Object. text content must be placed in the text Node object. For details, see the content in XML. createelement () and XML. createtextnode () in the Flash help file.
Note 6: Create a text Node object to place the text content of the username node.
Note 7: insert the created text node to the username Node object.
Note 8: Create a PWD Node object and a text node respectively.
Note 9: insert the text node into the PWD Node object.
Note 10: insert the username Node object to the login Node object, and insert the PWD Node object to the login Node object.
Note 11: insert the login Node object to the created XML object to construct a complete XML object. Note that the XML object is built from the very beginning.
Note 12: Create an XML object, which is used to place the received XML object.
Note 13: Set the response function for receiving XML objects. This function is triggered when the server returns an XML object.
Note 14: Determine whether the node attribute in the returned XML object meets the requirements.
Note 15: The sendandload () function is used to send XML objects from flash to the server and receive XML objects returned from the server.
C. asp
1. Create a new file named Global. Asa. Enter the following content:

<Script language = "VBScript" runat = "server">
Sub application_onstart
Application ("visitornum") = 0
Application ("visitorname") = ""
Application ("allcansee") = ""
End sub
</SCRIPT> 2. Create an ASP file named login. asp. Enter the following content:

<%
Set myfileobject = server. Createobject ("scripting. FileSystemObject") 'comment 1
Set mytextfile = myfileobject. createtextfile ("G: \ writing \ flashxmlchat \ source \ login. xml", 8, true) 'comment 2
Mytextfile. writeline (request. Form) 'comment 3
Set objdom = server. Createobject ("Microsoft. xmldom") 'comment 4
Objdom. loadxml (request. Form) 'comment 5
Set objname = objdom.doc umentelement. selectsinglenode ("// login/username") 'comment 6
Username = objname. text' comment 7
Set objpwd = objdom.doc umentelement. selectsinglenode ("// login/pwd") 'comment 8
Pwd = objpwd. Text
Righ = "-1"
'Judge
Set conn = server. Createobject ("ADODB. Connection") 'comment 9
Conn. Open "provider = Microsoft. Jet. oledb.4.0; Data Source =" & server. mappath ("/xmlchat. mdb") 'comment 10
Set rs = server. Createobject ("ADODB. recordset") 'comment 11
Strsql = "select * From userinfo where username = '" & username & "' and Pwd = '" & PWD & "'" 'comment 12
Rs. Open strsql, Conn, 1, 1
If not (Rs. bof and Rs. EOF) then' comment 13
Application ("visitornum") = Application ("visitornum") + 1
Application ("visitorname") = Application ("visitorname") & username & "," & RS ("ID") & ";" 'comment 14
Righ = RS ("right ")
Tempstr = username & "login ......"
Application ("allcansee") = Application ("allcansee") & tempstr 'comment 15
Else
Righ = "0"
End if
Rs. Close 'comment 16
Conn. Close
'Back
Response. write ("<login> <usrename name =" & username & "Right =" "& righ &" ">" & username & "</username> </login> ") 'comment 17
%>
Note 1: Use the FileSystemObject component to create a file object and write the content transmitted during communication in the file for debugging.
NOTE 2: Modify the file path as needed.
NOTE 3: write all the content transmitted by request. Form in the file, leaving debugging marks on the server side. You can use the log mode to further improve this function.
Note 4: Create an XML object. You can find more information about XML operations in the ms xml package.
Note 5: Use the loadxml () function to import the XML format string transmitted by the flash end.
Note 6: Create an object for the username node.
Note 7: Get the content of the username node.
Note 8: Create an object of the PWD node and obtain the content of the PWD node.
Note 9: Create a database connection set.
Note 10: Create An ADO connection to the database. Access 2000 is used here. For the format of the database, see the appendix below. Pay attention to the database storage location.
Note 11: Create a database recordset.
Note 12: Construct an SQL string based on the obtained user name and password.
Note 13: Check whether the query result is null.
Note 14: add the user name and ID to the application ("visitorname") object.
Note 15: add the login information to the application ("allcansee") object.
Note 16: Close the database connection and release resources.
Note 17: Construct an XML string and write it to the Flash end using the write function.
3. Send
The basic principle of the sending part is to send XML-format chat content from the flash end to the server side, and add the chat content to the application ("allcansee") object on the server side, the modified application ("allcansee") object is returned to the Flash end in XML format.
A. Passed XML
1. Request Message

<Send> <username> User Name </username> <content> sent content </content> </send> 2. Response Message

<Send> <result sflag = "true" scontent = "content displayed in the chat room"> User Name </result> </send>
B. Flash part
1. Add a key frame to the 5th frame of the main scenario and name the frame as "Main". Add the following statement to the action Panel of the frame:

Now = new date (); // Note 1
Starttime = now. gettime ();
Stop ();
Note 1: This is used to calculate the online time below.
2. Pull a text box in the home scene, as shown in Property setting 2.

3. Add a button in the main frame of the main scenario, and the displayed content is "send ". Add the following statement to the action Panel of the button:

On (release) {
If (length(_root.txt send) = 0) {// Note 1
_root.txt send = "the content is blank ";
}< br> sendxml = New XML (); // comment 2
sendelement = sendxml. createelement ("send"); // comment 3
// Name node
nameelement = sendxml. createelement ("username"); // comment 4
namenode = sendxml. createtextnode ("name"); // Note 5
namenode. nodevalue = _ root. username;
nameelement. appendchild (namenode); // Note 6
// content node
cntelement = sendxml. createelement ("content"); // Note 7
cntnode = sendxml. createtextnode ("CNT"); // comment 8
cntnode. nodevalue = _root.txt send;
cntelement. appendchild (cntnode); // comment 9
sendelement. appendchild (nameelement); // Comment 10
sendelement. appendchild (cntelement);
sendxml. appendchild (sendelement); // note 11

xmlsendrepley = New XML (); // comment 12
xmlsendrepley. onload = onsendreply; // note 13
function onsendreply (SUCCESS) {
If (xmlsendrepley. firstchild. firstchild. attributes. sflag = "true") {// note 14
_root.txt content = xmlsendrepley. firstchild. firstchild. attributes. scontent; // note 15
}else {
_root.txt content = "connection timeout ...... ";
}< BR >}< br> sendxml. sendandload ("http: // localhost/xmlchat/send. ASP ", xmlsendrepley); // comment 16
}< br> Note 1: Determine whether the sent content is empty.
NOTE 2: Create an XML object for sending.
Note 3: Create a send Node object.
NOTE 4: Create a username Node object.
Note 5: Create a text Node object to store the user name.
Note 6: add the created text Node object to the username Node object.
Note 7: Create a content Node object.
Note 8: Create a text Node object to store the content to be sent.
Note 9: add the created text Node object to the content Node object.
Note 10: add the created username and content object to the send Node object.
Note 11: add the created send Node object to the send object.
Note 12: Create an XML object for receiving.
note 13: Set the response function for receiving XML objects.
note 14: determine the value returned from the server and perform corresponding operations based on the judgment result.
note 15: display the content of the chat room.
note 16: Use the sendandload () function to send the XML Object of flash to the server, and receive XML objects returned from the server
C and ASP
Create a blank file named send. ASP. The content is as follows:

<%
Set myfileobject = server. Createobject ("scripting. FileSystemObject") 'comment 1
Set mytextfile = myfileobject. createtextfile ("G: \ writing \ flashxmlchat \ source \ login. xml", 8, true)
Mytextfile. writeline (request. Form) 'comment 2
Set objdom = server. Createobject ("Microsoft. xmldom") 'comment 3
Objdom. loadxml (request. Form) 'comment 4
Set objname = objdom.doc umentelement. selectsinglenode ("// send/username") 'comment 5
Username = objname. Text
Set objcnt = objdom.doc umentelement. selectsinglenode ("// send/content") 'comment 6
Content = objcnt. Text
Tempstr = username & "say:" & content &"..."
Application ("allcansee") = Application ("allcansee") & tempstr 'comment 7
'Back
Response. write ("<send> <result sflag =" "true" "scontent =" & Application ("allcansee ") & "> AA </result> </send>") 'comment 8
%>
Note 1: Use the FileSystemObject component to create a file object and write the content transmitted during communication in the file for debugging.
NOTE 2: write all the content transmitted by request. Form in the file, leaving debugging marks on the server side.
NOTE 3: Create an XML object.
Note 4: Use the loadxml () function to import the XML format string transmitted by the flash end.
Note 5: Create an object for the username node and obtain the corresponding content.
Note 6: Create the object of the content node and obtain the corresponding content.
Note 7: add the content sent from the flash end to the Application ("allcansee") object.
Note 8: Construct an XML string and write it to the Flash end using the write function.
4. Display chat content and online staff list
The basic principle of displaying chat content is to send an XML request from the flash end to display the chat content. On the server end, the application ("allcansee") content is sent to the Flash end in XML format, it is explained and displayed on the flash end.
The basic principle of displaying the online number list is to send an XML request to display the online number list on the flash end. The server sends the content of the application ("visitorname") object to the Flash end in XML format, it is explained and displayed on the flash end.
A. Passed XML
1. Request Message

<Refresh> <username> User Name </username> </refresh>
2. Response Message

<Refresh> <result cflag = "true" ccontent = "chat content" talker = "online staff list"> User Name </result> </refresh>

B. Flash part
1. Pull a text box in the home scene, and set attribute to 3.

2. Select the list component from the component library, pull a list in the scenario, and name it "talkerlist ". In this case, the layout should be 4.

3. Add a button in the main frame of the main scenario, and the displayed content is "refresh ". Add the following statement to the action Panel of the button:

On (release ){
Refreshxml = New XML (); // comment 1
Refreshelement = refreshxml. createelement ("refresh"); // comment 2
// Name Node
Nameelement = refreshxml. createelement ("username"); // comment 3
Namenode = refreshxml. createtextnode ("name"); // comment 4
Namenode. nodevalue = _ root. Username;
Nameelement. appendchild (namenode); // comment 5
Refreshelement. appendchild (nameelement); // Note 6
Refreshxml. appendchild (refreshelement );
Xmlrefreshrepley = New XML (); // comment 7
Xmlrefreshrepley. onload = onrefreshreply; // comment 8
Function onrefreshreply (SUCCESS ){
If (SUCCESS ){
If (xmlrefreshrepley. firstchild. firstchild. Attributes. cflag = "true") {// comment 9
_Root.txt content = xmlrefreshrepley. firstchild. firstchild. Attributes. ccontent; // Comment 10
Strtalker = xmlrefreshrepley. firstchild. firstchild. Attributes. talker;
_ Root. talkerlist. removeall (); // comment 11
If (strtalker. length> 0) {// comment 12
Talkerarray = new array (); // comment 13
Temparray = new array ();
Talkerarray = strtalker. Split (";"); // comment 14
For (I = 0; I <talkerarray. Length-1; I ++) {// comment 15
Temparray = talkerarray [I]. Split (","); // comment 16
_ Root. talkerlist. additem (temparray [0], temparray [1]); // comment 17
}
}
} Else {
_Root.txt content = "connection timeout ...... ";
}
}
}
Refreshxml. sendandload ("http: // localhost/xmlchat/refresh. asp", xmlrefreshrepley); // comment 18
}
Note 1: Create an XML object for sending.
NOTE 2: Create a refresh Node object.
NOTE 3: Create a username Node object.
Note 4: Create a text Node object to store the user name.
Note 5: add the created text Node object to the username Node object.
Note 6: add the created username object to the refresh Node object.
Note 7: Create an XML object for receiving.
Note 8: Set the response function for receiving XML objects.
Note 9: determine the value returned from the server and perform corresponding operations based on the judgment result.
Note 10: display the content of the chat room.
Note 11: Clear the content from the drop-down list in the scenario.
Note 12: Determine whether the online list returned from the server is empty.
Note 13: create two arrays to operate the online user name list.
Note 14: Call the split function of string to save the split string to the array.
Note 15: Read the string in the array cyclically and split it further.
Note 16: Call the split function of string to save the split string to the array.
Note 17: add the user name and ID number obtained after splitting to the drop-down list in the scenario.
Note 18: The sendandload () function is used to send XML objects from flash to the server and receive XML objects returned from the server.
C. asp
Create a new file named refresh. asp and add the following content:

<%
Set myfileobject = server. Createobject ("scripting. FileSystemObject") 'comment 1
Set mytextfile = myfileobject. createtextfile ("G: \ writing \ flashxmlchat \ source \ login. xml", 8, true) 'comment 2
Mytextfile. writeline (request. Form) 'comment 3
Set objdom = server. Createobject ("Microsoft. xmldom") 'comment 4
Objdom. loadxml (request. Form) 'comment 5
Set objname = objdom.doc umentelement. selectsinglenode ("// refresh/username") 'comment 6
Username = objname. Text
'Back
Response. write ("<refresh> <result cflag =" "true" "ccontent =" & Application ("allcansee ") & "talker =" & Application ("visitorname") & ""> AA </result> </refresh> ") 'comment 7
%>
Note 1: Use the FileSystemObject component to create a file object and write the content transmitted during communication in the file for debugging.
NOTE 2: create a file.
NOTE 3: write all the content transmitted by request. Form in the file, leaving debugging marks on the server side.
Note 4: Create an XML object.
Note 5: Use the loadxml () function to import the XML format string transmitted by the flash end.
Note 6: Create an object for the username node and obtain the corresponding content.
Note 7: Construct an XML string based on the chat room content and online staff list, and write the string to the Flash end using the write function.
5. display online time
The time function in Flash is powerful enough to calculate the online time on the flash end alone. The recorded start time is constantly reduced by the current time, and the online time is displayed.
A. Flash part
1. Pull a text box in the home scene and set the attribute to 5.

2. Press Ctrl + F8 to create a blank movie clip and drag the clip to the scenario, add the following statement on the clip action Panel (note that the statement is not in clip in the scenario ):

Onclipevent (load ){
TimeDate = new date ();
}
Onclipevent (enterframe) {// Note 1
Mytime = TimeDate. gettime (); // comment 2
_Root.txt time = "you are online" + math. round (math. ceil (mytime-_ root. starttime)/1000)/60) + "Minute"; // comment 3
Delete TimeDate; // comment 4
TimeDate = new date (); // comment 5
}
Note 1: triggered when the clip frame is played from the beginning.
NOTE 2: Obtain the current time.
NOTE 3: Convert the statistical seconds to minutes and display them.
Note 4: Delete the current time object.
Note 5: Re-construct a time object so that the latest time can be obtained continuously.
Vi. administrator permissions
In chat rooms, the management function is indispensable. Here we use the simple "kicker" function as an example to describe it.
A. Passed XML
1. Request Message

<Kick> <ID> User Name and ID string to be kicked </ID> </kick>
2. Response Message

<Refresh> <result kflag = "true" ccontent = "chat room content" talker = "online staff list"> User Name </result> </refresh>
B. Flash part
1. Create a New button in the scenario. The displayed content is "kicker". Add the following statement on the button's action panel:

On (release ){
Kickxml = New XML (); // comment 1
Sendelement = kickxml. createelement ("kick"); // comment 2
// ID Node
Nameelement = kickxml. createelement ("ID"); // comment 3
Namenode = kickxml. createtextnode ("ID"); // comment 4
Namenode. nodevalue = _ root. talkerlist. selecteditem. Label + "," + _ root. talkerlist. selecteditem. Data + ";"; // comment 5
Nameelement. appendchild (namenode); // Note 6
Sendelement. appendchild (nameelement );
Kickxml. appendchild (sendelement); // comment 7

Xmlkickrepley = New XML (); // comment 8
Xmlkickrepley. onload = onkickreply; // comment 9
Function onkickreply (SUCCESS ){
If (SUCCESS ){
If (xmlkickrepley. firstchild. firstchild. Attributes. kflag = "true") {// Comment 10
Strtalker = xmlkickrepley. firstchild. firstchild. Attributes. talker; // comment 11
_ Root. talkerlist. removeall (); // comment 12
If (strtalker. length> 0) {// comment 13
Talkerarray = new array ();
Temparray = new array ();
Talkerarray = strtalker. Split (";");
For (I = 0; I <talkerarray. Length-1; I ++ ){
Temparray = talkerarray [I]. Split (",");
_ Root. talkerlist. additem (temparray [0], temparray [1]); // comment 14
}
}
} Else {
_Root.txt content = "connection timeout ...... ";
}
}
}
Kickxml. sendandload ("http: // localhost/xmlchat/kick. asp", xmlkickrepley); // note 15 Note 1: Create an XML object for sending.
NOTE 2: Create a kick Node object.
NOTE 3: Create an ID Node object.
Note 4: Create a text Node object to store the ID.
Note 5: Assign the value from the drop-down list in the scenario to the text Node object.
Note 6: add the created text Node object to the username Node object.
Note 7: add the created kick object to the kick Node object.
Note 8: Create an XML object for receiving.
Note 9: Set the response function for receiving XML objects.
Note 10: determine the value returned from the server and perform corresponding operations based on the judgment result.
Note 11: Obtain the list of users returned from the server.
Note 12: Clear the drop-down list in the scenario.
Note 13: Check whether the user list returned from the server is empty.
Note 14: Split the user list returned from the server and add it to the drop-down list in the scenario.
Note 15: The sendandload () function is used to send XML objects from flash to the server and receive XML objects returned from the server.
C. asp
Create a new file named Kick. asp. Add the following content to the file:

<%
Set myfileobject = server. Createobject ("scripting. FileSystemObject") 'comment 1
Set mytextfile = myfileobject. createtextfile ("G: \ writing \ flashxmlchat \ source \ login. xml", 8, true) 'comment 2
Mytextfile. writeline (request. Form) 'comment 3
Set objdom = server. Createobject ("Microsoft. xmldom") 'comment 4
Objdom. loadxml (request. Form) 'comment 5
Set objname = objdom.doc umentelement. selectsinglenode ("// kick/ID") 'comment 6
Oldid = objname. Text
'Process the kicker action
Dim I, j, num' comment 7
I = 1
J = 1
Num = 0
Do While j <> 0
J = instr (I, application ("visitorname"), ";", 1)
If j <> 0 then
Num = num + 1
STR = mid (Application ("visitorname"), I, j-I)
Temppos = instr (1, STR, ";", 1) + 1
Usernum = mid (STR, temppos)
If usernum = oldid then
I = I-1
J = J + 1
Application ("visitorname") = mid (Application ("visitorname"), 1, I) & Mid (Application ("visitorname"), J)
Exit do
End if
End if
I = J + 1
Loop
'Back
Response. write ("<refresh> <result kflag =" "true" "ccontent =" & Application ("allcansee ") & "talker =" & Application ("visitorname") & ""> AA </result> </refresh> ") 'comment 8
%>
Note 1: Use the FileSystemObject component to create a file object and write the content transmitted during communication in the file for debugging.
NOTE 2: create a file.
NOTE 3: write all the content transmitted by request. Form in the file, leaving debugging marks on the server side.
Note 4: Create an XML object.
Note 5: Use the loadxml () function to import the XML format string transmitted by the flash end.
Note 6: Create an ID Node object and obtain the corresponding content.
Note 7: these steps are used to process the "kicker" Action. Here, the user to be kicked is simply deleted from the online user name list, more strict "kicker" can write the IP address of the user to be kicked into the database, only until the administrator unlocks the IP address.
Note 8: Construct an XML string and write it to the Flash end using the write function.
VII. FAQs
1. Development Environment Introduction
The development environment of the system is win 2 K + Flash MX 2004 + IIS 6.0 + IE 6.0 + notepad. The virtual directory set in IIS is named xmlchat.
2. involved Databases
The database used by the system is Access 2000. There is only one userinfo table in the database. The fields in the table are ID, username, PWD, and right.
Click here to download the source file