• Как создать Long-Polling Comet на JS?

    Rou1997
    @Rou1997
    PHP:

    <?php
    
    while (true) {
      if (поступили новые данные) {
        echo возвращаем ответ;
        break;
      }
      usleep(100000);
    }
    
    ?>


    JavaScript:
    Обычный AJAX-запрос, а как закончится тайм-аут, отправляйте запрос по-новой.
    Ответ написан
    4 комментария
  • Как работает WebSocket(Comet)?

    abyrkov
    @abyrkov
    JavaScripter
    Вы точно смотрели туда? Модель Comet однонаправленая: от сервера к клиенту, а это, очевидно, не то, что вам нужно. Но...
    Модель Comet реализуется в клиентской части стандартом Server-Sent Events. Суть ее довольно проста: сервер отправляет строки во всремя создания события. А браузер уже заботится, что бв соединение не прерывалось. Реализация на стороне клиента:
    var ticker = EventSource('our.php');
    ticker.onmessage = function(e) {
      console.log(e.type);
      console.log(e.data);
    }

    Со строны сервера должны приходить строки такого вида:
    event: hello
    data: Hello, World!

    Обратите внимание на последнюю строку. Она, собственно говоря, создает событие.
    Матчасть: Comet, EventSource

    Пример:
    var ticker = EventSource('changes.php');
    ticker.onmessage = function(e) {
      // Реагируем только на события изменений
      // Нам приходит id + ' ' + html, для примера. Мы очищаем данные split'ом, но настоятельно
      // рекомендую придумать свой формат
      if(e.type == "messagechange") data(e.data.split(' ')[0], e.data.split(' ').slice(1).join(''), e.data);
    }
    var elements = document.getElementsByClassName('message');
    function data(id, data) {
      // Нам приходит id элемента, по которому мы определяем, к какому элементу изменения
      // и дата. В данном примере, id определяет номер элемента, но вы можете изменить эту
      // логику на свою
      elements[+elNum].innerHTML = data;
    }

    Пример данных от бэкенда
    event: messagechange
    data: 0 It works!


    WebSocket - это как раз двунаправленая связь. Работают они по особому протоколу. Не буду вникать в технические детали, однако соединение постоянное(чего не скажешь про SSE). Реализацию на клиенте берет коструктор WebSocket. Пример:
    var socket = new WebSocket('ws://ws.example.com/res');
    socket.onopen = fucntion(e) {
      // Socket opened
    }
    socket.onclose = function(e) {
      // Socket closed
    }
    socket.onerror = function(e) {
      // Error!
    }
    socket.onmessage = function(e) {
      console.log(e.data);
    }
    socket.send('Hello, server!');
    socket.close();

    Матчасть: MDN
    Ответ написан
    9 комментариев