服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - PHP教程 - PHP+mysql+ajax轻量级聊天室实现方法详解

PHP+mysql+ajax轻量级聊天室实现方法详解

2021-03-12 17:45ttibm PHP教程

这篇文章主要介绍了PHP+mysql+ajax轻量级聊天室实现方法,结合实例形式分析了php+mysql实现实时聊天室功能的具体步骤与相关实现技巧,需要的朋友可以参考下

本文实例讲述了PHP+mysql+ajax轻量级聊天室实现方法。分享给大家供大家参考,具体如下:

做了一个QQ聊天交友网站,想加个聊天的功能,于是做完用PHP做了简单又强大的聊天室

1. 创建mysql数据库表:

复制代码 代码如下:
create table chat( id bigint AUTO_INCREMENT,username varchar(20), chatdate datetime,msg varchar(500), primary key(id));

 

2.编写建议连接数据库函数:

dbconnect.php

?
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
<?php
function db_connect()
{
 date_default_timezone_set("Asia/Shanghai");
 $link = mysql_connect("xxx.xxx.xxx.xxx", "databasename", "password")
      or die('无法连接: ' . mysql_error());
 mysql_select_db("databasename") or die('没有你找到指定数据库');
 return true;
}
function quote($strText)
{
  $Mstr = addslashes($strText);
  return "'" . $Mstr . "'";
}
function isdate($d)
{
  $ret = true;
  try
  {
    $x = date("d",$d);
  }
  catch (Exception $e)
  {
    $ret = false;
  }
  echo $x;
  return $ret;
}
?>

3. 编写ajax发送和接收函数:

ajax发送函数chat_send_ajax.php

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
   require_once('dbconnect.php');
   db_connect();
   $msg = iconv("UTF-8","GB2312",$_GET["msg"]);
   $dt = date("Y-m-d H:i:s");
   $user = iconv("UTF-8","GB2312",$_GET["name"]);
   $sql="INSERT INTO chat(USERNAME,CHATDATE,MSG) " .
     "values(" . quote($user) . "," . quote($dt) . "," . quote($msg) . ");";
     echo $sql;
   $result = mysql_query($sql);
   if(!$result)
   {
    throw new Exception('Query failed: ' . mysql_error());
    exit();
   }
?>

ajax接收函数chat_recv_ajax.php

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
header("Content-Type:text/html;charset=gb2312");
header("Expires: Thu, 01 Jan 1970 00:00:01 GMT");
  header("Cache-Control: no-cache, must-revalidate");
  header("Pragma: no-cache");
   require_once('dbconnect.php');
   db_connect();
   $sql = "SELECT *, date_format(chatdate,'%Y年%m月%d日 %r') as cdt from chat order by ID desc limit 200";
   $sql = "SELECT * FROM (" . $sql . ") as ch order by ID";
   $result = mysql_query($sql) or die('Query failed: ' . mysql_error());
   // Update Row Information
   $msg="<table border='0' style='font-size: 10pt; color: white; font-family: verdana, arial;'>";
   while ($line = mysql_fetch_array($result, MYSQL_ASSOC))
   {
      $msg = $msg . "<tr><td>" . $line["cdt"] . " </td>" .
        "<td>" . $line["username"] . ": </td>" .
        "<td>" . $line["msg"] . "</td></tr>";
   }
   $msg=$msg . "</table>";
   echo $msg;
?>

4.聊天室页面:

chat.html

