Web chat room making steps to share

Source: Internet
Author: User
Tags sendloop

Combined with the Web page and ASP to achieve a simple web chat room production case, there are online chat, online personnel list, online time and other functions. At the end of this tutorial, we also introduce the platform environment and common debugging methods used by Flash and ASP in a more detailed way.
First, the principle
The main process is to first send a request on the Web side to the server side, and then wait for the return value from the server side, the value returned to the Web page, according to the corresponding values to do the corresponding operation. In the Web Page section, as in the previous tutorials, the main use is the Loadvariables () function and the loop-waiting technique. In the ASP section, the main use of the Global.asa file and the application () attribute, first define a few application objects, and then the content will be kept in the Application object, when used, directly from the Take the Application object.

second, landing
Landing part of the basic principle is: Enter the user name and password on the web side, through the ASP query database, if the user name and password is correct, jump to the main interface of the web chat room, or jump to the login failure interface.
A, ASP part
1, create a blank file, named Global.asa, the content is as follows:
<script language= "VBScript" runat= "Server" >
Sub Application_OnStart
Application ("Visitornum") =0
Application ("visitorname") = ""
Application ("allcansee") = "<br>"
End Sub
</script>
Note: Above is a global file that defines several application objects, and sub Application_OnStart means that they are triggered when the service is started and initialized. Application objects can hold content between several pages, application ("Visitornum") is the current number of people online, application ("Visitorname") is the current online staff list, Application ("Allcansee") is the current chat content.
2, a new blank file, named Login.asp, and Global.asa saved in the same directory, the contents are as follows:
<%
Username = Request ("username") ' NOTE 1
Userpwd = Request ("Userpwd")
Set Conn=server.createobject ("ADODB. Connection ")
Conn.Open "Driver={sql Server}; Server=127.0.0.1;database=pywz "' Note 2
Set Rs=server.createobject ("ADODB. Recordset ")
Strsql= "SELECT * from UserInfo where userid= '" & Username & "' and Password= '" & Userpwd & "'" ' Note 3
Rs.Open Strsql,conn, 1, 1
If not (RS.BOF and rs.eof) Then ' Note 4
Application ("visitornum") = Application ("Visitornum") + 1
Application ("visitorname") = Application ("Visitorname") & "" & Username
Response.Write ("Userlogin=success")
Else
Response.Write ("userlogin=unsuccess") ' Note 5
End If
Rs.close
Conn.close
%>
Note 1: Get the user name and password from the Flash side.
Note 2: Open a database connection, the reader will be based on the type of database, the database is located in the IP, the database instance name to make corresponding changes.
Note 3: Constructs an SQL statement based on the user name and password.
Note 4: If there is a user name and password entered in the database, add application ("Visitornum") plus 1, save the current user name in application ("Visitorname"). Returns the login successful flag bit userlogin bit success.
Note 5: User name or password error, return login failed flag bit userlogin bit unsuccess.

