ホームページ > 記事 > ウェブフロントエンド > HTML サーバー送信イベント
HTML サーバー送信イベント
- WBOYオリジナル
- 2024-09-04 16:38:17322ブラウズ
HTML サーバー送信イベントは、Web ページを使用してサーバーから更新を自動的に取得するための HTML API に含まれるシナリオの 1 つです。この概念には、サーバー送信イベントと呼ばれる、Web サーバーと Web ブラウザーの間で機能する 1 種類のイベントが含まれています。
まず、ブラウザがサーバー送信イベントをサポートするかどうかを確認するコードを追加します。その後、他のコードを処理して正確な出力を取得します。 WebSocket とは異なり、サーバー送信イベントを使用する Web アプリケーションの開発は常に簡単です。
サーバー送信イベントは HTML でどのように機能しますか?
- ユーザーとして、ログイン ボタンのクリックなど、何らかのイベントを実行してサーバーに渡そうとすると、ログインの詳細がサーバーに送信されます。したがって、Web ブラウザから Web サーバーに渡されるこのタイプのイベントの実行中、このイベントはクライアント側イベントとして知られています。
- しかし、私たちは上記のプロセスの逆を行っています。つまり、サーバーから Web ブラウザーにデータまたはイベントを送信することは、サーバー送信イベントとして知られています。したがって、ブラウザがサーバーから自動的に更新されるときに、このような種類のイベントがシステム内で発生します。
- サーバー送信イベントは、サーバーからクライアントへの一方向でのみプロセスを実行するため、常に単方向として扱われます。したがって、このプロセスの主要な属性の 1 つは、そのオブジェクトを含む EventSource 属性です。
- つまり、このオブジェクトには、URL、リクエスト、再接続時間、最後のイベント ID 文字列などの用語が付加されます。それでは、一つずつ見ていきましょう。
- URL: これは構築のプロセス中に設定されます。
- リクエスト: 最初に null に初期化する必要があります。
- 再接続時間: これはミリ秒単位で測定されたタイムスタンプです。
- 最後のイベント ID 文字列: 文字列値を空の文字列として初期化する必要もあります。
サーバーから送信されたイベント通知を受信する
前に、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>
- 上記の例では、更新を送信するページの URL を含む、EventSource 属性のオブジェクトを定義しています。すべての更新はメッセージと呼ばれるイベントで受信されます。これは、demo と呼ばれる定義された ID に役立ちます。
構文:
- 最初のステップは、ブラウザがサーバー送信イベントをサポートするかどうかを確認することです。そこで、ブラウザがサポートされているかどうかを確認するための小さなコードをプログラムに組み込みます。
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>";
}
- 上記の構文に示されているように、まず、ファイルの URL を定義するとともに、EventSource 属性の新しいオブジェクトを作成する必要があります。これは、Web ブラウザに更新を送信するのに役立ちます。
- サーバーから更新が来るたびに、メッセージ上でイベントが発生し、必要なメッセージが Web ドキュメントに出力されます。
HTML サーバー送信イベントの例
HTML サーバー送信イベントの例を以下に示します。
例 #1
この最初の例では、ブラウザがサーバー送信イベントをサポートするかどうかを確認します。すべてが正常であれば、出力ウィンドウに時間が表示されます。ブラウザがサポートされていない場合は、ブラウザ ウィンドウにエラー メッセージが表示されます。 コード:
<!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 サーバー送信イベントをサポートしていることを意味します。
例 #2
この例はサーバー送信イベントに関するもので、サーバー送信イベントをブラウザーにロードするのに必要な時間をカウントします。このタイムスタンプは秒単位です。
コード:
<!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 秒が表示されます。
例 #3
これは、接続の確立を示す例です。コードを実行して、どのような出力が得られるかを見てみましょう:
コード:
<!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 サイトの他の関連記事を参照してください。