TP 5 AJAXチャット実現

TP 5 AJAXはチャットを実現するjqueryで書いたsetIntervalなので、2秒に1回リクエストして、資源を浪費しすぎて、使用をお勧めしません.記録のみをします.
フロントエンドhtmlコードは私は放さないで、これは自分で発挥しましょう:).ユーザid=001 isSend=0(0:001送信、1:管理者送信)status(0:未読、1:既読)

はチャットウィンドウを開き、バックグラウンドでユーザーの情報を読み取る操作はユーザーid 001 isSend=0のstatusを1にし、タイマーを2秒1で問い合わせる.

管理者が情報を入力後、送信先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操作は余計な説明をしないで、すべて簡単な添削検査です.
シロが1人.軽く噴き出す.個人記録のみを作成します.