ajax php 聊天室实例代码(4) <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); }
查看更多关于ajax php 聊天室实例代码(4) - 综合实例的详细内容...