聊天室的实现（消息实时刷新）

简单的对话框：实现消息的两秒一刷新，获取消息记录；

页面加载时，消息框中的滑块处于最低端，向上滑动可以查看历史信息，此时刷新信息的时候，不在刷新滑块，使其仍处于最底层，也就是说，当滑块滚动的时候，不在受实时刷新的控制。当输入新的信息的时候，启动滑块的刷新，使其刷新到最底层（当前DIV的最底层）。另外，内容发送会显示发送状态，2秒后自动消失。

代码实现：

index.html

[html] view plain copy

<html>
<head>
<title>聊天室</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript">
var maxID=0;
var kongzhi = 1;
function show(){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (){
if(xhr.readyState==4){
//alert(xhr.responseText);
eval("var jn_info = "+xhr.responseText);
var s="";
for(var i=0 ; i<jn_info.length;i++){
s+="<p style='color #233434'>"+jn_info[i].from;
s+="对"+jn_info[i].to+"说："+jn_info[i].content;
s+="</p>";
maxID = jn_info[i].id;
}
var showview=document.getElementById('view');
showview.innerHTML += s;
if(kongzhi==1){//控制加载时，消息内容处于最底层，而且只进行一次
showview.scrollTop=showview.scrollHeight;
kongzhi++;
}else{
//
}
}
}
xhr.open('get','./data.php?maxID='+maxID);
xhr.send(null);
}
window.onload= function(){
show();
//轮转查询
setInterval("show()",2000);
}
</script>
</head>
<body>
<div id ="view" style="border:1px solid silver; margin:0 auto; width:400px; height:500px; overflow-y: scroll; word-break: break-all;word-wrap: break-word;">
<h1>欢迎光临聊天室</h1>
<p style="color:red;">小编祝大家幸福</p>
</div>
<div style=" margin:0 auto; border:1px solid silver; width:400px ;height:60px;" onmousewheel="stop()">
<form id="form">
<input type="hidden" name="from" value="周杰伦">
<input type="hidden" name="to" value="李长江">
聊天内容：<input type="text" name="content" id="content"><input type="button" name="submit" value="发送" onClick="send()">
<span id="re"></span>
</form>
</div>
</body>
</html>
<script type="text/javascript">
function send(){
var showview=document.getElementById('view');
var fm = document.getElementById('form');//不要通过TagName获取表单
var fd = new FormData(fm);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (){
if(xhr.readyState==4){
//alert(xhr.responseText);
document.getElementById('re').innerHTML=xhr.responseText;
document.getElementById('content').value="";
setTimeout(function(){hidden()},2000)
}
}
xhr.open('post','./action.php');
xhr.send(fd);
showview.scrollTop=showview.scrollHeight;
}
function hidden(){
document.getElementById('re').innerHTML="";
}
function stop(){
showview.scrollTop=showview.scrollHeight;
}
</script>

data.php

[html] view plain copy

<?php
error_reporting(0);
$conn=@mysql_connect("localhost","root" ,"guo941102");
mysql_select_db('test',$conn);
mysql_query("set names utf8") or die(mysql_errno());
$maxID= $_GET['maxID'];
$sql="select * from msg where id >'$maxID'";
$res=mysql_query($sql);
$info= array();
while($row=mysql_fetch_assoc($res)){
// $temp=array();
// foreach($row as $key => $value){
// $temp[$key]=urlencode($value);
// }
// $info[]=$temp;
$info[]= $row;
}
//通过json格式传递数据
// var_dump($info);
//
// echo urldecode(json_encode($info));
echo json_encode($info);
?>

action.php

[html] view plain copy

<?php
header("Content-type: text/html; charset=utf-8");
error_reporting(0);
$conn=@mysql_connect("localhost","root" ,"guo941102");
mysql_select_db('test',$conn);
mysql_query("set names utf8") or die(mysql_errno());
//print_r($_POST);
$from =$_POST['from'];
$to =$_POST['to'];
$content =$_POST['content'];
$sql = "insert into msg values(null,'$from','$to','$content',now())";
if(mysql_query($sql)){
echo "发表成功";
}
else{
echo "发表失败";
}
?>

