任何页面加入即时聊天功能 · 齐博CMS之X1

把下面的代码塞入到任何页面,即可在相应的页面实现即时聊天功能。下面的聊天内容并没有做入库处理。如果要入库的话，可以参考内容详情页的评论即时聊天改造JS，同时要简单的二开一下PHP即可实现。下面代码中有个关键点 ` {$id?:($fid?:date('z'))}` 这个就是根据栏目或者是内容页区别不同的房间即聊天室. 代码如下 ~~~  <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">  <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">  <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>  <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; } function post_cmt_msg(){ var contents = $('#post_cnt').val(); if(contents==''){ layer.alert("内容不能为空！"); return false; } //通知同步显示最新消息 WS.send({ type:'qun_sync_msg', //固定标志 data:{ push_id:0, content:contents, } }); $('#post_cnt').val(''); } var msg_page = 1; //默认显示第一页的数据 var myuid = "{$userdb.uid}"; //当前用户的登录UID $(function(){ setTimeout(function(){ //与websock服务器建立长连接 WS.link({ uid:-( {$id?:($fid?:date('z'))} + 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> ~~~