@ Настройка Alimin async: false заставляет BLOCK ввод / вывод.Это означает, что во время выполнения ajax весь браузер должен будет зависнуть до тех пор, пока он не вернется в качестве ответа, будь то успех или ошибка.Вы сказали, что не хотите делать все внутри функции успеха - это просто структурирование кода.A $.ajax() возвращает обещание.Вы можете использовать async/ await и писать его как синхронный код - более аккуратный способ.
Если честно, его плохой дизайн вызывает ajax каждые несколько секунд для «реального времени».Что вы можете сделать, это использовать веб-сокеты.Сокет IO является примером.Это действительно просто и легко.Вы можете развернуть Node-сервер для запуска Socket IO и отдельно настроить свой сервер Laravel.
Это так просто, как это:
Client 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>
Node 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.2009:
Я удалил 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/
https://javascript.info/async-await