把内容评论改造成即时聊天

把下面内容塞进内容详情页的模板，即可实现即时聊天功能。效果如下图所示

代码如下：

<!---自己写CSS的话,下面这个template.css文件完全可以删除的,没有涉及到任何功能-->
<link rel="stylesheet" href="__STATIC__/layui/css/template.css" media="all">
<style type="text/css">
.layadmin-message-fluid{
  padding:0;
}
.layui-col-md12{
  background:#000;
  padding:10px;
  border-bottom:1px solid #eee;
}
.layadmin-message-fluid .layui-col-md12{
  padding-bottom:0px;
}
.message-content .media-body{
  padding-top:15px;
  border-top:1px solid #eee;
  margin-bottom:20px;
  margin-top:10px;
}
.message-content .isme{
  border-top:1px solid #fdc545;
}
.chat_box{
  border:1px solid #62b5c5;
}
/*上面的CSS样式及template.css文件不重要,完全可以删除的*/

/*聊天内容窗口定高,这里也是关键之处*/
.content_box_wap{
  height:200px;
  overflow-y:auto;
}
#show_list_content{
  /*下面两行是关键地方,要倒过来排序*/
  flex-direction: column-reverse;
  display: flex;
}
</style>
<div class="layui-fluid layadmin-message-fluid chat_box">
  <div class="layui-row">
    <!-- 下面三行是关键,主要是显示聊天内容的 class="content_box_wap" id="show_list_content" 是关键元素 -->
    <div class="content_box_wap">
      <div class="layui-col-md12 layadmin-homepage-list-imgtxt message-content" id="show_list_content"><!--这里就是聊天具体的内容部分--></div>
    </div>
    <div class="layui-col-md12" style="padding-bottom:10px;">
      <div class="layui-form" style="padding:0px">
         <!-- 下面两个元素可以随意放在任何地方,关键元素是 id="post_cnt" onclick="post_cmt_msg()" -->
         <input style="float:left;" type="text" placeholder="请输入内容" class="layui-input" id="post_cnt">
         <button style="float:left;" class="layui-btn" onclick="post_cmt_msg()">发送</button>
      </div>
    </div>
  </div>
</div>

<!---  上面所有代码其实可以浓缩成下面这个样子
<div class="content_box_wap" style="height:200px;overflow-y:auto;">
  <div style="flex-direction: column-reverse;display: flex;" id="show_list_content"></div>
</div>
<input type="text" id="post_cnt">
<button  onclick="post_cmt_msg()">发送</button>
--->


<script type="text/javascript">
//将数据转化成自定义模板的格式，做模板一般要修改这里!!!
function array2html(listdb){
  var str='';
  listdb.forEach((rs)=>{
    if(rs.from_username){  //即时消息的情况
      rs.icon=rs.from_icon;
      rs.username=rs.from_username;
    }
    var isme = rs.uid==myuid?'isme':'ishe';  //做模板,可以根据这个处理自己的头像是不是在右边显示
    //做模板,只需要修改下面的代码即可.注意``这两个符号不能漏掉
    str += `

    <div class="media-body ${isme}">
          <a href="/member.php/home/${rs.uid}.html" class="media-left" style="float: left;">
             <img src="${rs.icon}" onerror="this.src='/public/static/images/noface.png'" height="46px" width="46px">
          </a>
          <div class="pad-btm">
            <p class="fontColor"><a href="/member.php/home/${rs.uid}.html">${rs.username}</a></p>
            <p class="min-font">${rs.create_time}</p>
         </div>
          <p class="message-text">${rs.content}</p>
       </div>

    `;
  });
  return str;
}


var sending_msg = false;

function post_cmt_msg(){
  var contents = $('#post_cnt').val();
  if(contents==''){
    layer.alert("内容不能为空！");
    return false;
  }else if(sending_msg){
    layer.alert("请不要重复发送！");
    return false;
  }
  sending_msg = true;

  //消息入库处理,如果不想消息入库的话,就把下面的删除,直接使用 sending_msg=false;$('#post_cnt').val('');WS.send({type:'qun_sync_msg',data:{push_id:0,content:contents,}});
  $.post("{:purl('comment/api/add')}?sysid={:M('id')}&aid={$id}",{content:contents},function(res){
    sending_msg = false;
    if(res.code==0){ //发布成功
      //通知同步显示最新消息
      WS.send({
        type:'qun_sync_msg',  //固定标志
        data:{
          push_id:res.data.id,
          content:contents,
        }
      });
      $('#post_cnt').val('');
    }else{
      layer.msg('评论发表失败:'+res.msg);
    }
  });
}

//加载数据库的信息
function load_data_list(){
  if(msg_page<1){
    layer.alert("没有了!");
    return false;
  }
  layer.msg('内容加载中...',{time:1000});
  //rows=10即代表每页显示10条消息
  $.get("{:purl('comment/api/getlist')}?sysid={:M('id')}&aid={$id}&rows=10&page="+msg_page,function(res){
    if(res.code==0){
      $("#show_list_content .showmore-btn").remove();
      var oh = $("#show_list_content").height();
      $("#show_list_content").append(array2html(res.data)+'<div class="showmore-btn" onclick="load_data_list()" style="text-align:center;color:blue;">点击加载更多</div>');
      if(msg_page==1){
        $(".content_box_wap").animate({scrollTop:5000},1000);
      }else{
        var h = $("#show_list_content").height()-oh-$(".content_box_wap").height();
        $(".content_box_wap").animate({scrollTop:h},1000);
      }
      msg_page++;
    }else if(msg_page>1){
      msg_page = -1;
      layer.msg("没有了!");
    }
  });
}

var msg_page = 1;  //默认显示第一页的数据
var myuid = "{$userdb.uid}";  //当前用户的登录UID

$(function(){
  load_data_list();  //默认显示第一页的评论消息

  setTimeout(function(){
    //与websock服务器建立长连接
    WS.link({
      uid:-( {$id} + 1000000 ), //1000000仅仅是一个标志而已,避免跟圈子ID冲突,这样数值就会大于圈子
      userinfo:{username:'{$userdb.username}',icon:'{$userdb.icon}'},
      quninfo:{uid:0},
      my_uid:myuid,
      ws_url:"{:fun('Gatewayclient@client_url')}"
    });
    WS.onmsg(function(obj){},'layui');  //把系统的客服消息功能注销掉,避免冲突
  },500);  //延时执行是为了避免跟客服消息冲突.

});

//同步接收消息
WS.onmsg(function(obj){
  if(obj.type=="qun_sync_msg"){  //同步显示最新发表的信息
    $("#show_list_content").prepend(array2html(obj.data));
    $(".content_box_wap").animate({scrollTop:5000},500);  //新消息自动滚动到最底部
  }
},'default');



</script>