Ajax PHP JavaScript MySQL implements a simple refresh-free online chat room

This article mainly introduces Ajax PHP JavaScript MySQL to implement a simple non-refresh online chat room, which has certain reference value. Interested friends can refer to it

for better use of these two days I learned the relevant knowledge of Ajax and made a simple online chat room.

Ideas

To implement a chat room, it is basically to pass data through Ajax and let PHP realize the difference in data and search, and then hand it over to the front-end JavaScript to update the page to achieve the function of instant chat.

Message display area

The message display area is a p block. After we obtain the server-side information with the help of Ajax, we use JavaScript to update the page.

消息显示区
 
 
 

Send a message

The message module, to put it bluntly, is the process of inserting data into the server, which is also relatively simple.

发言栏
 
 
 
 颜色  表情  微笑地 猥琐地 和蔼地 目不转睛地 傻傻地  聊天对象  所有的人 老郭 小郭 大郭  
 
   发言： 
 
 

Section

Let’s start using code to implement relevant business logic.

Message display

Our idea is that every once in a while, the client sends a request to the server and polls to obtain the latest data.

The more important thing is the use of the setInterval function to achieve interval triggering of request events.

Message sending

Regarding message sending, just send it to the server through a form. We use the latest technology of Html5 here, FormData. Generally speaking, the current mainstream modern browsers support this technology. Using FormData we can easily obtain the data of a form.

Note:FormData collects form data in the form of key-value pairs, so the corresponding form item must have a name attribute, otherwise the form will No data value could be collected for this item.

It is worth pondering: the function implemented by the setTimeout function. After getting the feedback information from the server, it is updated in time behind the send button to give the user a good experience.

Optimization

After completing this, you can basically implement chat. However, the effect achieved will be very bad, mainly due to the following points.
•There is no scrolling display, you have to manually check the latest news every time.
•The data obtained contains a lot of duplicate data, which wastes traffic and makes it inconvenient to view information.

Display non-repetitive data

For displaying repetitive data, this is because we do not use the where statement, but it seems to be obtained every time All the data is gone. Just think about it, how can we get the latest data?
And different clients must be taken care of.

Hollywood Principle: Don’t come to me, I’ll come to you

This is also a lot of software A manifestation of the development philosophy is to let the customer decide what data to obtain, rather than beating the server to death with a stick. So we need to optimize the client in sending data requests.

Optimizing the display

Optimizing the display interface is essential. No one can tolerate having to manually send a piece of data. View the latest news. So we need to set the p of the display area.

Add scroll bar

Display the latest news every time

To put it bluntly, the p at the bottom is always displayed first.

//showmessage.scrollTop 可以实现p底部最先展示 // pnode.scrollHeight而已获得p的高度包括滚动条的高度 showmessage.scrollTop = showmessage.scrollHeight-showmessage.style.height;

Complete code

Front-end code

         
         

          

           
          
         
         

          

           
          
         
消息显示区

         
发言栏

         

          
颜色表情微笑地猥琐地和蔼地目不转睛地傻傻地聊天对象所有的人老郭小郭大郭
          
发言：
         

Database table structure

mysql> desc message; +----------+--------------+------+-----+---------+----------------+ | Field | Type | Null | Key | Default | Extra | +----------+--------------+------+-----+---------+----------------+ | id | int(100) | 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

"."'$maxId'"; $qry = mysql_query($sql); $info = array(); while($rst = mysql_fetch_assoc($qry)){ $info[] = $rst; } // 通过json格式给客户端提供数据 echo json_encode($info); ?>

Summary and outlook

##Summary

•How to poll to obtain data, with the help of the setInterval function
•The data that disappears at regular intervals, with the help of the setTimeout function
•How to obtain the latest data: the client controls the sending The maxId parameter.
•How to optimize the display: overflow achieves scrolling effect; pnode.scrollTop controls the display bottom special effects

Outlook•Maybe you will find , the client sender is fixed, that’s because we don’t do user login. If the user logs in, our sender can be dynamically obtained from the Session. This can also be more consistent with people's subjective feelings.

php webSoket implementation chat room sample code (source code attached)

Detailed example of how to implement a chatbot using Python Slack API

#

The above is the detailed content of Ajax PHP JavaScript MySQL implements a simple refresh-free online chat room. For more information, please follow other related articles on the PHP Chinese website!