workerman-chat 单

最新推荐文章于 2024-11-08 12:11:14 发布
mengdc
最新推荐文章于 2024-11-08 12:11:14 发布
阅读量992
点赞数
CC 4.0 BY-SA版权
本文链接：https://blog.youkuaiyun.com/mengdc/article/details/78245938
该聊天网页应用使用PHP和JavaScript实现，支持用户登录、表情选择、文件上传及WebSocket通讯等功能。通过动态加载用户列表并提供单聊与群聊选项，增强用户体验。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<?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>&nbsp;&nbsp;&nbsp;&nbsp;
      <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>