Как оптимизировать JQuery Ajax чат?

Настройка @Alimin async: false заставляет его БЛОКИРОВАТЬ вход / выход. Это означает, что во время выполнения ajax весь браузер должен будет зависнуть до тех пор, пока он не вернется в качестве ответа, будь то успех или ошибка. Вы сказали, что не хотите делать все внутри функции успеха - это просто структурирование кода. $.ajax() возвращает обещание. Вы можете использовать async/ await и писать его как синхронный код - более изящный способ.

Если честно, его плохой дизайн вызывает ajax каждые несколько секунд для «реального времени». Что вы можете сделать, это использовать веб-сокеты. Сокет IO является примером. Это действительно просто и легко. Вы можете развернуть Node-сервер для запуска Socket IO и отдельно настроить свой сервер Laravel.

Это так просто:

Клиент Js - в Laravel

<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
  $(function () {
    var socket = io('localhost:3000'); // connect to socket io server
    $('form').submit(function(e){
      e.preventDefault(); // prevents page reloading
      socket.emit('chat message', $('#m').val()); //replace with your msg input
      $('#m').val(''); //replace with your msg input
      return false;
    });

    socket.on('chat message', function(msg){
      console.log(msg); //receive message from node js
     });

  });
</script>

Узел Js

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', function(socket){
  console.log('a user connected');
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

io.on('connection', function(socket){
  socket.on('chat message', function(msg){ //listen for 'chat message' event
    io.emit('chat message', msg); //send data to clients
    console.log('message: ' + msg);
  });
});

Обновлено 17/01/2019:

Я удалил async: false, поэтому браузер не держит. Поэтому, чтобы использовать возвращенные данные из ajax-запроса, используйте async/ await. Это намного опрятнее.

//function to updating html element when new message comes (DOM operation)
function refresh_messanger(){

$(".dialogdiv").remove();
    var y=get_update_message_in_messanger();

    for(var i=0; i<= y.length-1; i++){
        var message=y[i].message_content;
        var message_date=y[i].message_date;
        var src="";
        if(y[i].photo_profile=='{{session("session_photo_profile")}}'){
            src="{{url('uploads/image').'/'.session('session_login')['app_user_id'].'/'.session('session_photo_profile')}}";
        }else{
            src="{{url('uploads/image')}}/"+y[i].message_from+'/'+y[i].photo_profile;
        }
        var message_class="";
        if(i==0){
            message_class="text-bold"
        }else{
            message_class="text";
        }
        var messagehtml=['<div class="itemdiv dialogdiv">',
                    '<div class="user">',
                        '<img alt="" height="60" width="40" src="'+src+'">',                                
                    '</div>',
                    '<div class="body">',
                        '<div class="time">',
                            '<i class="ace-icon fa fa-clock-o"></i>',
                            '<span class="blue">'+message_date+'</span>',
                        '</div>',

                        '<div class="name">',
                            '<a href="#"></a>',
                        '</div>',
                        '<div class="'+message_class+'">'+message+'</div>',
                        '<div class="tools">',
                            '<a href="#" class="btn btn-minier btn-info">',
                                '<i class="icon-only ace-icon fa fa-trash"></i>',
                            '</a>',
                        '</div>',
                    '</div>',
                '</div>'].join('\n');
                //alert(messagehtml);
                $("#message_wall").append(messagehtml);     
    }

}

    //display number of messsage realtime
    async function get_all_notif_message(){
        var number_of_messages=0;
        var message_from   ="{{$message_from}}";
        var message_to     ="{{$message_to}}";
        var message_url    ="{{url('messanger/realtime/message_notification')}}"+"/"+message_from+"/"+message_to;

        let ajax_res;

        ajax_res = await $.ajax({
            url        :message_url,
            contentType:"application/json",
            type       :"get",    
        });

        let data = JSON.parse(ajax_res);
        return data.number_of_messages;
    }

    //function to handle DOM operatioin base on old number total  
    async function listen_crud(){ 
        let uptodate_message;


        try {
            uptodate_message= await get_all_notif_message();    
        } catch (error) {
            alert("Error");
            console.log(error);
            return;
        }                

        $("#uptodate_massage").val(uptodate_message);
        if($("#total_message").val() < uptodate_message){
            //alert("new message received")
            var audio = new Audio('{{url("assets/sound/inquisitiveness.mp3")}}');              
            audio.play();           
            $("#total_message").val(uptodate_message);              
            refresh_messanger();
            var objDiv = document.getElementById("message_container");                              
            objDiv.scrollTo(x-coord, y-coord);                      
        }      

        setTimeout(listen_crud, 5000);

    } 


    //first program running
    setTimeout(listen_crud, 5000);

Ресурсы:

https://socket.io/get-started/chat/

[ 119] https://javascript.info/async-await