TP5 AJAX 实现聊天

TP5 AJAX 实现聊天
因为是在jquery写的setInterval,2秒发一次请求，太浪费资源，不建议使用。仅做记录。

前端html代码我就不放了，这个自己发挥吧：）。
思路如下：
前提：用户 id=001 isSend=0（0：表示是001发送的，1：表示管理员发送的） status（0：未读，1：已读）

1. 点开聊天窗口，后台读取用户的信息 操作将用户id001 isSend=0的 status变为1，并开启计时器2秒一查询。
2. 管理员输入信息后点击发送 目标id=001 isSend=1 status=0存入数据库

js代码如下：

    let interval;
$(document).on('click','.chatDetail',function(){
        let accid=$(this).attr('data-id');
        let accname=$(this).attr('data-name');
        $('#accountName').text(accname);
        $('#accid').val(accid);
        $('.overFlowMsg').hide();
        //通过ajax获取到数据库中的聊天记录
        $.ajax({
            url:chat_url.getChatDetail,
            data:{id:accid},
            type:"post",
            success:function(data){
                    //此处我选择的是返回一个模板
                    $('#chatBody').html(data);
                    $('#chatModal').modal('show');

            }
        });
    });
    $('#chatModal').on('show.bs.modal',function(){

        let accid =$('#accid').val();
        //将与该用户有关的数据设置成已读
        setStatus(accid);
        //获取新消息
        getNewMsg(accid);
    });

        //间隔获取信息
    function getNewMsg(accid){
        //设置setIntval，2秒一查询
        interval = setInterval(function () {
            $.ajax({
                url:chat_url.getNewMsg,
                data:{accid:accid},
                type:"post",
                dataType:"json",
                success:function (data) {
                    if(data.status==1){
                        let msg=data.info;
                        let str = '';
                        //将新来的消息拼接在最后一个div的后面
                        for(let i=0;i'
'+msg[i].createTime+'
';
                            str += '
';
                            str += msg[i].message;
                            str += '
';
}
$('.overFlowMsg').find('div:last').after(str);
}
}
});
},2000);
}
//设为已读
function setStatus(accid){
$.ajax({
url:chat_url.setStatus,
data:{accid:accid},
type:"post",
dataType:"json",
success:function (data) {
if(data.status==1){
}
}
});
}
//聊天窗关闭时 停止clearInterval
$('#chatModal').on('hide.bs.modal',function(){
clearInterval(interval);
});
$(document).on('click','#sendMsg2Account',function(){
let content = $('#sendMsgToAccount').val();
if(content==''||content==null){
layer_danger('请输入后在发送');
return false;
}
let accid= $('#accid').val();
// console.log(content);
$('#sendMsgToAccount').val('');
$.ajax({
url:chat_url.sendMsg2Account,
data:{
accid:accid,
message:content,
},
type:"post",
dataType:"json",
success:function(data){
if(data.status==1){
let str ='
'+data.info.createTime+'
';
str += '
';
str += data.info.message;
str += '
';
if($('.overFlowMsg').length>0){
$('.overFlowMsg').find('div:last').after(str);
}else{
$('.overFlowMsg').html(str);
}
}else{
layer_danger(data.info);
}
}
});
});
//回复回车事件
$(document).on('keypress','#sendMsgToAccount',function(){
let content = $('#sendMsgToAccount').val();
if(event.keyCode==13){
if(content!=null||content!=''){
$('#sendMsg2Account').trigger('click');
event.preventDefault();
}
}
});

PHP操作不做赘述，都是简单的增删改查。

小白一个。轻喷。仅做个人记录。