ホームページ > 記事 > ウェブフロントエンド > HTML5 データプッシュ SSE 原理とアプリケーション開発の詳細な図解説明

HTML5 データプッシュ SSE 原理とアプリケーション開発の詳細な図解説明

黄舟オリジナル: 2017-03-08 15:23:152646ブラウズ

JavaScriptは動作を表現し、CSSは見た目を表現します。通常、HTMLはデータを更新する必要がある場合、構造を更新する必要はありません。データに対する需要により、データプルおよびデータプッシュテクノロジーの出現が促進されました。

SSE は、サーバーが新しいデータをクライアントにプッシュ (データプッシュと呼ばれます) できるようにする HTML5 テクノロジーです。データプッシュには、更新なしとデータプルという 2 つの選択肢があります。

更新なしの解決策:

HTML をロードすると、HTML ページが表示され、ブラウザーは画像、CSS ファイル、JavaScript ファイルなどを要求します。これらはすべて、ブラウザーがキャッシュできる静的ファイルです。ページで、PHP、Ruby、Python、およびユーザーのために HTML を動的に生成するその他の言語などのバックエンド言語が使用されている場合。

データプルスキーム:

ブラウザは、JavaScript やメタタグを通じて、ユーザーの行動に基づいて、または一定期間後、または他のトリガースキームに基づいて、サーバーからデータをリクエストするか完全に更新します。ページ全体をリロードするよう命令する機能。使い慣れた Ajax テクノロジーは、最新のデータを要求するためにのみ使用され、データを受信すると、JavaScript 関数はそれを使用して DOM をローカルに更新します。データ取得の本質: 新しいデータのみを取得し、ページの影響を受ける部分のみを更新します。

上記のいずれもデータプッシュではありません。データプッシュは静的ファイルではなく、サーバーが新しいデータを送信するクライアントを選択するときにブラウザーがデータを更新するリクエストを開始することも伴いません。

データソースに新しいデータがある場合、サーバーは、クライアントのリクエストを待たずに、そのデータを 1 つ以上のクライアントにすぐに送信できます。これらの新しいデータは、ニュース速報、最新の株式、またはオンラインの友人とのチャットである可能性があります。情報、新しい天気予報、戦略ゲームの次のステップなど。

SSE は、頻繁な更新、低遅延、サーバーからクライアントへのデータに適しています。 WebSocket との違い:

1) 利便性、新しいコンポーネントを追加する必要がなく、使い慣れたバックエンド言語やフレームワークで引き続き使用でき、新しい IP やフレームワークの取得について心配する必要はありません。新しい仮想マシンの新しいポート番号。

2) サーバー側のシンプルさ。 SSE は既存の HTTP/HTTPS プロトコルで動作するため、既存のプロキシサーバーや認証テクノロジで直接実行できます。

SSE と比較した WebSocket の最大の利点は、WebSocket が双方向通信であることです。つまり、サーバーからのデータの送信は、サーバーからのデータの受信と同じくらい簡単ですが、SSE は通常、WebSocket を介してクライアントからサーバーにデータを送信します。独立した Ajax リクエストであるため、WebSocket ではなく Ajax を使用するとオーバーヘッドが追加されます。したがって、1 秒に 1 回以上の速度でデータをサーバーに送信する必要がある場合は、WebSocket を使用する必要があります。

具体的なコードは次のとおりです:

html コード

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>basic SSE test</title>
    </head>
    <body>
        <pre id = "x">initializting...

潜在的な JavaScript インジェクション攻撃を防ぐために、サーバー側のデータを使用する前に確認することが最善であることに注意してください。

phpコード

<?php
    header(&#39;Content-Type: text/event-stream&#39;);
    header(&#39;Cache-Control: no-cache&#39;);
    $time = date(&#39;r&#39;);
    echo "data: The server time is: {$time}\n\n";
    flush();
?>

「Content-Type: text/event-stream」はSSE用に特別に設計されたMIMEタイプであり、

エフェクトのスクリーンショット

データプッシュが間違っている場合を選択すると

、まず静的な状況を考慮し、ユーザーがページを開くたびに、サーバーの電話情報がユーザーに返される可能性があります。静的な HTML ファイルや画像をディスクからロードするなど、非常に単純なものもあれば、多くのデータベースに接続するバックグラウンド言語を実行するなど複雑なものもあります。ここでの重要な点は、必要な情報が返されるとソケットが閉じられ、各 HTTP リクエストがこれらの比較的存続期間の短いソケット接続の 1 つを開き、サーバー上で制限されているリソースは、目的のタスクを完了するたびに回復されるということです。リサイクル用に。

それでは、データプッシュを比較してみましょう。リクエストは決して完了せず、常に大量の情報を送信するため、ソケットは開いたままになります。明らかに、リソースは限られているため、同時に SSE 接続の数には制限があります。

最新のアプリケーションに電話サービスサポートを提供している状況を想像してください。10 人のコールセンターの従業員が 1000 人のユーザーに対応しており、オペレーターの 1 人が電話に出て電話を切りました。新しい顧客からの通話は、いずれかのオペレーターが電話を切るまでキューに入れられます。これは、一般的なネットワークサービスパターンです。

しかし、今、お客様から電話があり、「今は問題ないが、数時間以内に製品を使用するので、問題が発生した場合はすぐに返信してほしい」と言われました。この顧客はオペレーターと数時間電話を続けることになり、コールセンターのサービスリソースの 10% が無駄になります。そのような顧客が 10 人いる場合、残りの 990 人の顧客は電話をかけることができません。これがデータプッシュモデルです。

もちろん、これは必ずしも悪いことではありません。この顧客が午後を通じて数秒ごとに問題を抱えている場合、この状況で電話を開いたままにしておくと、サービスリソースの 10% が無駄になることはありません。質問ごとに新しい呼び出し (データのプルなど) が必要になるため、オペレーターは顧客の身元確認とアカウントの取得に余分な時間を費やす必要があり、サービスの効率が低下します。通常、電話を続けることで顧客の満足度が高まるだけでなく、コールセンターの生産性も向上します。これはデータプッシュに最適なシナリオです。

以上がHTML5 データプッシュ SSE 原理とアプリケーション開発の詳細な図解説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTML5 ローカルストレージ Localstorage コードの詳細次の記事：HTML5 ローカルストレージ Localstorage コードの詳細

続きを見る