?
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <title>聊天页面</title>
<script type="text/javascript">
var t = setInterval(function(){get_chat_msg()},5000);
//
// General Ajax Call
//
var oxmlHttp;
var oxmlHttpSend;
function get_chat_msg()
{
  if(typeof XMLHttpRequest != "undefined")
  {
    oxmlHttp = new XMLHttpRequest();
  }
  else if (window.ActiveXObject)
  {
    oxmlHttp = new ActiveXObject("Microsoft.XMLHttp");
  }
  if(oxmlHttp == null)
  {
    alert("浏览器不支持XML Http Request!");
    return;
  }
  oxmlHttp.onreadystatechange = get_chat_msg_result;
  oxmlHttp.open("GET",encodeURI("chat_recv_ajax.php"),true);
  oxmlHttp.send(null);
}
function get_chat_msg_result()
{
  if(oxmlHttp.readyState==4 || oxmlHttp.readyState=="complete")
  {
    if (document.getElementById("DIV_CHAT") != null)
    {
      document.getElementById("DIV_CHAT").innerHTML = oxmlHttp.responseText;
      oxmlHttp = null;
    }
    var scrollDiv = document.getElementById("DIV_CHAT");
    scrollDiv.scrollTop = scrollDiv.scrollHeight;
  }
}
function set_chat_msg()
{
  if(typeof XMLHttpRequest != "undefined")
  {
    oxmlHttpSend = new XMLHttpRequest();
  }
  else if (window.ActiveXObject)
  {
    oxmlHttpSend = new ActiveXObject("Microsoft.XMLHttp");
  }
  if(oxmlHttpSend == null)
  {
    alert("浏览器不支持XML Http Request!");
    return;
  }
  var url = "chat_send_ajax.php";
  var strname="noname";
  var strmsg="";
  if (document.getElementById("txtname") != null)
  {
    strname = document.getElementById("txtname").value;
    document.getElementById("txtname").readOnly=true;
  }
  if (document.getElementById("txtmsg") != null)
  {
    strmsg = document.getElementById("txtmsg").value;
    document.getElementById("txtmsg").value = "";
  }
  url += "?name=" + strname + "&msg=" + strmsg;
  oxmlHttpSend.open("GET",encodeURI(url),true);
  oxmlHttpSend.send(null);
}
function clickBtn(e)
 {
  if(window.event.keyCode==13)
  {
  var id=e.id;
  switch(id)
  {
   case "txtmsg":
   document.getElementById("Submit2").click();
   window.event.returnValue=false;
   break;
   }
  }
}
function fRandomBy(under, over){
switch(arguments.length){
case 1: return parseInt(Math.random()*under+1);
case 2: return parseInt(Math.random()*(over-under+1) + under);
default: return 0;
}
}
function SetTxtName(){
var i=fRandomBy(10);
if(i==0)document.getElementById('txtname').value='无敌战神';
if(i==1)document.getElementById('txtname').value='令狐冲';
if(i==2)document.getElementById('txtname').value='西门吹雪';
if(i==3)document.getElementById('txtname').value='超级玛丽';
if(i==4)document.getElementById('txtname').value='奥巴马';
if(i==5)document.getElementById('txtname').value='恐怖分子';
if(i==6)document.getElementById('txtname').value='聊斋奇女子';
if(i==7)document.getElementById('txtname').value='天朝?潘?;
if(i==8)document.getElementById('txtname').value='中500万了';
if(i==9)document.getElementById('txtname').value='神级奇葩';
if(i==10)document.getElementById('txtname').value='爱你不是两三天';
}
</script>
</head>
<body onload="SetTxtName();">
  <div style="border-right: black thin solid; border-top: black thin solid;
    border-left: black thin solid; border-bottom: black thin solid;
    background:#fff url('http://www.ihaonet.com/chat/blue.jpg') repeat-x left top;
    height: 450px;width: 500px; ">
    <table style="width:100%; height:100%">
      <tr>
        <td colspan="2" style="font-weight: bold; font-size: 16pt; color: white; font-family: verdana, arial;
          text-align: center">
          聊天窗口--全球最大QQ聊天交友网站</td>
      </tr>
      <tr>
        <td colspan="2" style="font-weight: bold; font-size: 16pt; color: white; font-family: verdana, arial;
          text-align: left">
          <table style="font-size: 12pt; color: white; font-family: Verdana, Arial;border: white thin solid; ">
            <tr>
              <td style="width: 100px">
                名字:</td>
              <td style="width: 100px"><input id="txtname" style="width: 150px" type="text" name="name" maxlength="15" value="匿名" /></td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td style="vertical-align: middle;" valign="middle" colspan="2">
          <div style="width: 480px; height: 300px; border-right: white thin solid; border-top: white thin solid; font-size: 10pt; border-left: white thin solid; border-bottom: white thin solid; font-family: verdana, arial; overflow:scroll; text-align: left;" id="DIV_CHAT">
          </div>
        </td>
      </tr>
      <tr>
        <td style="width: 310px">
          <input id="txtmsg" style="width: 350px" type="text" name="msg" onkeydown="return clickBtn(this)"/></td>
        <td style="width: 85px">
          <input id="Submit2" style="font-family: verdana, arial" type="button" value="发送" onclick="set_chat_msg()"/></td>
      </tr>
      <tr>
        <td colspan="1" style="font-family: verdana, arial; text-align: center; width: 350px;">
          </td>
        <td colspan="1" style="width: 85px; font-family: verdana, arial; text-align: center">
        </td>
      </tr>
    </table>
  </div>
</body>
</html>

效果图如下:

PHP+mysql+ajax轻量级聊天室实现方法详解

希望本文所述对大家PHP程序设计有所帮助。

延伸 · 阅读

精彩推荐