TP5 AJAX 實現聊天

TP5 AJAX 實現聊天
因爲是在jquery寫的setInterval,2秒發一次請求，太浪費資源，不建議使用。僅做記錄。

前端html代碼我就不放了，這個自己發揮吧：）。

1.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操作不做贅述，都是簡單的增刪改查。

小白一個。輕噴。僅做個人記錄。