Chat Room Web application-Ajax application, chat room web-ajax

Chat Room Web application-Ajax application, chat room web-ajax

In the last two days, I am working on a simple chat room program involving jquery's Ajax refreshing page, php connection to the mysql database, simple mysql operations, and the differences between mysql and mysqli.

I did this in the APPServ Web environment. The advantage of using this environment is that all web page creation components have been integrated, in this way, you can ignore the installation of other components for building a web page, and focus on the overall layout of the web page and the implementation of functions, so that new players like me can learn.

The steps include:

1. html and css create the shape Frame of the chat room, as shown in.

2. JS has two tasks: 1) Submit user chat information, process the chat information returned by the server, and present the information in real time;

2) Initiate a query request for the chat records in the database at a certain time, then process the chat information returned by the server, and present the information in real time, so that the chat can be carried out, however, the information stored in the database is limited and only part of the information can be refreshed. The refresh time affects the delay time of the chat record and is also related to the speed of the network.

3. Use Mysql to create databases and tables.

4. The server queries the database using php statements, and transmits the generated xml file to the chat room interface.

Details:

1. Shape frame of the chat room. You can use html and css. Note that overflow: auto is the overflow setting of chat display records in css attributes. Other Optional options include hidden, visible, scroll, and inherit.

2. Client Js requires two functions. The first is: Regular refresh, which is implemented using the custom function updateMsg.

Function updateMsg () {$. post (". /php/backend. php ", {time: timestamp}, function (xml, success) {$ ('# loading '). remove (); // remove the loading message, waiting for the prompt addMessages (xml) ;}); setTimeout ('updatemsg () ', 4000); // read once every 4 seconds}

The addMessages () function is also a custom function. It parses the message file sent back from the server and adds it to the chat display area.

Function addMessages (xml) {if ($ ('status', xml ). text () = 2) return; // text gets the text content of the node timestamp = $ ('time', xml ). text (); // update the timestamp // $. each cyclic data $ ('message', xml ). each (function () {var author = $ ('author', this ). text (); // publisher var content = $ ('msg ', this ). text (); // content var htmlcode = '<strong>' + author + '</strong>:' + content + '<br/> '; $ ('# messagewindow '). append (htmlcode); // Add it to the document $ ('# messagewindow '). scrollTop ($ ('# messagewindow') [0]. scrollHeight); // $ ('# messagewindow') [0] convert to DOM object // keep the scroll bar at the bottom });}

3. Create a database named chat and a table named messages for the Mysql database.

Username: root Password: 12345678 Database Name: chat table name: messages

Simple database usage: 1) in cmd; 2) using the mysql command line of AppServ

1) Open cmd in cmd and use common commands

Net start mysql; --- start the database service.

Mysql-hlocalhost-uroot-p; Press enter. Enter the password and press Enter.

Show databases; your database list;

Create table tablename (list)

Describe tablename; ---- displays table items

Select * from tablename;

Delete from tablename where...

Exit/quit; --- exit the mysql database

Net stop mysql; --- Close the mysql database.

2) Open the database command line of AppServ. The usage is similar.

The tables created in my program are:

create table messages (id int(7) not null auto_increment,user varchar(255) not null,msg text not null,time int(9) not null,PRIMARY KEY (id));

4. The server queries the database using php statements, and transmits the generated xml file to the chat room interface.

When using php, pay attention to version issues. In browsers, the latest php is usually used to run [php5, php7, etc.], which may generate warnings or errors for some statements using the old version, try to use the latest version. The old version of mysql is not stable enough and there are some security issues. Therefore, we recommend using a later version of php statements, such as mysqli, to use an extended version of mysql. I indicates improve. For example, the old and new versions of the following database and table statements are different.

$ Dbhost = "localhost ";
$ Dbuser = "root ";
$ Dbpass = "12345678 ";
$ Dbname = "chat ";

// Old $ dbconn = mysql_connect ($ dbhost, $ dbuser, $ dbpass), such as php3 and php4; // may be deprecated in the future. mysqlmysql_select_db ($ dbname, $ dbconn ); // new, php5, php7 $ dbconn = mysqli_connect ($ dbhost, $ dbuser, $ dbpass, $ dbname );

 

For the complete program, please check my github Repository: