0

Необходимо сделать костыль для сайта. Сайт задумывался с использованием WebSocket но на продакшене он почему-то запрещен (wss запрещен). Встала задача переделать все без использования wss. Необходимо отправлять на браузер сообщения по команде сервера. Еще раньше использовался XMLHttpRequest, но он не подходит, т.к. у браузеров есть ограничения по количеству XMLHttpRequest соединений (5-8).

Серверная часть проекта на JSF + primefases.

НЕобходимо, что бы команды от сервера поступали на веб достаточно быстро + может быть много пользователей, поэтому регулярные запросы на сервер (раз в секунду) не сильно подходят.

Хочу создать асинхрнные запросы js. Обычные запросы на сервер отрабатывают, и можно не отправлять ответ обратно на браузер до тех пор пока сервер не захочет отправить команду. Когда сервер отправит ответ, js его получит, выполнит что надо и сразу отправит еще один такой же запрос. Цикл повторится. НО! если js ожидает команду, то весь остальной js "висит" и ждет ответ. Вроде как можно сделать асинхронные запросы, такие что после отправки запроса на сервер, остальной JS продолжит работу, но у меня почему то не получается.

Я использую Promise. Сделал тестовую программку. По замыслу: вызывается обновление таймеров раз в секунду. Один таймер с ожиданием в 4 секунды. Я хотел что б один таймер обновлялся раз в сек. а второй раз в 4 (ну или так же раз в секунду но с задержнкой, с неком смещением фазы).

<html>
<head>
<script type="text/javascript">
var el;
var el2;
var i=0;
var i2=0;
onload = function(){
setInterval(function(){
    update();
    update2();
    },1000);
}

var update = function(){
newPromise().then(
function(){
            el = document.getElementById("test");
            i=Number(i)+Number(1);
            el.innerText = i;}
            );
};

function newPromise(){ 
return new Promise(
    function (resolve, reject) {
        if (true) {
            sleep(4000);
            resolve(true); 
        } else {
            var reason = new Error('error');
            reject(reason); 
        }
    }
);
}

function update2(){
    el2 = document.getElementById("test2");
    i2=Number(i2)+Number(1);
    el2.innerText = i2;
}

function sleep(milliseconds) {
  const date = Date.now();
  let currentDate = null;
  do {
    currentDate = Date.now();
  } while (currentDate - date < milliseconds);
}
</script>
</head>
<body>
<h1 id="test">1</h1>
<h1 id="test2">1</h1>
</body>
</html> 

Но не получается. Код ждет эти 4 сек. и не идет дальше как я ожидал. Так ли вообще работает Promise и если не так, что можно использоать?

4
  • 1
    у вас sleep забивает весь поток, тут либо async/await либо setTimeout(resolve, 4000, true); 29 сен 2020 в 9:32
  • 1
    Что такое асинхронные запросы, если ajax(xmlhttprequest) не подходит?
    – vp_arth
    29 сен 2020 в 9:33
  • Да, возможно я вообще не на то смотрю. Promise это что то вообще другое. async/await посмотрю сейчас.
    – Dmitrii
    29 сен 2020 в 9:35
  • под запросами на сервер я понимаю обычные GET POST запросы из JS, но только хочу что бы ответ они не ждали.
    – Dmitrii
    29 сен 2020 в 9:36

1 ответ 1

1

Как-то так:

let g_i = 1;
const field = document.querySelector('h1');
function updateLoop() {
  getDelayedServerData(g_i)
    .then(res => {
    field.innerText = res.args.data;
    g_i++;
    setTimeout(updateLoop)
  });
}
updateLoop();


function getDelayedServerData(i) {
  return fetch('https://httpbin.org/delay/2?data='+i).then(res => res.json());
}

{ // Другой js в это время прекрасно работает 
  const sec = document.getElementById('second');
  let i = 0;
  setInterval(() => {
    second.innerText = ++i;
  }, 1000);
}
<h1>0</h1>
<span id="second"></span>

setInterval неизбежно породит проблемы при проскальзывании. Отправлять следующий запрос нужно, когда получен ответ на предыдущий, а не по таймеру.

5
  • а return fetch('httpbin.org/delay/2?data='+i).then(res => res.json()); Это что?
    – Dmitrii
    29 сен 2020 в 9:49
  • fetch - это аякс запрос, возвращающий Promise, Нативная функция браузера.
    – vp_arth
    29 сен 2020 в 9:51
  • httpbin.org - просто публичный сервис, для подобного роста тестов)
    – vp_arth
    29 сен 2020 в 9:55
  • Прикольный сайт. А можно сделать как то так, что бы при длительном ответе от сервера fetch('httpbin.org/delay/200?data='+i) код не ждал выполнения запроса.
    – Dmitrii
    29 сен 2020 в 10:12
  • 1
    Так он и не ждёт, кладёт обработчик в eventLoop, как придёт ответ обработчик выполнится.
    – vp_arth
    29 сен 2020 в 10:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.