php+Ajax+Mysql 创建简单的一对一在线聊天室

最近在学习Ajax异步刷新的时候么突然想到能不能这个技术做点什么事情，网上百度了一下，发现好多人用这个写在线聊天，自己也想试试。不过，做完之后发现这种方法写的聊天室，真的很耗资源，不过就当练手学习吧。

首先介绍一下Ajax，Ajax不是一种新的编程语言，而是使用现有标准的新方法。他能实现与服务器交换数据，并且能在不刷新整个网页的情况下得到数据，Ajax主要可以用在用户登录网站时的判断其用户名密码是否正确的时候

第一步，创建数据库，储存聊天信息放在chat表中。

首页：

<html>
<head>
<style type="text/css">
div#container{width:500px;background-color:#99bbbb;margin:0 auto;}
div#header {background-color:#99bbbb;}
div#content {background-color:#EEEEEE;height:200px;width:500px;float:left;}
div#input {background-color:#99bbbb;height:150px;width:500px;float:left;}
div#form{width: 500px; height:80px;}
div#chat_content{width: 500px; height:260px;}
h1 {margin-bottom:0;}
h2 {margin-bottom:0;font-size:18px;}
h3{margin-bottom:0;}
ul {margin:0;}
li {list-style:none;}
</style>
<script type="text/javascript">var int=self.setInterval("loadcontent()",1)//载入该用户的聊天记录function loadcontent(){//通过name属性得到页面元素chatvar f=document.chat;//得到content的值；var content = f.content.value;//得到recieve的值var recieve = f.recieve.value;//得到send的值var send = f.send.value;var xmlhttp;//创建XMLHttpRequest对象//目前部分浏览器支持XMLHttpRequest，少部分不支持的话可以选择ActiveXObjectif (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();}else{// code for IE6, IE5xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}//建议使用onreadystatechange，虽然这样做会比较麻烦，具体用法请见w3schoolxmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4 && xmlhttp.status==200){//服务器相应请求，改变chat_content的内容//resposeText为接收结果document.getElementById("chat_content").innerHTML=xmlhttp.responseText;}}//创建请求，这里用get传递参数，传递了recieve_id，send_id两个参数；//参数true表示是异步传输，这里选择异步的话，上面就得使用onreadystatechange//URL为服务器上面文件的地址xmlhttp.open("GET","http://localhost/ChatOnline/get_chat.php?send="+send+"&recieve="+recieve,true);xmlhttp.send();}//发送内容function sendcontent(){var xmlhttp;if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();}else{// code for IE6, IE5xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4 && xmlhttp.status==200)// 服务端返回了正确数据，开始响应处理{   document.getElementById("input").innerHTML="";} }xmlhttp.open("POST","http://localhost/ChatOnline/send_chat.php",true);var f=document.chat;var content = f.content.value;var recieve = f.recieve.value;var send = f.send.value;//发送请求//这里使用Post方法传递参数；//将要构造的参数连接起来，接收的时候：$_POST['send'];var post_str= "content="+ content+"&recieve="+recieve+"&send="+send;//使用post的时候必须在发送请求之前加上下面这句xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlhttp.send(post_str);}</script>
</head>
<body>
<?php
//接收发送者，接收者的id；$recieve_id=$_GET['recieve_id'];$send_id = $_GET['send_id'];
?><div id="container"><div id="header"><h3>  聊天窗口</h3></div><div id="chat"><textarea name="chat_content" id="chat_content" style="width: 480px; height:250px; margin:5px;border:0;padding:0;" readonly="readonly"></textarea><!-- <textarea name="chat_content" id="chat_content" cols="65.3" rows="20" style=""></textarea>--></div><div id="form" ><form name= "chat" ><div  id="input_content" ><input id = "input" type ="textarea" name="content" style="width: 480px; height:50px; margin:5px;border:0;padding:0;" ><input type = "hidden" name="send" value ="<?php echo $send_id ?>"><input type = "hidden" name="recieve" value = "<?php echo $recieve_id?>"><button type="button" style="float:right"  οnclick="sendcontent()">发送</button></div></form>    </div></div>    </body>
</html>

首页中用到两个Ajax，一个用来不断刷新信息信息显示框，每隔1毫秒刷新一次。需要说明一下传递参数时，使用get方法和post方法：get方法很快，但是只能传递比较小的数据，post可以传递很大的数据，而且不会再url中显示出来，比较安全。在使用post的时候，第一点：必须在发送请求之前使用setRequestHeader()创建Http头，然后在send中加入参数，参数的连接以及如何接受在注释中有。

处理发送的数据：

