workerman-chat 单
来源：互联网 发布：sap软件实施 编辑：程序博客网 时间：2024/06/15 18:40
<?php$user=empty($_GET['user'])?"":$_GET['user'];?><!DOCTYPE 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="js/jquery-1.4.2.min.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"><!-- <div class="list"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td class="td_user td_user_click">老猪</td> <td class="td_hide td_hide_click">X</td> </tr> </table> </div>--> 在线:<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">0</span>)<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"> <!--<p><img src="images/head.jpg" alt="头象" /></p> 老猪--></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" onmouseover="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> <!--<textarea name="" cols="" rows="" id="texterea"></textarea>--> </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">单聊1</button> <button id="d_sand2">单聊2</button> <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 class='imgs' src='http://127.0.0.1/php11/week1/brow/food"+i+".gif'>";// img.append("<img class='imgs' src='http://127.0.0.1/php11/week1/brow/food"+i+".gif'>"); } img.html(str); imgb() } //抓取表情 function imgb() {// alert(1) $(".imgs").click(function () { var src=$(this).attr("src") $("#textarea").append("<img src='"+src+"'>") }); } //上传图片 $("#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("<img src='"+str+"' style='width: 80px'>");// $("#textarea").html("<img src='"+ msg.img+"' style='width: 80px'>"); }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":"<?php echo isset($_GET['room_id']) ? $_GET['room_id'] : 1?>"}'; ws.send(login_data);// $(".dandan_liaotian").append("连接已建立。。。<br>");// 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 +"]<br>");// case "login":$("#countss").html(msg.client_name+"<br>"); break; case "conn":$("#countss").html(msg.num+"人<br>"); break; case "say":// alert(msg.to_client_id)// title_newuser(uid,msg.from_client_name,'') $("#user_con"+uid).append('<div class="my_say_con"><font color=\"#0000FF\">'+msg.from_client_name+"</font><p><font color=\"#333333\">"+unescape(msg.content)+'</font></p></div>');// $(".dandan_liaotian").append(msg.from_client_name+":"+unescape(msg.content)+"["+msg.time+"]<br>"); break; case "logout":$(".dandan_liaotian").append(msg.from_client_name+":离开了房间"+"【"+msg.time+"]<br>"); break; }// $(".dandan_liaotian").append(e.data+"<br>"); } //发送消息 $("#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('<div class="my_say_con"><font color=\"#0000FF\">'+$admin_name+"</font><p><font color=\"#333333\">"+cont+'</font></p></div>'); 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人<br>") }) $("#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("<li id='"+v.username+"' uid='"+v.id+"' cid='"+v.client_id+"' onclick='aa(this)'>"+v.username+"</li>"); }) 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('<div id="'+uid+'" class="list"><table border="0" cellspacing="0" cellpadding="0"><tr><td id="zi'+uid+'" class="td_user td_user_click">'+user+'</td><td id="zino'+uid+'" class="td_hide td_hide_click">X</td></tr></table></div>'); title_newuser(uid,user,"") } //创建标题栏和主控制（原是有一个主控制，忘了，就合在一起了，哈哈） function title_newuser(id,user,img){ if($("#"+id).length<1){ $("#mid_top").append('<div id="'+id+'" class="list"><table border="0" cellspacing="0" cellpadding="0"><tr><td id="zi'+id+'" class="td_user td_user_click">'+user+'</td><td id="zino'+id+'" class="td_hide td_hide_click">X</td></tr></table></div>'); //创建完成后给事件 //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('<div class="head'+id+'"><p><img src="'+img+'" alt="'+user+'" /></p>'+user+'<div>'); $(".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('<div id="user_con'+id+'" onchange="cc()"><font color="#CCCCCC">请在下面文本框里输入你想要聊天的内容，与用户【'+user+'】聊天</font></div>'); $("#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>
阅读全文
0 0
- workerman-chat 单
- workerman-chat linux安装
- workerman-chat的安装方法
- Workerman
- Workerman
- workerman
- Workerman
- CHAT
- CHAT
- chat
- chat
- chat
- chat
- chat
- 单页WEB应用（三），Chat聊天模块
- workerman 定时器
- workerman推送
- workerman开发
- 单链表的基本操作
- normal_item
- 1.概述
- angularJs 公告墙完整
- onlytext_item
- workerman-chat 单
- 部分架包的使用
- 嘿，听说你不喜欢数学？
- HTML公告栏发布及敏感字过滤
- android连按两次返回键退出程序
- 搜狗研究员：详解基于深度学习的语音分离
- 侧滑_tablelayout
- 配置时间同步时，遇到同步无法成功的解决方法
- Hadoop 如何退出安全模式
