Home Backend Development PHP Tutorial Ajax PHP JavaScript MySQL implements a simple refresh-free online chat room

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

May 02, 2018 am 10:51 AM
ajax javascript mysql

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.

1

2

3

4

<h3>消息显示区</h3>

<p id="up">

</p>

<hr />

Copy after login

Send a message

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<h3>发言栏</h3>

  <p id="bottom">

    <form action="./chatroom_insert.php">

      <p id="chat_up">

        <span>颜色</span>

        <input type="color" name="color"/>

        <span>表情</span>

        <select name="biaoqing">

          <option value="微笑地">微笑地</option>

          <option value="猥琐地">猥琐地</option>

          <option value="和蔼地">和蔼地</option>

          <option value="目不转睛地">目不转睛地</option>

          <option value="傻傻地">傻傻地</option>

        </select>

        <span>聊天对象</span>

        <select name="receiver">

          <option value="">所有的人</option>

          <option value="老郭">老郭</option>

          <option value="小郭">小郭</option>

          <option value="大郭">大郭</option>

        </select>

      </p>

      <p id="chat_bottom">

        <textarea id="msg" name="msg" style="width:380px;height:auto;"></textarea>

        <input type="button" value="发言" onclick="send()" />

        发言:<span id="result"></span>

      </p>

    </form>

  </p>

Copy after login

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.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

<script>

 

