AJAX+JQUERY+PHP实现基本IM

最新推荐文章于 2024-03-09 15:46:31 发布

jmxiaocai

最新推荐文章于 2024-03-09 15:46:31 发布

阅读量1k

点赞数

分类专栏： php mysql 文章标签： jquery ajax php function session javascript

php 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

mysql

1 篇文章 0 订阅

订阅专栏

也许您是一个站长，整天都在幻想自己的用户能够方便的实时讨论页面主题或者销售的产品又或者咨询您一些问题。不错QQ MSN 等都提供了这种功能，当然也有一部分第三方付费系统可以实现。如果您对以上几种解决办法不是很满意，那么这篇文章可能对您有所帮助。

       首先我们明确自己的需求：

   产品的页面或者普通页面中加入聊天
不必让客户安装任何特殊的软件等
不用花费银子。

      用免费的现成工具如 PHP、MySQL、Ajax 和jquery.js 库就能完全做。

       在我们开始之前我们首先要明确几个概念

     IM(InstantMessaging 即时通讯,实时传讯) 这是一种可以让使用者在网络上建立某种私人聊天室（chatroom）的实时通讯服务。

     到底什么才算是实时，至少我认为我们将要实现的不算是实时，我们将要通过“轮询”实现。如果刚接触 Ajax 或者仅对该领域有所了解，“轮询” 的概念可能让您感到害怕。不幸的是，轮询是惟一的办法。要在客户机和服务器之间建立连续管道，同时又不需要在两端安装特定软件，尚不存在可实现此目的的跨平台、跨浏览器方法。即便这样，可能还需要对防火墙进行专门配置才行得通。因此，如果需要人人能用的一种简便办法，Ajax 和轮询是惟一的可能。



jQuery 是什么？

jQuery 由 John Resig 创建于 2006 年初，对于任何使用 JavaScript 代码的程序员来说，它是一个非常有用的 JavaScript 库。无论您是刚刚接触 JavaScript 语言，并且希望获得一个能解决文档对象模型（Document Object Model，DOM）脚本和 Ajax 开发中一些复杂问题的库，还是作为一个厌倦了 DOM 脚本和 Ajax 开发中无聊的重复工作的资深 JavaScript 专家，jQuery 都会是您的首选。

jQuery 能帮助您保证代码简洁易读。您再也不必编写大堆重复的循环代码和 DOM 脚本库调用了。使用 jQuery，您可以把握问题的要点，并使用尽可能最少的代码实现您想要的功能。

毫无疑问，jQuery 的原理是独一无二的：它的目的就是保证代码简洁并可重用。

好了不再罗嗦了，让我们立即开始吧。

第一步建立一个登录页面
  
  <html> 
<head><title>用户登录页面</title></head> 
<body> 
<form action="chat.php" method="post"> 
用户名: <input type="text" name="username"> 
<input type="submit" value="Login"> 
</form> 
</body> 
</html> 
作用：要给聊天者一个身份标识。这就需要一个简单的登录页。这里就不过多说明了。

第二步建立数据存储
我们需要将聊天的内容等存储起来以便让聊天者之间通过服务器实现聊天内容的交互，这里我们选择数据库存储，当然您也可以直接用xml存储等。

我们在mysql服务器上建立一个IM数据库并且在IM数据库里面建立一个表
  
  DROP TABLE IF EXISTS messages;  
 
CREATE TABLE messages (  
 message_id INTEGER NOT NULL AUTO_INCREMENT,  
 username VARCHAR(255) NOT NULL,  
 message TEXT,  
 PRIMARY KEY ( message_id )  
);  
message_id 表主键 username 存储聊天者的身份标识 message 存储说话的内容。

第三步基本的用户聊天界面
  
  <?php 
session_start();  
if ( array_key_exists( 'username', $_POST ) ) {  
 $_SESSION['user'] = $_POST['username'];  
}  
$user = $_SESSION['user'];  
?> 
<html> 
<head><title><?php echo( $user ) ?> - Chatting</title> 
<script src="js/jquery.js"></script> 
</head> 
<body> 
<div id="chat" style="height:400px;overflow:auto;"> 
</div> 
 
