欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ajax 实现一个网页版山寨QQ

程序员文章站 2023-03-12 13:50:11
思路:用户登录后,可以点击好友列表对好友进行聊天,那么所发送的数据都会保存到数据库,而聊天窗口每隔一定时间向数据库索要数据 (条件是 where getter='$get...
思路:用户登录后,可以点击好友列表对好友进行聊天,那么所发送的数据都会保存到数据库,而聊天窗口每隔一定时间向数据库索要数据

(条件是 where getter='$getter' and sender='$sender' and isGet=0" )

该程序包含以下几个页面

login.php //登录页面

fiendList.php //登录好友页面

chatRoom.php  //聊天室页面,要发送数据和接收数据都要通过ajax调用相应的controller页面,下面两个就是了

sendMessageController //处理发送过来的数据

getMessageController  //返回相应的聊天数据

MessageService.php  //用于服务上面的两个控制器 (就是model)

下面是源码

//====================login.php====================

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

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

</head>

<h1>欢迎登录聊天室</h1>

<form action="LoginController.php" method="post">

用户名:<input type="text" name="username" /><br/><br/>7

密    码:<input type="text" name="passwd" /><br />

 <input type="submit" value="登录" /><br />

</form>

</html>

 

//==================fridendList.php=======================

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

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

<script type="text/javascript">

function openChatRoom(obj){

window.open("chatRoom.php?username="+obj.innerText,"_blank");

}

</script>

</head>

<body>

<h1>好友列表</h1>

<ul>

<li onclick="openChatRoom(this)">songjiang</li>

<li onclick="openChatRoom(this)">zhangfei</li>

<li onclick="openChatRoom(this)">xiaoqian</li>

<li onclick="openChatRoom(this)">linzhouzhi</li>

</ul>

</body>

</html>

 

//=========================chatRoom.php===============

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<?php 

$username=$_GET['username'];

//取出session中登陆名

session_start();

$loginUser = $_SESSION['loginuser'];

?>

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

<script type="text/javascript">

function getXmlHttpObject(){

var xmlHttpRequest;

//不同的浏览器获取对象xmlhttprequest 对象方法不一样

if(window.ActiveXObject){

 

xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");

 

}else{

xmlHttpRequest=new XMLHttpRequest();

}

return xmlHttpRequest;

}

var myXmlHttpRequest=null;

//没歌两秒调用getmessage()

window.setInterval("getMessage()",5000);

function getMessage(){

myXmlHttpRequest =  getXmlHttpObject();

if(myXmlHttpRequest){

var url="getMessageController.php";

var data = "getter=<?php echo $loginUser;?>&sender=<?php echo $username?>";

myXmlHttpRequest.open("post",url,true);

myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

myXmlHttpRequest.onreadystatechange=function(){

if(myXmlHttpRequest.readyState==4){

if(myXmlHttpRequest.status==200){

var mesRes = myXmlHttpRequest.responseXML;

//取出content内容和时间

var cons = mesRes.getElementsByTagName("con");

if(cons.length!=0){

//有多少条记录就显示多少条记录

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

$('mycons').value += "<?php echo $username;?> -->><?php echo $loginUser;?> say:"+cons[i].childNodes[0].nodeValue+"\r\n ";

}

}

}

myXmlHttpRequest.send(data);

}

}

function sendMessage(){

myXmlHttpRequest =  getXmlHttpObject();

if(myXmlHttpRequest){

var url = "sendMessageController.php";

//js中如何使用php数据

var data = "con="+$('con').value+"& getter=<?php echo $username; ?>& sender=<?php echo $loginUser; ?>";

myXmlHttpRequest.open("post",url,true);

myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

myXmlHttpRequest.onreadystatechange=function(){

if(myXmlHttpRequest.readyState==4){

if(myXmlHttpRequest.status==200){

//这里要返回信息,这里我们不需要

 

}

}

}

myXmlHttpRequest.send(data);

$('mycons').value += "you --><?php echo $username;?> say: "+$('con').value + new Date()+"\r\n";

}

}

function $(id){

return document.getElementById(id);

}

</script>

</head>

<center>

<h1>You(<?php echo $loginUser;?>with  <font color='red'><?php echo $username; ?></font>chatting..)</h1>

<textarea cols="40" rows="20" id="mycons" value=""></textarea><br/>

<input type="text" style="width:200px" id="con" />

<input type="button" value="sendmessage" onclick="sendMessage()" />

</center>

</html>

//======================sendMessageController.php============================

<?php

require_once 'MessageService.class.php';

$sender = $_POST['sender'];

$getter = $_POST['getter'];

$con = $_POST['con'];

//file_put_contents("mylog.log",$sender."__".$getter."__".$con."\r\n",FILE_APPEND);

$messageService = new MessageService();

if($messageService->addMessage($sender, $getter, $con)==0){

echo "you operate is faile";

}else{

echo "you operate is ok";

}

 

//========================getMessageController.php==========================

<?php

//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式

header("Content-Type: text/xml;charset=utf-8");

//告诉浏览器不要缓存数据

header("Cache-Control: no-cache");

require_once 'MessageService.class.php'; 

$getter = $_POST['getter'];

$sender= $_POST['sender'];

//file_put_contents("mylog.log",$getter."_this is getmessage_".$sender."\r\n",FILE_APPEND);

$messageService = new MessageService();

$mesList = $messageService->getMessage($getter,$sender);

echo $mesList;

file_put_contents("mylog.log",$mesList."\r\n",FILE_APPEND);

 

//============================MessageService.php========================

<?php

require_once 'SqlHelper.class.php';

class MessageService{

//add message in database

function addMessage($sender,$getter,$con){

$sql = "insert into message (sender,getter,content,sendTime) values('$sender','$getter','$con',now())";

 

$sqlHelper = new SqlHelper();

 

        $mes=$sqlHelper->execute_dml($sql);

}

//获取数据并将其返回给聊天室

function getMessage($getter,$sender){

$sql="select * from message where getter='$getter' and sender='$sender' and isGet=0";

$sqlHelper =new SqlHelper();

$array = $sqlHelper->execute_dql2($sql);

//拼接成xml 格式

$messageInfo = "<meses>";

for($i=0;$i<count($array);$i++){

$row = $array[$i];

$messageInfo.="<mesid>{$row['id']}</mesid><sender>{$row['sender']}</sender><getter>{$row['getter']}</getter><con>{$row['content']}</con><sendTime>{$row['sendTime']}</sendTime>";

}

$messageInfo.="</meses>";

//更新

$sql = "update message set isGet=1 where getter='$getter' and sender='$sender'";

$sqlHelper->execute_dml($sql);

$sqlHelper->close_connect();

return $messageInfo;

}

}