workerman-chat 单
$user=empty($_GET['user'])?"":$_GET['user']; ?> html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>网页聊天title> <script type="text/javascript" src="js/jj.js">script> <script type="text/javascript" src="./ajaxfileupload.js">script> <script type="text/javascript" src="js/dandan.js">script> <script type="text/javascript"> //登陆的人 $admin_namea=prompt("请输入你的名字","游客"); $admin_name=$admin_namea; //$admin_namea=prompt("请输入你的名字","游客"); //$admin_name=$admin_namea; //$admin_name="mdc"+Math.ceil(Math.random(1,10)*100); //if($admin_name!=null){ // if(!$admin_name.replace(/^\s\s*/, '').replace(/\s\s*$/, '')){ // $admin_name="游客"; // } //}else{ // $admin_name="游客"; //} //成员数组 $arr_user=new Array( Array('mdc','user_img/001.jpg'), Array('mdc1','user_img/002.jpg'), Array('mdc2','user_img/003.jpg'), Array('mdc3','user_img/004.jpg'), ) script> <link href="images/dandan.css" rel="stylesheet" media="screen" type="text/css" /> <style type="text/css"> style> head> <body> <div id="mid_top"> 在线:<span id="countss">span> div> <input type="text" id="a"> <div id="top">头部div> <div id="body"> <div id="left"> <div class="box"> <h3 class="h3 h3_1">最近聊天(<span class="n_geshu_1">span>)h3> <ul class="ul ul_1"> <li>老猪li> ul> <h3 class="h3 h3_2">我的好友(<span class="n_geshu_2">span>)h3> <ul class="ul ul_2"> <li>蛋蛋li> ul> <h3 class="h3 h3_2">我的群(<span class="n_geshu_3">0span>)<div style="display: inline;border: 1px solid black;width: 20px;height: 10px" >+div>h3> div> <div class="box_f">div> div> <div id="right"> <div class="right_box"> <div id="right_top"> div> <div id="right_mid">div> <div id="right_foot">蛋蛋div> <div class="blank">div> div> <div class="right_box_foot">div> div> <div id="mid"> <div id="mid_con"> <div class="my_show"> <div class="con_box"><div class="dandan_liaotian">div>div> div> div> <div id="mid_mid" > <div style="background-color: #00a91c;display: inline;border: 1px solid royalblue;height: 28px" οnmοuseοver="hua()">表情div> <input type="file" id="file" name="file" style=""><input type="button" id="but" value="上传"><div style="display: inline" class="imgsrc">div> div> <div id="mid_foot"> <div id="mid_say"> <div contenteditable="true" style="width: 1000px;height: 80px" id="textarea">div> div> <button id="mid_sand">发送button> <button id="uclose" style="float: right;width: 93px;height: 40px;display: inline;margin-right: -93px;background-color: red">×关闭button> <button id="mid_user">好友数button> <button id="d_sand1">单聊1button> <button id="d_sand2">单聊2button> <div class="blank" >div> div> <div class="mid_box">div> div> div> body> html> <script> //循环表情 function hua() { var img=$(".imgsrc"); var str=''; for(var i=1; i<31;i++){ str+=""; // img.append("
"); } img.html(str); imgb() } //抓取表情 function imgb() { // alert(1) $(".imgs").click(function () { var src=$(this).attr("src") $("#textarea").append("
") }); } //上传图片 $("#but").click(function () { $.ajaxFileUpload({ type:"post", url:"upload.php",//如果写绝对路径就不用改后天 // url:"http://127.0.0.1/php11/workerman-chat/Applications/Chat/client/upload.php", fileElementId:"file", dataType:"json",//必须是datatype才可以否则dateTypeconsole.log结果为#document success:function (msg) { // console.log(1) console.log(msg) // alert(msg.img) if(msg.status==0){ var str=msg.img; $("#textarea").html("
"); // $("#textarea").html("
"); }else { console.log(msg.img); } } }) }) //实例化ws ws=new WebSocket("ws://"+ document.domain+":7272"); // ws=new WebSocket("ws://127.0.0.1:7272"); //打开一个链接 ws.onopen=function () { // 登录 client_name=$admin_name; // client_name='mdc'+Math.ceil(Math.random(1,10)*10); var login_data = '{"type":"login","client_name":"'+ client_name+'","room_id":"($_GET['room_id']) ? $_GET['room_id'] : 1?>"}'; ws.send(login_data); // $(".dandan_liaotian").append("连接已建立。。。
"); // ws.send($admin_name); } //接受服务器发送的消息 ws.onmessage=function(e){ console.log(e) var msg = JSON.parse(e.data); console.log(msg) // console.log(msg.content);return switch (msg.type){ // case "ping": // ws.send("{'type':'pong'}"); // break; case "login": //把用户的id绑定到用户上， zid=msg.client_id; $("#a").val(zid); var id=$(".ul_2 li:eq(0)").attr("id",zid); // var iid=$(".ul_2 li:eq(0)").attr("id"); // alert(iid) $(".dandan_liaotian").append(msg.client_name+":上线了["+ msg.time +"]
"); // case "login":$("#countss").html(msg.client_name+"
"); break; case "conn":$("#countss").html(msg.num+"人
"); break; case "say": // alert(msg.to_client_id) // title_newuser(uid,msg.from_client_name,'') $("#user_con"+uid).append('\"#0000FF\">'+msg.from_client_name+"'); // $(".dandan_liaotian").append(msg.from_client_name+":"+unescape(msg.content)+"["+msg.time+"]\"#333333\">"+unescape(msg.content)+'
"); break; case "logout":$(".dandan_liaotian").append(msg.from_client_name+":离开了房间"+"【"+msg.time+"]
"); break; } // $(".dandan_liaotian").append(e.data+"
"); } //发送消息 $("#mid_sand").click(function () { // var children = $('#mid_top').children(); // alert(children) // console.log(children[children.length-1].id); // alert(uid); var cont=$("#textarea").html(); var contt=escape(cont); var to_client_id = cid; // var to_client_id = "all"; var to_client_name = user; // var to_client_name = client_name; // $("#user_con"+uid).append(''+$admin_name+"'); ws.send('{"type":"say","to_client_id":"'+to_client_id+'","to_client_name":"'+to_client_name+'","content":"'+ contt +'"}'); // var con=$admin_name+":"+cont; // ws.send(cont); $("#textarea").html(""); }) //单聊 1 $("#d_sand1").click(function () { var cont=$("#textarea").html(); var contt=escape(cont); // console.log(contt); var to_client_id = '7f00000108fc00000002'; var to_client_name = client_name; ws.send('{"type":"say","to_client_id":"'+to_client_id+'","to_client_name":"mdc1","content":"'+ contt +'"}'); // var con=$admin_name+":"+cont; ws.send(cont); $("#textarea").html(""); }) // 2222 $("#d_sand2").click(function () { alert(2) var cont=$("#textarea").html(); var contt=escape(cont); // console.log(contt); alert(1) var to_client_id = "7f00000108fc00000001"; var to_client_name = client_name; ws.send('{"type":"say","to_client_id":"'+to_client_id+'","to_client_name":"mdc","content":"'+ contt +'"}'); // var con=$admin_name+":"+cont; ws.send(cont); $("#textarea").html(""); }) //关闭连接 $("#uclose").click(function () { ws.close() console.log("连接关闭，定时重连"); $("#countss").html("0人"+cont+'
") }) $("#mid_user").click(function () { var user=$admin_name; $.ajax({ type:'get', url:"http://127.0.0.1/php11/workermant/Applications/Chat/client/yongh.php", data:{user:user}, dataType:"json", success:function (msg) { // console.log(msg) str = $('.ul_2'); $.each(msg,function (k,v) { str.append("" +v.username+""); }) var jslength=0; for(var msg1 in msg){ jslength++; } $(".n_geshu_2").html(jslength); } }) }) function aa(obj) { // console.log(obj.id) cid= obj.attributes['cid'].nodeValue; //自定义属性采用此方式获得 uid= obj.attributes['uid'].nodeValue; //自定义属性采用此方式获得 user = obj.id; //基本属性可以采用此方式获得 // alert(uid) // alert(user) // $("#mid_top").append(''); title_newuser(uid,user,"") } //创建标题栏和主控制（原是有一个主控制，忘了，就合在一起了，哈哈） function title_newuser(id,user,img){ if($("#"+id).length<1){ $("#mid_top").append('
'+user+' X '" class="list">'); //创建完成后给事件 //alert('#'+id) $('#'+id).click(function(){title_newuser(id,user,img); });//给按钮加事件 //关闭 $("#zino"+id).click(function(){delete_user(id,user,img); return false });//关闭打开的 }else{ $("#zino"+id).addClass("td_hide_click");//给自己加样式 $("#zi"+id).addClass("td_user_click");//给自己加样式 } my_siblings("#"+id);//去掉兄弟样式 //创建内容框 my_user_con(user,id); //创建头像 my_user_head(user,id,img); ing_user=id;//当前用户 //alert(ing_user); $("#right_mid").html("");//清空右边的内容 } //去掉兄弟的样式 function my_siblings($this){ $($this).siblings().children().children().children().children().removeClass("td_hide_click td_user_click"); } //创建右边的头像 function my_user_head(user,id,img){ if($(".head"+id).length<1){ if(!img){//头像为空的时候 img="user_img/0.jpg"; } $("#right_top").append('
'" class="td_user td_user_click">'+user+' '" class="td_hide td_hide_click">X '">'+user+'
'" alt="'+user+'" />
'); $(".head"+id).hide();//默认是隐藏，让它有一点效果 } sibli_hide(".head"+id); } //隐藏兄弟头像 function sibli_hide($this){ $($this).show(500,function(){$(".my_show").scrollTop($(".con_box").height()-$(".my_show").height());/*让滚动滚到最底端*/}).siblings().hide(500);//隐藏其他兄弟 } //创建内容框 function my_user_con(user,id){ if($("#user_con"+id).length<1){ $(".con_box").append(''" οnchange="cc()">请在下面文本框里输入你想要聊天的内容，与用户【'+user+'】聊天'); $("#user_con"+id).hide();//默认隐藏，增加效果 } sibli_hide("#user_con"+id);//隐藏兄弟 } //关闭打开的窗口 function delete_user(id,user,img){ if(ing_user==id){ if(confirm('你确定要关闭 '+user+' 聊天窗口吗？\n 注意哦，关闭后你跟 '+user+' 的聊天记录就不见了哦')){ //alert(id); //alert($("#user_con"+id).text());//内容 //alert($(".head"+id).html());//头像 $("#"+id).remove();//栏目栏目 $("#user_con"+id).remove();//删除内容 $(".head"+id).remove();//删除头像 //alert($(".list").length);//还有几个栏目 if($(".list").length>0){ var eq=$(".list").length-1; //alert($(".list:eq("+eq+")").attr("id")); var old_id=$(".list:eq("+eq+")").attr("id"); sibli_hide(".head"+old_id);//显示最后一个的头像 sibli_hide("#user_con"+old_id);//显示最后一个的内容 $("#zino"+old_id).addClass("td_hide_click");//给最后一个加样式 $("#zi"+old_id).addClass("td_user_click");//给最后一个加样式 ing_user=old_id;//给聊天框定位 //alert(ing_user); }else{ //alert("已经全部删除"); $(".dandan_liaotian").show(500) }; } }else{ title_newuser(id,user,img); } } script>