<script> 
$(document).ready(function(){  
   $("#add_btn").click(function(){  
       $.ajax({  
              type: "POST",  
              url: "add.php",  
              data:$("#chatmessage").serialize(),  
              success: function(msg){ $("#messagetext").val(""); }   
            });   
   });  
 
});  
 
</script> 
 
<form id="chatmessage"> 
<textarea name="message" id="messagetext"> 
</textarea> 
</form> 
 
<button ID="add_btn">Add</button> 
 
<script> 
var lastid=0;  
function getMessages()  
{  
       
       $.ajax({  
              type: "POST",  
              url: "message.php",  
              data: "lastid="+lastid,  
              success: function(xml){           
                 $(xml).find('messagelist > message').each(function(){  
                  $("#chat").html($("#chat").html()+
                          $(this).find("user").text()+
                           ":"+$(this).find("msg").text()+"<br>");  
                      lastid=$(this).find("id").text();  
                      
                   });  
                   window.setTimeout( getMessages, 1000 );  
                  }   
              
         });  
}  
getMessages();  
</script> 
 
</body> 
</html> 
代码说明：
首先我们需要获得用户的身份标识并且将它存储在session里面。
  
  <?php  
session_start();  
if ( array_key_exists( 'username', $_POST ) ) {  
 $_SESSION['user'] = $_POST['username'];  
}  
$user = $_SESSION['user'];  
?> 
当我们输入完我们的发言时通过点击 add按钮将发言内容发送到服务器上存储在数据库里面这样别的用户通过读取数据库记录就能看到我们的发言了。
  
  <script>  
$(document).ready(function(){  
   $("#add_btn").click(function(){  
       $.ajax({  
              type: "POST",  
              url: "add.php",  
              data:$("#chatmessage").serialize(),  
              success: function(msg){ $("#messagetext").val(""); }   
            });   
   });  
 
});  
 
</script> 
下面这段代码就是通过每1秒向服务器发送请求来获得发言的信息。
  
  <script>  
var lastid=0;  
function getMessages()  
{  
       
       $.ajax({  
              type: "POST",  
              url: "message.php",  
              data: "lastid="+lastid,  
              success: function(xml){   
                // $("#chat").html(xml);  
                //var nodes=$("messagelist > message",xml);  
                //alert(nodes.length);  
                   
                 //alert(xml);  
                 $(xml).find('messagelist > message').each(function(){  
                    //($(this).find("id").text()).appendTo("#chat");  
                       $("#chat").html($("#chat").html()+$(this).find("user").text()+":"+$(this).find("msg").text()+"<br>");  
                       lastid=$(this).find("id").text();  
                      //alert($(this).find("id").text());  
                   });  
                   window.setTimeout( getMessages, 1000 );  
 
                   
                  }   
              
         });  
}  
getMessages();  
</script> 
有人可能要问那个lastid 是做什么的？

页面每秒请求一次对话的所有聊天记录。虽然对于较短的对话影响不大，但是如果对话很长，性能问题就显现出来了。所幸的是解决起来很简单。每条消息都有 message_id，这个数字自动递增。因此，如果知道已经有了属于某个 ID 的消息，只需要请求出现在此 ID 之后的消息就可以。这样可以大大降低消息传递的数量。多数请求很可能没有新的消息，传递的包就会变小。

添加发言程序：
add.php
  
  <?  
session_start();  
?>  
<?  
mysql_connect("localhost","root","") or die("无法连接数据库");  
mysql_query("INSERT INTO im.messages VALUES ( null,'".$_SESSION['user']."', '".$_POST['message']."' )");  
?> 
读取消息程序：
  
  <?  
session_start();  
header('Content-type: text/xml');  
?>  
<messagelist>  
<?php  
mysql_connect("localhost","root","") or die("无法连接数据库");  
$row = mysql_query('SELECT * FROM im.messages where message_id >'.intval($_POST["lastid"]) );  
while( $field=mysql_fetch_array($row ) )  
{  
?>  
<message>  
    <id><?php echo($field[0]) ?></id>  
     <user><?php echo($field[1])?></user>  
    <msg><?php echo($field[2]) ?></msg>  
</message>  
<?php  
}  
?>  
</messagelist>  
好了赶快调试一下吧，是不是已经实现了基本的聊天功能.

from：http://www.cnjquery.com/html/JQueryshili/200807/08-42.html