ロングポーリングにより、ページを定期的に更新せずに Web アプリケーションをどのように効率的に更新できるのでしょうか?
ロング ポーリングについて: 初心者ガイド
ロング ポーリングは、Web アプリケーションがページを常に更新せずに、サーバーからの新しいデータを効率的に待機できるようにする手法です。これは、チャットやソーシャル ネットワーキング アプリケーションなど、データが頻繁に更新されないアプリケーションに特に役立ちます。
PHP および JavaScript での基本的なロング ポーリングの実装
ロング ポーリングは、複雑に見えますが、その実装は驚くほど簡単です。 PHP と JavaScript を使用した基本的な例を見てみましょう。
PHP スクリプト (msgsrv.php)
<?php if (rand(1, 3) == 1) { header("HTTP/1.0 404 Not Found"); die(); } sleep(rand(2, 10)); echo("Hi! Have a random number: " . rand(1, 10)); ?>
このスクリプトは、単純なメッセージ サーバーをシミュレートします。乱数を生成し、実際の状況を模倣するために 2 ~ 10 秒のランダムな遅延を伴って応答として送信します。
JavaScript コード (long_poller.htm)
<html> <head> <script src="jquery.min.js"></script> <script> function addmsg(type, msg) { $("#messages").append("<div class='msg " + type + "'>" + msg + "</div>"); } function waitForMsg() { $.ajax({ url: "msgsrv.php", success: function (data) { addmsg("new", data); setTimeout(waitForMsg, 1000); }, error: function () { addmsg("error", "Error"); setTimeout(waitForMsg, 15000); } }); } $(document).ready(function () { waitForMsg(); }); </script> </head> <body> <div>
この JavaScript コードは、jQuery を使用して PHP スクリプトを非同期的にリクエストします。リクエストが成功すると、レスポンスが #messages div に追加されます。リクエストが失敗した場合は、エラーが表示され、15 秒後に再試行されます。 setTimeout 関数は、ブラウザが一定の間隔でスクリプトを要求することを保証し、ロング ポーリングを実装します。
説明
この例では、ロング ポーリングの簡略化された実装を示します。 PHP スクリプトは、不定期にデータを送信するサーバーをシミュレートします。 JavaScript コードは、AJAX を使用してスクリプトを繰り返しリクエストし、応答を待ちます。応答を受信すると、JavaScript コードが UI を更新します。応答がない場合、スクリプトは少し待ってから再試行します。このアプローチにより、サーバー側の更新を効率的に待機しながら、Web アプリケーションの応答性を維持できます。
以上がロングポーリングにより、ページを定期的に更新せずに Web アプリケーションをどのように効率的に更新できるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











LaravelのバックエンドでReactアプリを構築する:パート2、React
