把下面內容塞進內容詳情頁的模板，即可實現即時聊天功能。效果如下圖所示  代碼如下： ~~~ <!---自己寫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> ~~~