ajax php 聊天室实例代码(4)

2024-05-04 23:06:14

字体：大中小

来源：转载

供稿：网友

<html>

<head>

<title>迷你php+ajax聊天室演示 <?php echo $title;?></title>

<meta http-equiv='pragma' content='no-cache' />

<meta http-equiv=content-type content="text/html; charset=<?php echo $charset;?>" />

<meta name="keywords" content="<?php echo $lang["keywords"];?>">

<meta name="description" content="mini ajax chatroom by longbill. <?php echo $description;?>">

<style type='text/css'>

body { text-align:center; color:#333333; font-size:12px; font-family:宋体;}

a { text-decoration:none; color:#a2b700; }

.mydiv { text-align:left; margin:5px; padding:5px; border:1px solid #ff8c05; background-color:#fdd283; width:600px; }

.inputtext { border:0px; border-bottom:1px solid #333333; background-color:transparent;}

.submit { border:1px solid #ff8c05; background-color:transparent; }

.contents { border:1px solid #ff8c05;margin:5px; margin-top:10px;background-color:#ffffff; overflow:auto;word-break:break-all;word-wrap :break-word;}

.bg { background-color:#ffffff; }

.content { border:0px;background-color:transparent;width:auto; font-size:16px; font-family:fixedsys; margin:2px; padding:1px; }

.time { color:#aaaaaa; font-size:10px; font-family:arial;}

.online { margin:5px; padding:0px; display:inline; }

.mybut { width:20px; height:20px; background-color:#ff8c05; text-align:center; font-size:18px; color: #333333;}

</style>

<script>

function $(obj)

{

return document.getelementbyid(obj);

}

function setcookie(name,value,t)

{

var cookieexp = 5*30*24*60*60*1000; //5 months

var cookiestr=name+"="+escape(value)+";";

var expires = "";

var d = new date();

var t2=(!t)?cookieexp:t*60*1000;

d.settime( d.gettime() + cookieexp);

expires = "expires=" + d.togmtstring()+";";

document.cookie = cookiestr+ expires;

}

function getcookie(name)

{

var start = document.cookie.indexof( name + "=" );

var len = start + name.length + 1;

if ( ( !start ) && ( name != document.cookie.substring( 0, name.length ) ) ) return "";

if ( start == -1 ) return "";

var end = document.cookie.indexof( ";", len );

if ( end == -1 ) end = document.cookie.length;

return unescape( document.cookie.substring( len, end ) );

}

function createajax()

{

if (window.xmlhttprequest)

{

  var ohttp = new xmlhttprequest();

  return ohttp;

}

else if (window.activexobject)

{

  var versions = [

   "msxml2.xmlhttp.6.0",

   "msxml2.xmlhttp.3.0"

  ];

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

  {

   try {

    var ohttp = new activexobject(versions[i]);

    return ohttp;

   } catch (error) {}

  }

     }

throw new error("your browser doesn't support xmlhttprequest");

}

function pickcolor()

{

if (!window.isie) return;

var scolor = $('dlghelper').choosecolordlg();

var color = scolor.tostring(16);

while (color.length<6) color="0"+color;

window.color = color;

color = "#"+color;

$('div_color').style.backgroundcolor = color;

$('div_color').value = color;

}

var isie = (document.all && window.activexobject) ? true : false;

</script>

</head>

<body >

<center>

<div class=mydiv style='text-align:center; border:0px; background-color:transparent; font-size:25px; color:#ff8c05;'><?php echo $title;?></div>

<div class="mydiv login" id='div_description'>

<?php echo $description;?>

</div>

<div class="mydiv rooms" id='div_msg'>

<div class='contents' style='height:350px;' id='div_contents'>loading...</div>

</div>

<div class="mydiv login" id='div_name' style='display:block;'>

name:<input type=text class="inputtext bg" size=8 id='chat_user' value='' maxlength=30 /> 

<object id=dlghelper classid="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px"></object>

<input class="inputtext" style='width:50px;cursor:hand;10px;background-color:#000000;color:#ffffff;' id='div_color' onclick="pickcolor()" value="#000000" onblur="this.style.backgroundcolor=this.value;window.color=this.value.replace('#','');" />

 size:<input class="inputtext bg" type=text style='width:20px' maxlength=3 id='input_size' value='16' />(px)

 font:<select id='input_font' class='inputtext bg' style='width:70px;'>

<option value='fixedsys'>fixedsys</option>

<option value='heiti'>黑体</option>

<option value='songti'>宋体</option>

<option value='kaiti'>楷体</option>

</select>

bold:<input type=checkbox id='input_bold' class='inputtext' style='border-bottom:0px;' />

window:<a class='mybut' href='#' onclick='resize(1)'>+</a>

 <a class='mybut' href='#' onclick='resize(0)'>-</a>

 <a class='mybut' style='width:25px;font-size:16px;' href='#' onclick='clearall()'>clear</a>

</div>

<div class="mydiv login" id='div_word'>

<textarea type=text class="inputtext bg" rows=1 scrolling=no style='height:20px;overflow:hidden;width:500px;' id='chat_word' onfocus="if (this.value == '<?php echo $lang["hereyourwords"];?>') this.value=''; window.editing=0; "

onkeydown="return check_send(event);" ><?php echo $lang["hereyourwords"];?></textarea>

<input type=button class=submit value='send' onclick="chat_send();$('chat_word').style.height=20;" onfocus="this.blur();"/>

</div>

<div class='mydiv' style='display:<?php if (!$disonline) echo "none";?>' id='div_online'>loading online...</div>

<script>

var debug = 0;

var lastmod = <?php echo time()-$earlier*60;?>;

var login = 1;

var loading = false;

var olduser = getcookie('chatusername');

if (olduser != "") $('chat_user').value = olduser;

var room = "<?php echo $room;?>";

var first = 1;

var dis = "<?php echo $least;?>";

var lastword;

var color='';

var touchs = <?php echo $touchs;?>;

var dotouch = true;

var maxdisplay = <?php echo $maxdisplay;?>;

var nowdisplay = 1;

var sending = 0;

var loaded_lines = [];

var editing = 0;

function encode(s)

{

return  (encodeuricomponent)? encodeuricomponent(s):s;

}

$('chat_user').onfocus = setonfocus;

$('input_size').onfocus = setonfocus;

function setonfocus()

{

window.editing = 1;

}

function setonblur()

{

window.editing = 0;

}

var keep_ajax;

function keeponline()

{

var name = $('chat_user').value;

if (!name) return;

keep_ajax = createajax();

keep_ajax.open('post','<?php echo basename(__file__);?>',1);

keep_ajax.setrequestheader("content-type", "application/x-www-form-urlencoded");



keep_ajax.onreadystatechange = function ()

{

  if (keep_ajax.readystate == 4 && keep_ajax.status == 200)

  {

   //alert(keep_ajax.responsetext);

  }

}

keep_ajax.send("action=keep&name="+encode(name));

}

setinterval("keeponline()",touchs*1000);

function quitroom()

{

if(confirm("你真的要离开聊天室吗?"))

{

  var ajax = createajax();

  ajax.open('post','<?php echo basename(__file__);?>',0);

  ajax.setrequestheader("content-type", "application/x-www-form-urlencoded");

  ajax.send("action=quit&name="+encode($('chat_user').value));

  //alert("sending close  action=quit&name="+encode($('chat_user').value));

  //alert("response:"+ajax.responsetext);

}

else return '';

}

document.body.onbeforeunload =  quitroom;

setinterval(" load_word()",(debug)?6000:1000);

var load_word_ajax;

//下载完成后的处理函数

function load_word_change()

{

if (load_word_ajax.readystate == 4)

{

  if (load_word_ajax.status != 200)

  {

   load_word_error();

   return;

  }

  window.loading = false;

  var body = $('div_contents');

  try {

   if (debug) alert(load_word_ajax.responsetext);

   eval("var arr = "+load_word_ajax.responsetext);

  } catch(e)

  {

   alert('error 101njson syntax error!nn'+load_word_ajax.responsetext);

   return;

  }

  if (!arr || !arr.lastmod || typeof(arr.lastmod) == "undefined" )

  {

   return;

  }

  var html = "";

  var line = arr.lines;

  var i = 0;

  var v1 = 0;

  var div_online = $('div_online');

  if (window.first)

  {

   body.innerhtml = "";

   window.first = false;

  }



  if (arr.onlines)

  {

   $('div_online').innerhtml = "";

   for(var i=0;i<arr.onlines.length;i++) addonline(arr.onlines[i]);

  }

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

  {

   var linekey = line[i].word.substring(line[i].word.length-20,line[i].word.length)+line[i].time;

   if (window.loaded_lines[linekey] === true)

   {

    if (debug) alert("jump:"+linekey);

    continue;

   }

   var div1 = document.createelement("div");

   window.nowdisplay ++;

   if (window.nowdisplay > window.maxdisplay) window.nowdisplay = 1;

   if ($("contentitem"+window.nowdisplay)) body.removechild($("contentitem"+window.nowdisplay));

   div1.classname = "content";

   div1.id = "contentitem"+window.nowdisplay;

   div1.innerhtml = line[i].word+" <span class='time'>("+line[i].time+")</span>";

   body.appendchild(div1);



   window.loaded_lines[linekey] = true;

   body.scrolltop = 655350;

   v1 = 1;

  }

  if (v1)

  {

   window.focus();

   document.body.focus();

   window.lastmod = arr.lastmod;

   if(debug) alert("lastmod = "+arr.lastmod + " nwindow.lastmod="+window.lastmod);

   if ($('chat_word').disabled == false && window.editing != 1)

   {

    $('chat_word').focus();

   }

  }

}

}

function load_word_error()

{

window.loading = false;

window.status = 'error 102:while loading words';

settimeout("window.status = '';",5000);

}

function load_word()

{

load_word_ajax = createajax();

if (window.loading)

{

  try

  {

   load_word_ajax.abort();

   window.loading = false;

  }catch(e) {}

}

if (!window.lastmod)

{

  alert("window.lastmod="+window.lastmod);

  return;

}



load_word_ajax.open('post','<?php echo basename(__file__);?>',true);

load_word_ajax.onreadystatechange = load_word_change;



var urlstring = '';

urlstring += "lastmod="+window.lastmod;

urlstring+= "&room="+room;

urlstring+= "&action=read";

urlstring+= "&name="+encode($('chat_user').value);



if (window.first)

{

  urlstring+= "&first=true";

  urlstring += "&dis="+dis;

}

//如果到了取得在线用户的时间

if (window.dotouch)

{

  urlstring+= "&touchme=true";

  window.dotouch = false;

  //垃圾内存回收

  try { collectgarbage(); } catch(e) {}

}

window.loading = true;

if (debug) alert("sending:"+urlstring);

load_word_ajax.setrequestheader("content-type", "application/x-www-form-urlencoded");



load_word_ajax.send(urlstring);

}

function touchme()

{

window.dotouch = true;

settimeout("touchme()",window.touchs*1000);

}

function showalert(a,n)

{

if (!n) n=0;

if (n>3) return;

if (!a)

{

  a = 0;

  b = 1;

}

else

{

  a = 1;

  b = 0;

}

document.title = mytitle[a];

settimeout("showalert("+b+","+(n+1)+");",500);

}