Send Message module, in fact, it is the process of inserting data to the server, is also a relatively simple.
Plate
The following begins the use of code to implement the relevant business logic.
Message display
Our idea is that every once in a while, the client sends a request to the server and polls for the latest data.
<script>function ShowMessage () { var ajax = new XMLHttpRequest (); Gets and processes data from the server Ajax.onreadystatechange = function () { if (ajax.readystate==4) { //alert ( Ajax.responsetext); Converts the acquired string to the entity eval (' var data = ' +ajax.responsetext); Iterate through the data array and display the internal information to the page var s = ""; for (var i = 0; i < data.length;i++) { data[i]; s + = "(" +data[i].add_time+ ") >>>"; s + = "<p style= ' color:" +data[i].color+ "; ' > "; s + = Data[i].sender + "on" + Data[i].receiver + " + data[i].biaoqing+" said: "+ data[i].msg; s + = "</p>"; } Append information to the page when you start var showmessage = document.getElementById ("Up"); Showmessage.innerhtml + = s; } } Ajax.open (' Get ', './chatroom.php '); Ajax.send (null); } Update information execution Time window.onload = function () { //showmessage (); Make polling for automatic page update setinterval ("ShowMessage ()", 3000);} </script>
What is more important is the use of the SetInterval function to implement the interval triggering request event.
Send Message
About message sending, sent to the server by Form. We use a current HTML5 of the latest technology, FormData, in general, the current mainstream of modern browsers are supporting this technology. With Formdata we can easily get the data for a form.
Note: Formdata collects the form data in the form of key-value pairs, so the corresponding table item must have the name attribute, otherwise the form will not collect the data value of the item.
<script> function Send () { //to server-related data var form = document.getelementsbytagname (' form ') [0]; var formdata = new Formdata (form); var xhr = new XMLHttpRequest (); Xhr.onreadystatechange = function () { if (xhr.readystate==4) { //alert (xhr.resposnetext); document.getElementById ("Result"). InnerHTML = Xhr.responsetext; SetTimeout ("Hideresult ()", "N");} } Xhr.open (' Post ', './chatroom_insert.php '); Xhr.send (formdata); document.getElementById ("msg"). value= ""; return false; } The Vanishing function Hideresult () {document.getElementById (' result ') that implements the message after 2 seconds . InnerHTML = ""; } </script>
It is worth pondering: the function that settimeout function realizes. After receiving the feedback from the server side, it is timely to update the Post button to give the user a good experience.
Optimization
You can basically chat after you've done this. But the implementation of the effect will be very bad, mainly has the following points.
• There is no scrolling and you have to manually view the latest news every time.
• The data obtained has a lot of duplicate data, which is wasteful of traffic and is not easy to view information.
Show non-repeatable data
For data that shows repetition, this is because we don't use the where statement, and it seems like we get all the data every time. Imagine how to get the latest data?
And for different clients to be taken care of.
Hollywood principles: Don't come to me, I'll find you
This is also a reflection of many software development concepts, allowing customers to decide what data to get, rather than server-side beat him. So we need to optimize for sending data requests to the client.
<script>//records the maximum value of the currently acquired ID, preventing getting to duplicate information var Maxid = 0;function ShowMessage () {var ajax = new XMLHttpRequest (); Gets and processes data from the server Ajax.onreadystatechange = function () {if (ajax.readystate==4) {//alert (ajax.responsetext); Converts the acquired string to the entity eval (' var data = ' +ajax.responsetext); Iterate through the data array and display the internal information to the page var s = ""; for (var i = 0; i < data.length;i++) {data[i]; s + = "(" +data[i].add_time+ ") >>>"; s + = "<p style= ' color:" +data[i].color+ "; ' > "; s + = Data[i].sender + "on" + data[i].receiver + "+ data[i].biaoqing+" said: "+ data[i].msg; s + = "</p>"; Update Maxid = Data[i].id for the largest record ID that has been obtained; }//Start appending information to the page var showmessage = document.getElementById ("Up"); Showmessage.innerhtml + = s; Showmessage.scrolltop can achieve P bottom first show//Pnode.scrollheight just get the height of p including the height of the scroll bar showmessage.scrolltop = Showmessage.sc Rollheight-showmessage.style.height; }} ajax.open (' Get ', './chatroom.php?maxid= ' +maxid); Ajax.send (NULL); }//update information Execution Time window.onload = function () {//showmessage (); Make polling for automatic page update setinterval ("ShowMessage ()", 3000);} </script>
Optimized display
Optimizing the display interface is essential, and no one can tolerate the need to manually view the latest messages after sending a single piece of data. So we're going to set the p for the display area.
Plus scroll bar
<style> #up { height:320px; width:100%; Overflow:auto; } </style>
Show the latest news every time
To put it bluntly is to let the bottom p always show first.
Showmessage.scrolltop can achieve P bottom first show//Pnode.scrollheight just get the height of p including the height of the scroll bar showmessage.scrolltop = Showmessage.scrollheight-showmessage.style.height;
Full code
Front-end Code
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
database table Structure
Mysql> desc message;+----------+--------------+------+-----+---------+----------------+| Field | Type | Null | Key | Default | Extra |+----------+--------------+------+-----+---------+----------------+| ID | int | NO | PRI | NULL | auto_increment | | MSG | varchar (255) | NO | | NULL | | | sender | varchar (30) | NO | | NULL | | | receiver | varchar (30) | NO | | NULL | | | color | varchar (10) | YES | | NULL | | | biaoqing | varchar (10) | YES | | NULL | | | add_time | datetime | YES | | NULL | | +----------+--------------+------+-----+---------+----------------+7 rows in Set (0.00 sec)
Server-side code
<?php//get the latest chat information $conn = mysql_connect (' localhost ', ' root ', ' MySQL '), mysql_select_db (' test '); mysql_query (' Set Names UTF8 '); $maxId = $_get[' Maxid '];//to prevent the acquisition of duplicate data, the record result ID of this request to be large fish last obtained id$sql = "SELECT * from message where ID >". " $maxId ' "; $qry = mysql_query ($sql); $info = Array (); while ($rst = Mysql_fetch_assoc ($qry)) { $info [] = $rst;} Provide data to the client in JSON format echo json_encode ($info);? >
Summary and Prospect
Summarize
This is the case with a complete small example. To recap, today's harvest is:
• How to poll for data, with the help of the SetInterval function
• Data for timed vanishing prompts, with the help of the settimeout function
• How to get the latest data: There are client control Maxid parameters sent.
• How to optimize the display: overflow to achieve scrolling effect; pnode.scrolltop control display Bottom effect
Prospect
• Perhaps you will find that the client sender is fixed, that is because we did not do user login. If the user is logged in, our sender can be dynamically obtained from the session. This can also be more in line with people's subjective feelings.
• The interface does not make the comparison rotten, does not add beautification effect. Add bootstrap after the effect should be very good.
• The phone does not fit well, and the color controls on the WindowsPhone are not displayed properly.