function showmessage(){

  var ajax = new XMLHttpRequest();

  // 从服务器获取并处理数据

  ajax.onreadystatechange = function(){

    if(ajax.readyState==4) {

      //alert(ajax.responseText);

      // 将获取到的字符串转换成实体

      eval(&#39;var data = &#39;+ajax.responseText);

      // 遍历data数组,把内部的信息一个个的显示到页面上

      var s = "";

      for(var i = 0 ; i < data.length;i++){

        data[i];

        s += "("+data[i].add_time+") >>>";

        s += "<p style=&#39;color:"+data[i].color+";&#39;>"

        s += data[i].sender +" 对 " + data[i].receiver +"  "+ data[i].biaoqing+"说:" + data[i].msg;

        s += "</p>";

 

      }

      // 开始向页面时追加信息

      var showmessage = document.getElementById("up");

      showmessage.innerHTML += s;

 

    }

  }

  ajax.open(&#39;get&#39;,&#39;./chatroom.php&#39;);

  ajax.send(null); 

 

}

 

// 更新信息的执行时机

window.onload = function(){

  //showmessage(); 

  // 制作轮询,实现自动的页面更新

  setInterval("showmessage()",3000);

}

</script>

Copy after login


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.


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<script>

  function send(){

    // 向服务器差入相关的数据

    var form = document.getElementsByTagName(&#39;form&#39;)[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()",2000);

      }

    }

    xhr.open(&#39;post&#39;,&#39;./chatroom_insert.php&#39;);

    xhr.send(formdata);

    document.getElementById("msg").value="";

    //return false;

  }

 

  // 2秒后实现提示信息的消失

  function hideresult(){

    document.getElementById(&#39;result&#39;).innerHTML = ""

  }

</script>

Copy after login

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.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

<script>

// 记录当前获取到的id的最大值,防止获取到重复的信息

var maxId = 0;

function showmessage(){

  var ajax = new XMLHttpRequest();

  // 从服务器获取并处理数据

  ajax.onreadystatechange = function(){

    if(ajax.readyState==4) {

      //alert(ajax.responseText);

      // 将获取到的字符串转换成实体

      eval(&#39;var data = &#39;+ajax.responseText);

      // 遍历data数组,把内部的信息一个个的显示到页面上

      var s = "";

      for(var i = 0 ; i < data.length;i++){

        data[i];

        s += "("+data[i].add_time+") >>>";

        s += "<p style=&#39;color:"+data[i].color+";&#39;>"

        s += data[i].sender +" 对 " + data[i].receiver +"  "+ data[i].biaoqing+"说:" + data[i].msg;

        s += "</p>";

        // 把已经获得的最大的记录id更新

        maxId = data[i].id;

      }

      // 开始向页面时追加信息

      var showmessage = document.getElementById("up");

      showmessage.innerHTML += s;

      //showmessage.scrollTop 可以实现p底部最先展示

      // pnode.scrollHeight而已获得p的高度包括滚动条的高度

      showmessage.scrollTop = showmessage.scrollHeight-showmessage.style.height;

    }

  }

  ajax.open(&#39;get&#39;,&#39;./chatroom.php?maxId=&#39;+maxId);

  ajax.send(null); 

 

}

 

// 更新信息的执行时机

window.onload = function(){

  //showmessage(); 

  // 制作轮询,实现自动的页面更新

  setInterval("showmessage()",3000);

}

</script>

Copy after login


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

1

2

3

4

5

6

7

<style>

  #up {

    height:320px;

    width:100%;

    overflow:auto;

  }

</style>

Copy after login

Display the latest news every time

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

1

2

3

//showmessage.scrollTop 可以实现p底部最先展示

// pnode.scrollHeight而已获得p的高度包括滚动条的高度

showmessage.scrollTop = showmessage.scrollHeight-showmessage.style.height;

Copy after login

Complete code

Front-end code

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Ajax 聊天室</title>

<style>

  #up {

    height:320px;

    width:100%;

    overflow:auto;

  }

 

 

</style>

<script>

// 记录当前获取到的id的最大值,防止获取到重复的信息

var maxId = 0;

function showmessage(){

  var ajax = new XMLHttpRequest();

  // 从服务器获取并处理数据

  ajax.onreadystatechange = function(){

    if(ajax.readyState==4) {

      //alert(ajax.responseText);

      // 将获取到的字符串转换成实体

      eval(&#39;var data = &#39;+ajax.responseText);

      // 遍历data数组,把内部的信息一个个的显示到页面上

      var s = "";

      for(var i = 0 ; i < data.length;i++){

        data[i];

        s += "("+data[i].add_time+") >>>";

        s += "<p style=&#39;color:"+data[i].color+";&#39;>"

        s += data[i].sender +" 对 " + data[i].receiver +"  "+ data[i].biaoqing+"说:" + data[i].msg;

        s += "</p>";

        // 把已经获得的最大的记录id更新

        maxId = data[i].id;

      }

      // 开始向页面时追加信息

      var showmessage = document.getElementById("up");

      showmessage.innerHTML += s;

      //showmessage.scrollTop 可以实现p底部最先展示

      // pnode.scrollHeight而已获得p的高度包括滚动条的高度

      showmessage.scrollTop = showmessage.scrollHeight-showmessage.style.height;

    }

  }

  ajax.open(&#39;get&#39;,&#39;./chatroom.php?maxId=&#39;+maxId);

  ajax.send(null); 

 

}

 

// 更新信息的执行时机

window.onload = function(){

  //showmessage(); 

  // 制作轮询,实现自动的页面更新

  setInterval("showmessage()",3000);

}

</script>

 

 

 

 

<p id="main">

  </p><h3>消息显示区</h3>

  <p id="up">

  </p>

  <hr>

  <h3>发言栏</h3>

  <p id="bottom">

    </p><form action="./chatroom_insert.php">

      <p id="chat_up">

        <span>颜色</span>

        <input type="color" name="color">

        <span>表情</span>

        <select name="biaoqing">

          <option value="微笑地">微笑地</option>

          <option value="猥琐地">猥琐地</option>

          <option value="和蔼地">和蔼地</option>

          <option value="目不转睛地">目不转睛地</option>

          <option value="傻傻地">傻傻地</option>

        </select>

        <span>聊天对象</span>

        <select name="receiver">

          <option value="">所有的人</option>

          <option value="老郭">老郭</option>

          <option value="小郭">小郭</option>

          <option value="大郭">大郭</option>

        </select>

      </p>

      <p id="chat_bottom">

<script>

  function send(){

    // 向服务器差入相关的数据

    var form = document.getElementsByTagName(&#39;form&#39;)[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()",2000);

      }

    }

    xhr.open(&#39;post&#39;,&#39;./chatroom_insert.php&#39;);

    xhr.send(formdata);

    document.getElementById("msg").value="";

    //return false;

  }

 

  // 2秒后实现提示信息的消失

  function hideresult(){

    document.getElementById(&#39;result&#39;).innerHTML = ""

  }

</script>

        <textarea id="msg" name="msg" style="width:380px;height:auto;"></textarea>

        <input type="button" value="发言" onclick="send()">

        发言:<span id="result"></span>

      </p>

    </form>

  <p></p>

 

<p></p>

Copy after login


Database table structure


1

2

3

4

5

6

7

8

9

10

11

12

13

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)

Copy after login

Server-side code

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<?php

 

// 获得最新的聊天信息

$conn = mysql_connect(&#39;localhost&#39;,&#39;root&#39;,&#39;mysql&#39;);

mysql_select_db(&#39;test&#39;);

mysql_query(&#39;set names utf8&#39;);

 

$maxId = $_GET[&#39;maxId&#39;];

 

// 防止获取重复数据,本次请求的记录结果id要大鱼上次获得的id

$sql = "select * from message where id >"."&#39;$maxId&#39;";

$qry = mysql_query($sql);

 

$info = array();

while($rst = mysql_fetch_assoc($qry)){

  $info[] = $rst;

}

 

 

// 通过json格式给客户端提供数据

echo json_encode($info);

 

 

?>

Copy after login


Summary and outlook

##Summary

This is the complete example. To review, today’s gains are:

•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.

•The interface is poorly made and there is no beautification effect. The effect should be great after adding Bootstrap.

•The mobile phone adaptation effect is not good, and the color control cannot be displayed normally on Windows Phone.

Related recommendations:

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to optimize MySQL query performance in PHP? How to optimize MySQL query performance in PHP? Jun 03, 2024 pm 08:11 PM

MySQL query performance can be optimized by building indexes that reduce lookup time from linear complexity to logarithmic complexity. Use PreparedStatements to prevent SQL injection and improve query performance. Limit query results and reduce the amount of data processed by the server. Optimize join queries, including using appropriate join types, creating indexes, and considering using subqueries. Analyze queries to identify bottlenecks; use caching to reduce database load; optimize PHP code to minimize overhead.

How to use MySQL backup and restore in PHP? How to use MySQL backup and restore in PHP? Jun 03, 2024 pm 12:19 PM

Backing up and restoring a MySQL database in PHP can be achieved by following these steps: Back up the database: Use the mysqldump command to dump the database into a SQL file. Restore database: Use the mysql command to restore the database from SQL files.

How to insert data into a MySQL table using PHP? How to insert data into a MySQL table using PHP? Jun 02, 2024 pm 02:26 PM

How to insert data into MySQL table? Connect to the database: Use mysqli to establish a connection to the database. Prepare the SQL query: Write an INSERT statement to specify the columns and values ​​to be inserted. Execute query: Use the query() method to execute the insertion query. If successful, a confirmation message will be output.

How to fix mysql_native_password not loaded errors on MySQL 8.4 How to fix mysql_native_password not loaded errors on MySQL 8.4 Dec 09, 2024 am 11:42 AM

One of the major changes introduced in MySQL 8.4 (the latest LTS release as of 2024) is that the &quot;MySQL Native Password&quot; plugin is no longer enabled by default. Further, MySQL 9.0 removes this plugin completely. This change affects PHP and other app

How to use MySQL stored procedures in PHP? How to use MySQL stored procedures in PHP? Jun 02, 2024 pm 02:13 PM

To use MySQL stored procedures in PHP: Use PDO or the MySQLi extension to connect to a MySQL database. Prepare the statement to call the stored procedure. Execute the stored procedure. Process the result set (if the stored procedure returns results). Close the database connection.

How to create a MySQL table using PHP? How to create a MySQL table using PHP? Jun 04, 2024 pm 01:57 PM

Creating a MySQL table using PHP requires the following steps: Connect to the database. Create the database if it does not exist. Select a database. Create table. Execute the query. Close the connection.

The difference between oracle database and mysql The difference between oracle database and mysql May 10, 2024 am 01:54 AM

Oracle database and MySQL are both databases based on the relational model, but Oracle is superior in terms of compatibility, scalability, data types and security; while MySQL focuses on speed and flexibility and is more suitable for small to medium-sized data sets. . ① Oracle provides a wide range of data types, ② provides advanced security features, ③ is suitable for enterprise-level applications; ① MySQL supports NoSQL data types, ② has fewer security measures, and ③ is suitable for small to medium-sized applications.

PHP vs. Ajax: Solutions for creating dynamically loaded content PHP vs. Ajax: Solutions for creating dynamically loaded content Jun 06, 2024 pm 01:12 PM

Ajax (Asynchronous JavaScript and XML) allows adding dynamic content without reloading the page. Using PHP and Ajax, you can dynamically load a product list: HTML creates a page with a container element, and the Ajax request adds the data to that element after loading it. JavaScript uses Ajax to send a request to the server through XMLHttpRequest to obtain product data in JSON format from the server. PHP uses MySQL to query product data from the database and encode it into JSON format. JavaScript parses the JSON data and displays it in the page container. Clicking the button triggers an Ajax request to load the product list.

See all articles