ロングポーリング

ロングポーリング(Long polling)はサーバと永続的な接続を持つための最も簡単な方法で、WebSocket や Server Side Events などの特定のプロトコルを使いません。

実装はとても簡単であり、多くのケースもこれで十分です。

定期的なポーリング

サーバから新しい情報を取得するための最も簡単な方法は、ポーリングです。

つまり、サーバへの定期的なリクエストです: “こんにちは、私はここにいます。私に関してなにか新しい情報はありますか？”。例えば、10秒毎に。

応答では、サーバは最初にクライアントがオンラインであること自身に知らせて、次にその時までに受け取ったメッセージのパケットを送信します。

これは機能しますが、デメリットもあります。:

メッセージは最大10秒(リクエスト間隔)の遅延が発生します
たとえメッセージがない場合でも、サーバは10秒ごとにリクエストを受け取ります。パフォーマンス観点から見えると、これはバックエンドの処理にかなりの負荷がかかります。

そのため、非常に小さいサービスに関して話す場合にはこのアプローチは現実的ですが、一般的には改善が必要です。

ロングポーリング

いわゆる “ロングポーリング” はサーバにポーリングするための、はるかに優れた方法です。

これも実装はとても簡単で、遅延なしでメッセージを配信します。

フローです:

リクエストがサーバに送信されます。
サーバはメッセージがあるまで接続を閉じません。
メッセージが現れたら、サーバはそのデータでリクエストに応答します。
ブラウザはすぐに新しいリクエストを作ります。

ブラウザがリクエストを送信し、サーバとの接続を保留にしている状況は、このメソッドの普通の状態です。メッセージが配信されたときだけ、接続が再確立されます。

もしもネットワークエラーなどで接続が失われた場合は、ブラウザはすぐに新しいリクエストを送信します。

長いリクエストを行う、クライアント側の subscribe 関数の概要です。:

          async function subscribe() {
  let response = await fetch("/subscribe");

  if (response.status == 502) {
    // 接続タイムアウトエラー
    // 接続が長時間保留されていて、リモートサーバやプロキシがそれを閉じたときに発生する場合があります
    // 再接続しましょう
    await subscribe();
  } else if (response.status != 200) {
    // エラーを表示
    showMessage(response.statusText);
    // 1秒後に再接続します
    await new Promise(resolve => setTimeout(resolve, 1000));
    await subscribe();
  } else {
    // メッセージを取得しました
    let message = await response.text();
    showMessage(message);
    await subscribe();
  }
}

subscribe();
        

ご覧の通り、subscribe 関数は fetch を生成し、応答を待ってから処理を行い、その後再び自身を呼び出します。

サーバのアーキテクチャは、多数の保留中の接続があっても問題なく動作できるようにする必要があります。

特定のサーバアーキテクチャは、接続毎にプロセスを実行します。多数の接続がある場合、プロセスも多数になり、各プロセスが大量のメモリを消費します。

これは、しばしばバックエンドが PHP, Ruby で書かれたバックエンドの場合ですが、技術的には言語ではなく実装の問題です。

Node.js で書かれたバックエンドには、通常このような問題は起こりません。

デモ: チャット

デモです:

結果

browser.js

server.js

index.html

// Sending messages, a simple POST
function PublishForm(form, url) {

  function sendMessage(message) {
    fetch(url, {
      method: 'POST',
      body: message
    });
  }

  form.onsubmit = function() {
    let message = form.message.value;
    if (message) {
      form.message.value = '';
      sendMessage(message);
    }
    return false;
  };
}

// Receiving messages with long polling
function SubscribePane(elem, url) {

  function showMessage(message) {
    let messageElem = document.createElement('div');
    messageElem.append(message);
    elem.append(messageElem);
  }

  async function subscribe() {
    let response = await fetch(url);

    if (response.status == 502) {
      // Connection timeout
      // happens when the connection was pending for too long
      // let's reconnect
      await subscribe();
    } else if (response.status != 200) {
      // Show Error
      showMessage(response.statusText);
      // Reconnect in one second
      await new Promise(resolve => setTimeout(resolve, 1000));
      await subscribe();
    } else {
      // Got message
      let message = await response.text();
      showMessage(message);
      await subscribe();
    }
  }

  subscribe();

}

let http = require('http');
let url = require('url');
let querystring = require('querystring');
let static = require('node-static');

let fileServer = new static.Server('.');

let subscribers = Object.create(null);

function onSubscribe(req, res) {
  let id = Math.random();

  res.setHeader('Content-Type', 'text/plain;charset=utf-8');
  res.setHeader("Cache-Control", "no-cache, must-revalidate");

  subscribers[id] = res;

  req.on('close', function() {
    delete subscribers[id];
  });

}

function publish(message) {

  for (let id in subscribers) {
    let res = subscribers[id];
    res.end(message);
  }

  subscribers = Object.create(null);
}

function accept(req, res) {
  let urlParsed = url.parse(req.url, true);

  // new client wants messages
  if (urlParsed.pathname == '/subscribe') {
    onSubscribe(req, res);
    return;
  }

  // sending a message
  if (urlParsed.pathname == '/publish' && req.method == 'POST') {
    // accept POST
    req.setEncoding('utf8');
    let message = '';
    req.on('data', function(chunk) {
      message += chunk;
    }).on('end', function() {
      publish(message); // publish it to everyone
      res.end("ok");
    });

    return;
  }

  // the rest is static
  fileServer.serve(req, res);

}

function close() {
  for (let id in subscribers) {
    let res = subscribers[id];
    res.end();
  }
}

// -----------------------------------

if (!module.parent) {
  http.createServer(accept).listen(8080);
  console.log('Server running on port 8080');
} else {
  exports.accept = accept;

  if (process.send) {
     process.on('message', (msg) => {
       if (msg === 'shutdown') {
         close();
       }
     });
  }

  process.on('SIGINT', close);
}

<!DOCTYPE html>
<script src="browser.js"></script>

All visitors of this page will see messages of each other.

<form name="publish">
  <input type="text" name="message" />
  <input type="submit" value="Send" />
</form>

<div id="subscribe">
</div>

<script>
  new PublishForm(document.forms.publish, 'publish');
  // random url parameter to avoid any caching issues
  new SubscribePane(document.getElementById('subscribe'), 'subscribe?random=' + Math.random());
</script>

Area of usage

ロングポーリングはメッセージがあまり来ないような状況で上手く機能します。

もしメッセージが非常に頻繁にくる場合、メッセージの送受信の図は上で描かれたような、のこぎりのようになります。

すべてのメッセージは個別のリクエストであり、それぞれがヘッダや認証のオーバヘッドなどを持ちます。

そのため、この場合は、Websocket や Server Sent Events のような別の方法が推奨されています。

ロングポーリング

定期的なポーリング

ロングポーリング

デモ: チャット

Area of usage

コメント

チャプター

レッスンナビゲーション