HTML サーバー送信イベントは、Web ページを使用してサーバーから更新を自動的に取得するための HTML API に含まれるシナリオの 1 つです。この概念には、サーバー送信イベントと呼ばれる、Web サーバーと Web ブラウザーの間で機能する 1 種類のイベントが含まれています。
まず、ブラウザがサーバー送信イベントをサポートするかどうかを確認するコードを追加します。その後、他のコードを処理して正確な出力を取得します。 WebSocket とは異なり、サーバー送信イベントを使用する Web アプリケーションの開発は常に簡単です。
前に、EventSource 属性について説明しました。また、サーバー イベント通知を受信する際にそのオブジェクトとともに使用されます。
EventSource 属性の実際の使用例は次のとおりです。
コード:
<!DOCTYPE html> <html> <body> <h1>Receive Sever-sent Event</h1> <div id="demo"></div> <script> if(typeof(EventSource) !== "undefined") { var source = new EventSource("ssedemo.html"); source.onmessage = function(event) { document.getElementById("demo").innerHTML += event.data + "<br>"; }; } else { document.getElementById("demo").innerHTML = "Oops, your browser is not going to support Secure-sent event"; } </script> </body> </html>
構文:
if(typeof(EventSource) !== "undefined") { // Server-sent event supported code // Program code } else { //Oops! Server-sent event is not supported code }
構文:
if(typeof(EventSource) !== "undefined") { var object = new EventSource("File_URL"); source.onmessage = function(event) { document.getElementById("output").innerHTML += event.data + "<br>"; }
HTML サーバー送信イベントの例を以下に示します。
この最初の例では、ブラウザがサーバー送信イベントをサポートするかどうかを確認します。すべてが正常であれば、出力ウィンドウに時間が表示されます。ブラウザがサポートされていない場合は、ブラウザ ウィンドウにエラー メッセージが表示されます。 コード:
<!DOCTYPE html> <html> <head> <title>HTML Server-sent Event</title> </head> <body> <div id="sse_demo"> </div> <script type="text/javascript"> if(typeof(EventSource)!=="undefined") { alert("Yes Your browser is going to support Server-Sent Event"); } else { alert("Sorry! Yes Your browser is not going to support Server- Sent Event"); } </script> </body> </html><strong> </strong>
出力:
出力画面には時間が数字で表示されます。これは、ブラウザが HTML サーバー送信イベントをサポートしていることを意味します。
この例はサーバー送信イベントに関するもので、サーバー送信イベントをブラウザーにロードするのに必要な時間をカウントします。このタイムスタンプは秒単位です。
コード:
<!DOCTYPE html> <html lang="en"> <head> <title>HTML API _ Server-Sent Events</title> <script> window.onload = function() { var path = new EventSource("server_time.html"); path.onmessage = function(event) { document.getElementById("sse_output").innerHTML += "Required timestamp received from web server: " + event.data + "<br>"; }; }; </script> </head> <body> <div id="sse_output"> <!--This will display required time of server to load contents--> </div> </body> </html>
出力:
以下の出力画面に見られるように、ロード時間として 1 秒が表示されます。
これは、接続の確立を示す例です。コードを実行して、どのような出力が得られるかを見てみましょう:
コード:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, height=device-height" /> <title> Server-Sent Events </title> <style type="text/css"> font-family: ‘Times new Roman’; </style> </head> <body> <h4> Server-Sent Events Example </h4> <ul></ul> <script> (function() { "use strict"; var ev_check = document.querySelector('ul'); var ssl = new EventSource('/events'); function li(text) { var li = document.createElement('li'); li.innerText = text; ev_check.appendChild(li); } ssl.addEventListener('open', function() { li('Server connection done succussfully.'); }); ssl.addEventListener('my-custom-event', function(event) { li(event.data); }); ssl.addEventListener('error', function() { li('Server connection failed.'); }); })(); </script> </body> </html>
出力:
上記のコードがブラウザ ウィンドウで実行されるとすぐに、サーバー接続が失敗した場合の出力が生成されます。
上記のすべての情報から、HTML サーバー送信イベントは、ユーザーが Web サーバーから Web ブラウザーへのイベントを作成できる単方向イベント プロセスとして使用される新しい API であることがわかります。 EventSource 属性を使用します。これを使用すると、イベントのロード時間を確認できます。これは Facebook、ニュースフィード、株価更新などで使用されます
以上がHTML サーバー送信イベントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。