<?php$time = date('Y-m-d H:i:s',time());;$send = $_POST['send'];$send = intval($send);$recieve = $_POST['recieve'];$recieve = intval($recieve);$content = $_POST['content'];$con = mysql_connect("localhost","","");if (!$con){die('Could not connect: ' . mysql_error());}mysql_select_db("ing", $con);mysql_query("set names 'utf8'");$insert="INSERT INTO  `chat` (`id` ,`send_id` ,`recieve_id` ,`time` ,`content`) VALUES (NULL ,  '$send',  '$recieve',  '$time',  '$content')";$result = mysql_query($insert);?>

处理接收的数据

<?php $recieve_id = $_GET['recieve'];$send_id = $_GET['send'];$con = mysql_connect("localhost","","");if (!$con){die('Could not connect: ' . mysql_error());}mysql_select_db("ing", $con);mysql_query("set names 'utf8'");           $sql = "SELECT * FROM  `chat` WHERE (`send_id` =".$send_id." and `recieve_id` = ".$recieve_id.") or (`recieve_id` =".$send_id." and `send_id` =".$recieve_id.");";$result = mysql_query($sql);if(isset($result)){while($row = mysql_fetch_array($result)){echo "来自：$row[1] \n";echo "$row[3] \n";echo "$row[4] \n";}}else{echo "聊天记录为空";}?>

这部分主要的方面是sql，如何提取聊天内容能够实现一对一聊天呢？

因为数据库的信息包含发送方id，接收方id，所以我们使用这两个值来实现，比如说双方的id分别是1,2，那么只要挑选出发送方是1，并且接收方是2，或者发送方是2，并且接收方是1，就可以了。这样显示的就会是一对一的效果。

测试的时候需要注意，因为没有写登陆和注册，在Url中得填写上接收方和发送方的id

好啦，这就简单的写出来了一个一对一的在线聊天系统了！

php+Ajax+Mysql 创建简单的一对一在线聊天室相关推荐

如何简单的创建一个多人在线聊天室
学习目标: 在本教程中,我们将要使用PHP和jQuery创建一个简单的在线聊天工具. 这种实用性的模块对于你想要有实时在线客户支持系统的网站可以说是完美. 废话不多说直接开始. 步骤1:HTML的代码 ...
简单的一个在线聊天室
闲着无聊写一个基于数据库写一个在线聊天室前几天闲着没事突然想起写个小程序玩玩,就想到了写个在闲聊天室,话不多说直接开始. 1.第一当然是先写一个聊天界面啦,我写的界面是这样: 聊天页面 2.写这个程 ...
php 开发一个聊天系统,ajax+php 实现一个简单的在线聊天室功能（附带源码）
通过ajax和setInterval()函数,配合php+mysql实现一个简单的在线聊天室的功能.附带详细源码案例.这个聊天室是一个简单的聊天室,通过javascript setInterval() ...
WebSocket创建局域网在线聊天室
WebSocket的简要介绍: WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服 ...
基于Server-Sent Event的简单在线聊天室
一.Web即时通信所谓Web即时通信,就是说我们可以通过一种机制在网页上立即通知用户一件事情的发生,是不需要用户刷新网页的.Web即时通信的用途有很多,比如实时聊天,即时推送等.如当我们在登陆浏览 ...
第三章、C#简单界面在线聊天室C#一对多聊天（使用TCP转发实现的在线聊天室，文章末尾附免费项目资源）
C#网络通信系列学习笔记第一章.C#最简单的控制台网络通信&C#最简单的控制台socket通信第二章.C#控制台实现一对一聊天&C#socket类的简单封装第三章.C#简单在线聊 ...
Unity联网之使用Socket简单实现多人在线聊天室（一）
「前言」之前在一直在写lua联网等一些知识,虽然lua重要,但C#联网也必不可少是吧.所以呢,本篇博客就主要介绍如何使用Unity和C#在实现多人在线聊天室. 服务器客户端工作原理:(通过消息类型 ...
YShout一款PHP+TXT+Ajax嵌入式在线聊天室源码
简介: YShout是一款PHP+TXT+AJAX开发嵌入式在线聊天室源码,UTF-8编码. 可以非常方便的嵌入到的你的网站中,无需数据库,采用TXT存储数据,小巧灵活,移植方便.采用AJAX技术,增 ...
Python+django网页设计入门（20）：使用WebSocket创建多人在线聊天室
2019年3月8日-10日公众号送书活动:中小学生Python课应该学什么 ================ 前导课程: Python+django网页设计入门(19):创建新模型扩展自带用户表的字段 ...

php+Ajax+Mysql 创建简单的一对一在线聊天室

php+Ajax+Mysql 创建简单的一对一在线聊天室相关推荐

最新文章

热门文章