B, Flash part
1. On the Properties panel, set the frame label of the first frame to login. In the action panel of the first frame, add:
Stop ();
2, 1, place two text boxes in the scene, two buttons, one of the above text box is set 2, and the other text box is set to 3.
3. Create a new component named "Loginloop1" and add the following statement to the action panel of the first frame:
_root.count = 0;
Stop ();
Insert the keyframe on frame 5th and add the following statement to the action panel:
if (! ( _root.userlogin)) {//NOTE 1
_root.count = _root.count + 1;
if (_root.count > 50)//NOTE 2
{
_root.gotoandplay ("Netfalse");
_root.loginloop.gotoandstop (1);
}
_root.loginloop.gotoandplay (2);
}
if (_root.userlogin = = "Success")//Note 3
{
_root.txttime = _root.userlogin;
_root.gotoandplay ("main");
_root.loginloop.gotoandstop (1);
}
if (_root.userlogin = = "Unsuccess")//Note 4
{
_root.gotoandplay ("Loginfalse");
_root.loginloop.gotoandstop (1);
}
Note 1: Determine if the result has been returned from the server side, if not, the counter plus one.
Note 2: To determine if the counter has reached 50, yes, jump to the network timeout interface.
Note 3: Determine if the returned result is bit success, then jump to the main interface of the chat.
Note 4: If the returned result is unsuccess, jump to the login error screen.
4. Drag the component "Loginloop1" from the gallery to the scene and set its instance name to "Loginloop".
5. Add the following statement to the action panel of the login button in the scene:
On (release) {
if (length (_root.username) = = 0) {//NOTE 1
_root.username = "Please enter a name";
} else if (length (_root.userpwd) = = 0) {
_root.username = "Please enter password";
}
if (Length (_root.username)! = 0) and (Length (_root.userpwd)! = 0)) {//NOTE 1 loadvariables ("login.asp?username=" add _root. Username Add "&userpwd=" Add _root.userpwd, this, "POST");
_root.loginloop.gotoandplay (2);
Timeflag = 0;
}
}
Note 1: Determine if the user name and password are empty.
6. Insert a keyframe in the 5th frame of the Home view, name the frame "Netfalse", and add the message "Network connection timed out ..." in this frame scene. Add the following statement to the action panel of the frame:
Stop ();
7. Insert a keyframe in frame 10th in the home view, name the frame "Loginfalse", and add "username or password error" to this frame scene. Add the following statement to the action panel of the frame:
Stop ();
C, summary and improve
In the ASP section, note that when the login is successful, the application ("Visitorname") and Application ("Visitornum") objects are added to the corresponding values.   In the Flash section, it is a good practice to send the request first with Loadvariables () and then start another clip to wait for the returned value. Third, send
The basic principle of the sending part is to send the chat content from the flash side to the server side, add the chat content to the application ("Allcansee") object on the server side, and change the modified application ("Allcansee") The contents of the object are returned to the flash side.
A, ASP part
1, create a blank file, named Send.asp, the contents are as follows:
<%
Username = Request ("username")
tempstr= username & "say:" & Request ("Content") & "<br>"
Application ("Allcansee") = Application ("Allcansee") & TempStr ' NOTE 1
Response. Write ("sflag=true&scontent=" & Application ("Allcansee")) ' NOTE 2
%>
Note 1: Add content sent from the flash side to the content of the chat.
NOTE 2: Send the flag bit sflag and chat content back to the flash side.
B, Flash part
1. Add a keyframe to frame 15th in the main scene, name the frame "main" and add the following statement to the action panel of the frame:
now = new Date (); Note 1
StartTime = Now.gettime ();
Stop ();
Note 1: This is set up to calculate the online time.
2. Pull a dialog box in the Home view, as shown in property settings 4.
3. Press CTRL + F8 to create a new movie clip, named Sendloop, to add the following statement on the action panel of the first frame of the clip:
_root.countsend = 0;
Stop ();
Insert a keyframe on frame 5th of clip and add the following statement above its action panel:
if (! ( _root.sflag)) {//NOTE 1
_root.countsend = _root.countsend + 1;
if (_root.countsend > 50)//NOTE 2
{
_root.gotoandplay ("Netfalse");
_root.sendloop.gotoandstop (1);
}
_root.txttime = _root.countsend;
_root.sendloop.gotoandplay (2);
}
if (_root.sflag = = "true")//Note 3
{
_root.txtcontent = _root.scontent;
_root.txttime = "Sssss";
_root.sflag = "";
_root.sendloop.gotoandstop (1);
}
Note 1: Determine the returned flag, if the value is not returned from the server, the counter plus one.
Note 2: When the counter is added to 50, jump to the network timeout interface.
Note 3: If the returned value is true, the returned chat content is displayed in the scene.
4. Drag the Sendloop from the gallery to the home view main frame, named Sendloop.
5. Add a button to the home view main frame to display the message "send". Add the following statement above the action panel of the button:
On (release) {
if (length (_root.txtsend) = = 0) {//NOTE 1
_root.txtsend = "Please enter content";
}
if ((Length (_root.txtsend)! = 0)) {//NOTE 2
Loadvariables ("send.asp?content=" Add _root.txtsend Add "&username=" Add _root.username, this, "POST");
_root.sendloop.gotoandplay (2);
_root.txtsend = "";
}
}
Note 1: Determines whether the content to be sent is empty, and displays a warning message if it is empty.
NOTE 2: If the content sent is not empty, send the content and user name of the chat to the server side.
C, summary and improve
The process, which is similar to the landing section, sends the request first, then waits for the returned value to perform the corresponding operation based on the value returned. It is important to note that the name of the variable cannot be repeated before, and the time variable to be used later is defined. The implementation here is relatively simple, just a brief introduction of the process, if you want to consider the Send action, send icon, private chat, and so on, there is a lot of work to do.
Iv. Display of chat content
The basic principle of displaying chat content is to send a request to display the chat content from the flash side, and send the content of application ("Allcansee") to the Web end on the server side, and display it on the Web page.
A, ASP part
1, create a blank file, named content.asp, the contents are as follows:
<%
Username = Request ("username")
TempStr = "Cflag=true"
TempStr = tempstr & "&ccontent=" & Application ("Allcansee") &bsp; Note 1
Response. Write (TEMPSTR)
%>
Note 1: Return the flag bit and chat content to the Web side.
B. Part of the webpage
1. Pull a dialog box in the Home view, as shown in property settings 5.
2. Press CTRL + F8 to create a new movie clip, named Contentloop, to add the following statement on the action panel of the first frame of the clip:
_root.ccount = 0;
Stop ();
Insert a keyframe on frame 5th of clip and add the following statement above its action panel:
if (! ( _root.cflag)) {//NOTE 1
_root.ccount = _root.ccount + 1;
if (_root.ccount > 50)//NOTE 2
{
_root.gotoandplay ("Netfalse");
_root.contentloop.gotoandstop (1);
}
_root.contentloop.gotoandplay (2);
}
if (_root.cflag = = "true")//Note 3
{
_root.txtcontent = _root.ccontent;
_root.contentloop.gotoandstop (1);
}
Note 1: Determine if the value has been returned from the server side, and there is no counter plus one.
Note 2: When the counter accumulates to 50, jump to the network timeout interface.
Note 3: The value returned from the server side is true to display the contents of the chat.
3. Drag the Contentloop from the gallery to the home view main frame, named Contentloop.
4. Add a button to the home view main frame to display the "update". Add the following statement above the action panel of the button:
On (release) {//NOTE 1
Loadvariables ("content.asp?username=" Add _root.username Add "&num=" Add _root.num, this, "POST");
_root.contentloop.gotoandplay (2);
Loadvariables ("talker.asp", this, "POST"); NOTE 2
_root.talkerloop.gotoandplay (2);
}
Note 1: After clicking the button, send the data to the server side.
Note 2: This is for displaying the list of people online.
C, summary and improve
Note that the list of displayed online numbers to be used later is defined here. To further improve, you can consider filtering some people's speeches, kicking people to consider. V. Display the list of people online
The basic principle of displaying a list of online people is to send a request to display a list of people on the Web page, and the server side sends the contents of the application ("Visitorname") object to the Web page, which is displayed on the flash side.
A, ASP part
1, create a blank file, named Talker.asp, the contents are as follows:
<%
TempStr = "Tflag=true"
TempStr = tempstr & "&talker=" & Application ("Visitorname") ' NOTE 1
Response. Write (TEMPSTR)
%>
Note 1: Send a list of flags and online numbers to the flash side.
B, Flash part
1. Pull a dialog box in the Home view, as shown in property settings 6.
2. Press CTRL + F8 to create a new movie clip, named Talkerloop, to add the following statement on the action panel of the first frame of the clip:
_root.tcount = 0;
Stop ();
Insert a keyframe on frame 5th of clip and add the following statement above its action panel:
if (! ( _root.tflag)) {//NOTE 1
_root.tcount = _root.tcount + 1;
if (_root.tcount > 50)//NOTE 2
{
_root.gotoandplay ("Netfalse");
_root.talkerloop.gotoandstop (1);
}
_root.talkerloop.gotoandplay (2);
}
if (_root.tflag = = "true")//Note 3
{
_root.txttalker = _root.talker;
_root.talkerloop.gotoandstop (1);
}
Note 1: Determine if the value has been returned from the server side, and if not, the counter adds one.
Note 2: When the counter is added to 50, jump to the network timeout interface.
Note 3: If the returned flag bit is true, the returned list is displayed in the text box.
3. Drag the Talkerloop from the gallery to the home view main frame, named Talkeloop.
C, summary and improve
The implementation of this is only a simple processing, in the actual application, to consider the user ID separator, to consider when the user exits the web chat room when the application ("Visitorname") object processing, to achieve a perfect processing or relatively complex
Vi. Show Online time
The principle of displaying the online time is to define a time variable in front of it and then to get the current time value, subtracting and displaying it.
A, the Web Part
1. Pull a dialog box in the Home view, as shown in property settings 7. This is shown in Layout 8 in the scene.
2. Press CTRL + F8, create a new movie clip named Timeloop, drag the timeloop into the scene, and add the following statement on the action panel of the clip:
Onclipevent (load) {//NOTE 1
Timedate = new Date ();
}
Onclipevent (enterFrame) {
MyTime = Timedate.gettime (); NOTE 2
_root.txttime = Math.ceil ((mytime–_root.starttime)/1000); Note 3
Delete timedate; Note 4
Timedate = new Date ();
}
Note 1: When load this clip, create a new Date object.
Note 2: Get the current time.
Note 3: The current time is reduced to the time previously obtained, displayed in the text box.
Note 4: Delete the old time object and regenerate the current time object.
B. Summary and improvement
The timing method used here is a very common technique, and the key is to define a time variable in the first place, and then update the current time variable to take the difference. Note that the difference between the two is milliseconds, divided by 1000.
Seven, the operating platform and debugging skills
At this point, a simple web chat room development completed, the following to introduce the platform and common debugging skills.
A. Operating Platform
The architecture used by Flash + ASP runs on the Windows platform and can be used with the PWS server (WIN98) or the IIS server (Win2K, if the server is not found, the Windows installation CD will need to be reinstalled). Put the resulting file in a virtual directory on the server, start the server, you can see the effect in the browser.
In addition, databases are often used in Web applications, with SQL Server, Access, and MySQL in common databases. When using a database, set the appropriate ODBC parameters in the ODBC Data source in Control Panel.
B, debugging Skills
Although it is a combination of flash and ASP, it is best to debug Flash and ASP separately in debugging. For example, I do this, first debug the ASP section, write the ASP section, enter Http://localhost/chat/send.asp?content=test in IE, see if the value shown is the value returned. Other ASP parts can be used in a similar way.
In the Flash section, the most common way to debug is to print, you can display something with a text box, or you can use the trace () function to display the variable. Alternatively, you can use the debugger tool that comes with your Web page to view the values of the variables.
In fact, flash or ASP, debugging is the most important is clear thinking, clear flow, so that the program will be less bugs.

Note 2: The user name and password are not empty, and the user name and password are sent to the server side.

Web chat room making steps to share

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.