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.length;i++){
                            str ='<div class="dateMsg">'+msg[i].createTime+'</div>';
                            str += '<div class="accountMsg mb10">';
                            str += msg[i].message;
                            str += '</div>';
                        }
                        $('.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 ='<div class="dateMsg">'+data.info.createTime+'</div>';
                    str += '<div class="adminMsg mb10">';
                    str += data.info.message;
                    str += '</div>';
                    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操作不做赘述，都是简单的增删改查。

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