只是为了功能的实现，所以界面并不是那么好看。欢迎建议。。。

简单的对话框：实现消息的两秒一刷新，获取消息记录；

代码实现：

index.html

[html] view plain copy

<html>
<head>
<title>聊天室</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript">
var maxID=0;
var kongzhi = 1;
function show(){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (){
if(xhr.readyState==4){
//alert(xhr.responseText);
eval("var jn_info = "+xhr.responseText);
var s="";
for(var i=0 ; i<jn_info.length;i++){
s+="<p style='color #233434'>"+jn_info[i].from;
s+="对"+jn_info[i].to+"说："+jn_info[i].content;
s+="</p>";
maxID = jn_info[i].id;
}
var showview=document.getElementById('view');
showview.innerHTML += s;
if(kongzhi==1){//控制加载时，消息内容处于最底层，而且只进行一次
showview.scrollTop=showview.scrollHeight;
kongzhi++;
}else{
//
}
}
}
xhr.open('get','./data.php?maxID='+maxID);
xhr.send(null);
}
window.onload= function(){
show();
//轮转查询
setInterval("show()",2000);
}
</script>
</head>
<body>
<div id ="view" style="border:1px solid silver; margin:0 auto; width:400px; height:500px; overflow-y: scroll; word-break: break-all;word-wrap: break-word;">
<h1>欢迎光临聊天室</h1>
<p style="color:red;">小编祝大家幸福</p>
</div>
<div style=" margin:0 auto; border:1px solid silver; width:400px ;height:60px;" onmousewheel="stop()">
<form id="form">
<input type="hidden" name="from" value="周杰伦">
<input type="hidden" name="to" value="李长江">
聊天内容：<input type="text" name="content" id="content"><input type="button" name="submit" value="发送" onClick="send()">
<span id="re"></span>
</form>
</div>
</body>
</html>
<script type="text/javascript">
function send(){
var showview=document.getElementById('view');
var fm = document.getElementById('form');//不要通过TagName获取表单
var fd = new FormData(fm);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (){
if(xhr.readyState==4){
//alert(xhr.responseText);
document.getElementById('re').innerHTML=xhr.responseText;
document.getElementById('content').value="";
setTimeout(function(){hidden()},2000)
}
}
xhr.open('post','./action.php');
xhr.send(fd);
showview.scrollTop=showview.scrollHeight;
}
function hidden(){
document.getElementById('re').innerHTML="";
}
function stop(){
showview.scrollTop=showview.scrollHeight;
}
</script>

data.php

[html] view plain copy

<?php
error_reporting(0);
$conn=@mysql_connect("localhost","root" ,"guo941102");
mysql_select_db('test',$conn);
mysql_query("set names utf8") or die(mysql_errno());
$maxID= $_GET['maxID'];
$sql="select * from msg where id >'$maxID'";
$res=mysql_query($sql);
$info= array();
while($row=mysql_fetch_assoc($res)){
// $temp=array();
// foreach($row as $key => $value){
// $temp[$key]=urlencode($value);
// }
// $info[]=$temp;
$info[]= $row;
}
//通过json格式传递数据
// var_dump($info);
//
// echo urldecode(json_encode($info));
echo json_encode($info);
?>

action.php

[html] view plain copy

<?php
header("Content-type: text/html; charset=utf-8");
error_reporting(0);
$conn=@mysql_connect("localhost","root" ,"guo941102");
mysql_select_db('test',$conn);
mysql_query("set names utf8") or die(mysql_errno());
//print_r($_POST);
$from =$_POST['from'];
$to =$_POST['to'];
$content =$_POST['content'];
$sql = "insert into msg values(null,'$from','$to','$content',now())";
if(mysql_query($sql)){
echo "发表成功";
}
else{
echo "发表失败";
}
?>

只是为了功能的实现，所以界面并不是那么好看。欢迎建议。。。

聊天室的实现（消息实时刷新）

猜你喜欢