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

把下面内容塞进内容详情页的模板，即可实现即时聊天功能。效果如下图所示
![](https://img.kancloud.cn/02/e7/02e76314d09667a3f35fff0005496889_1479x678.gif)

代码如下：

~~~
.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;}    														  			   			   			   发送		  		 	<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>
~~~

本文链接：https://x1.wanxiangsucai.com/read/147.html

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

相关文章推荐

齐博X1教程专栏最新文章

齐博X1教程专栏文章推荐

建站工具推荐

您可能感兴趣的文章