Heim > Artikel > Web-Frontend > HTML5-Server-Push-Server-gesendetes Ereignis
HTML5-Server-Push-Server-gesendetes Ereignis
- 黄舟Original
- 2017-02-16 14:28:072282Durchsuche
Vom Server gesendete Ereignisse sind eine Komponente der HTML 5-Spezifikation und können verwendet werden, um Daten in Echtzeit vom Server an den Browser zu übertragen. Im Vergleich zu ähnlichen COMET- und WebSocket-Technologien sind Server-Push-Ereignisse einfacher zu verwenden und erfordern weniger Änderungen auf der Serverseite. Für einige Arten von Anwendungen sind Server-Push-Ereignisse die beste Option.
WebSocket
Bevor Sie HTML 5-Server-Push-Ereignisse einführen, stellen Sie zunächst einige der oben genannten serverseitigen Daten-Push-Technologien vor. Der erste ist WebSocket. Die WebSocket-Spezifikation ist ein wichtiger Bestandteil von HTML 5 und wird von vielen Mainstream-Browsern unterstützt. Es gibt auch viele Anwendungen, die auf WebSocket basieren. Wie der Name schon sagt, verwendet WebSocket eine Socket-Verbindung, die auf dem TCP-Protokoll basiert. Nach der Verwendung von WebSocket wird tatsächlich eine Socket-Verbindung zwischen dem Server und dem Browser hergestellt, die eine bidirektionale Datenübertragung ermöglicht. WebSocket ist sehr leistungsstark und flexibel einsetzbar und kann auf verschiedene Szenarien angewendet werden. Allerdings ist die WebSocket-Technologie auch relativ komplex und umfasst serverseitige und browserseitige Implementierungen, die sich von allgemeinen Webanwendungen unterscheiden.Polling
Neben WebSocket basieren auch andere Implementierungsmethoden auf dem HTTP-Protokoll, um einen Echtzeit-Push-Effekt zu erzielen. Die erste Methode ist einfaches Polling, das heißt, der Browser sendet regelmäßig Anfragen an den Server, um zu prüfen, ob Datenaktualisierungen vorliegen. Dieser Ansatz ist relativ einfach und kann das Problem bis zu einem gewissen Grad lösen. Das Abfrageintervall muss jedoch sorgfältig abgewogen werden. Wenn das Abfrageintervall zu lang ist, kann der Benutzer die aktualisierten Daten nicht rechtzeitig empfangen. Wenn das Abfrageintervall zu kurz ist, führt dies zu zu vielen Abfrageanforderungen und erhöht die Belastung des Servers.
Nachteile:
1: Die Abfrage wird vom Client initiiert, sodass der Server nicht feststellen kann, ob der Inhalt, den ich übertragen möchte, abgelaufen ist, da es für mich schwierig ist, festzustellen, ob eine bestimmte Information vorliegt an alle Clients gepusht wurde, muss der Server eine große Datenmenge zwischenspeichern. Wenn die Daten in der Datenbank gespeichert sind, muss die Datenbank bei jeder Anfrage abgefragt werden, was sowohl für das Datenbank- als auch für das Systemdesign eine große Herausforderung darstellt.
2: Die Häufigkeit der Anfragen ist zu hoch Jedes Anfragepaket enthält die gleichen Daten. Für PCs ist dies möglicherweise keine große Sache, für mobile Clients jedoch wahrscheinlich nicht das Beste Lösung. Insbesondere wenn es darum geht, Berechtigungsurteile zu treffen, verringern die Logik und Effizienz des Servers auch die Benutzererfahrung.
COMET
Die COMET-Technologie verbessert die Mängel der einfachen Abfrage und nutzt lange Abfragen. Bei der Long-Polling-Methode hält der Server die Verbindung während jeder Anfrage für einen bestimmten Zeitraum offen, anstatt sie sofort nach Abschluss der Antwort zu schließen. Dies hat den Vorteil, dass während der Zeit, in der die Verbindung geöffnet ist, vom Server generierte Datenaktualisierungen zeitnah an den Browser zurückgegeben werden können. Wenn die vorherige lange Verbindung geschlossen wird, öffnet der Browser sofort eine neue lange Verbindung, um die Anfrage fortzusetzen. Die Implementierung der COMET-Technologie erfordert jedoch die Unterstützung von Bibliotheken Dritter sowohl auf der Serverseite als auch auf der Browserseite.
Heutzutage verfügen die meisten Web-Apps über Ajax, das so aussieht:
Umfassender Vergleich der vier oben genannten verschiedenen Technologien, einfach Umfragen werden aufgrund ihrer inhärenten Mängel nicht empfohlen. Die COMET-Technologie ist nicht Teil des HTML-5-Standards und ihr Einsatz wird aus standardkonformer Sicht nicht empfohlen. Die WebSocket-Spezifikation und die Server-Push-Technologie sind beide Komponenten des HTML 5-Standards. Sie bieten native Unterstützung in Mainstream-Browsern und werden empfohlen. Allerdings ist die WebSocket-Spezifikation komplexer und eignet sich für Szenarien, die eine komplexe bidirektionale Datenkommunikation erfordern. Für einfache Serverdaten-Push-Szenarien ist die Verwendung von Server-Push-Ereignissen ausreichend.
Datenbasierter Push funktioniert so: Wenn die Datenquelle über neue Daten verfügt, werden diese sofort an den Client gesendet, ohne auf die Client-Anfrage zu warten. Bei diesen neuen Daten kann es sich um aktuelle Nachrichten, aktuelle Börsenkurse, Chat-Nachrichten von Freunden, Wettervorhersagen usw. handeln.
Die Funktionen von Daten-Pull und -Push sind gleich, Benutzer erhalten neue Daten. Aber Data Push hat einige Vorteile. Sie haben vielleicht gehört, dass Comet, Ajax Push, Reverse Ajax, HTTP Streaming, WebSockets und SSE unterschiedliche Technologien sind. Der wohl größte Vorteil ist die geringe Latenz. SSE wird von Webanwendungen verwendet, um Daten zu aktualisieren, ohne dass eine Aktion des Benutzers erforderlich ist.
WebSockets ist eine komplexere Technologie zur Implementierung des Servers, aber es handelt sich um einen echten Vollduplex-Socket. Der Server kann Daten an den Client senden, und der Client kann auch Daten zurück an den Server senden. SSE arbeitet mit dem HTTP/HTTPS-Protokoll und unterstützt Proxyserver und Authentifizierungstechnologien. SSE ist ein Textprotokoll und Sie können es problemlos debuggen. Wenn Sie hauptsächlich Binärdaten vom Server zum Client senden müssen, ist WebSocket die bessere Wahl.
Glücklicherweise bietet uns Html5 eine Möglichkeit: Server-Sent Events enthält das neue HTML-Element EventSource und den neuen MIME-Typ text/event-stream, um meine Anforderungen zu erfüllen.
Die vom Server gesendete Ereignis-API ist die EventSource-Schnittstelle. Wenn Sie ein neues EventSource-Objekt erstellen, können Sie einen URI angeben, der Ereignisse akzeptiert 🎜>
var evtSource = new EventSource("ssedemo.php");Setzen Sie den Header „Content-Type“ auf „text/event-stream“ <!DOCTYPE html><html><head>
<title>sever Sent Event实例1</title></head><body>
<h2>sever Sent Event实例1</h2>
<p id="result"></p>
<script type="text/javascript">
var result = document.getElementById('result'); if (typeof (EventSource) !== 'undefined') { //创建事件源
var source = new EventSource('test.php'); //监听事件源发送过来的数据
source.onmessage = function(event){
result.innerHTML +=event.data +'<br>';
}
}else{
result.innerHTML += "您的浏览器不支持server sent Event";
} </script></body></html><?php
//指定发送事件流的MIME为text/event-stream
header('Content-Type:text/event-stream'); //不缓存服务端发送的数据
header('Cache-Control:no-cache'); //指定服务器发送的事件名
echo "event:test\n\n"; // 定义服务器向客户端发送的数据
echo "data:服务器当前时间为：".date('Y-m-d H:i:s')."\n\n"; //向客户端发送数据流
flush(); ?>- Geben Sie an, dass die Seite nicht zwischengespeichert wird
- Sendedatum der Ausgabe (beginnt immer mit „Daten:“)
- Ausgabedaten auf der Webseite aktualisieren
- Vielleicht Jeder sollte beachten, dass die von PHP übertragenen Informationen „nn“ als Endmarkierung verwenden. Wenn nach dem Testen „nn“ nicht als Endmarkierung verwendet wird, kann der Client den übertragenen Wert nicht empfangen. Es muss auch eine besondere Aussage gemacht werden: Das übertragene Informationsformat muss andernfalls
"data:contentnn"
sein. . .
Ereignisstromformat
Der Ereignisstrom ist nur ein einfacher Textdatenstrom. Der Text sollte im UTF-8-Format codiert werden Zeilen dienen als Trennzeichen. Zeilenkommentarzeilen, die mit einem Doppelpunkt beginnen, werden ignoriert.
Feld
Ereignis
- Ereignistyp wird auf dem Client empfangen, wenn eine Nachricht vorliegt Wenn die Nachricht empfangen wird, wird ein Ereignis für das aktuelle EventSource-Objekt ausgelöst Verfügt über kein Ereignisfeld, wird die Ereignisverarbeitungsfunktion für das Attribut „onmessage“ ausgelöst.
-
Daten Das Datenfeld der Nachricht Die Nachricht enthält mehrere Datenfelder. Der Client verwendet dann Zeilenumbrüche, um sie zu einer Zeichenfolge zu verketten, da der Feldwert -
id Ereignis-ID wird interner Teil des aktuellen EventSource-Objekts Der Attributwert des Attributs „Letzte Ereignis-ID“. -
retry Ein ganzzahliger Wert, der die Wiederverbindungszeit angibt ( in Millisekunden), wenn der Feldwert keine Ganzzahl ist, wird er ignoriert. Mit Ausnahme der oben angegebenen Feldnamen werden alle anderen Feldnamen ignoriert, während FF alle 3 Sekunden pusht alle 5 Sekunden. -
Hinweis: Wenn eine Textzeile keinen Doppelpunkt enthält, wird die gesamte Textzeile in einen Feldnamen analysiert und der Feldwert ist leer.
EventSource-Objekt Standardereignisse werden bereitgestellt
<!DOCTYPE html><html><head>
<title>sever Sent Event实例1</title></head><body>
<h2>sever Sent Event实例1</h2>
<button onclick="closeCnt()">断开连接</button>
<p id="result"></p>
<script type="text/javascript">
var result = document.getElementById('result'); if (typeof (EventSource) !== 'undefined') { //创建事件源
var source = new EventSource('test.php'); //监听事件源发送过来的数据
source.onmessage = function(event){
result.innerHTML +=event.data +'<br>';
}
source.onopen = connectionOpen;
source.onclose = connectionClose; function connectionOpen(){
if (source.readyState == 0) {
result.innerHTML +='未建立连接<br>';
} if (source.readyState == 1) {
result.innerHTML +='连接成功<br>';
}
} function connectionClose(){
result.innerHTML += "关闭连接，readyState属性值为：" + source.readyState + '<br>';
} function closeCnt(){
source.close();
result.innerHTML += "断开连接，readyState属性值为：" + source.readyState + '<br>';
}
}else{
result.innerHTML += "您的浏览器不支持server sent Event";
} </script></body></html>
在指定 URL 创建出 EventSource 对象之后，可以通过 onmessage 和 addEventListener 方法来添加事件处理方法。当服务器端有新的事件产生，相应的事件处理方法会被调用。EventSource 对象的 onmessage 属性的作用类似于 addEventListener( ‘ message ’ )，不过 onmessage 属性只支持一个事件处理方法。
<!DOCTYPE html><html><head>
<title>sever Sent Event实例1</title></head><body>
<h2>sever Sent Event实例1</h2>
<p id="result"></p>
<script type="text/javascript">
var result = document.getElementById('result'); if (typeof (EventSource) !== 'undefined') { //创建事件源
var source = new EventSource('test.php'); //自定义事件源发送过来的数据,事件名和php中事件名对应
source.addEventListener('myevent', 'updateRequests', false); // source.onmessage = function() {
// result.innerHTML = event.data + '<br>';
// }
function updateRequests(event){
result.innerHTML = event.data + '<br>';
}
}else{
result.innerHTML += "您的浏览器不支持server sent Event";
} </script></body></html><?php
//指定发送事件流的MIME为text/event-stream
header('Content-Type:text/event-stream'); //不缓存服务端发送的数据
header('Cache-Control:no-cache'); //指定服务器发送的事件名
echo "event:myevent\n\n"; // 定义服务器向客户端发送的数据
echo "data:服务器当前时间为：".date('Y-m-d H:i:s')."\n\n"; //向客户端发送数据流
flush(); ?>前端是HTML5，后端可以是PHP, JSP, Node.js, Asp.net等应用。
服务器推送事件（Server-sent Events）是 HTML 5 规范中的一个组成部分，可以用来从服务端实时推送数据到浏览器端。相对于与之类似的 COMET 和 WebSocket 技术来说，服务器推送事件的使用更简单，对服务器端的改动也比较小。对于某些类型的应用来说，服务器推送事件是最佳的选择。
WebSocket
在介绍 HTML 5 服务器推送事件之前，首先介绍一些上面提到的几种服务器端数据推送技术。第一种是 WebSocket。WebSocket 规范是 HTML 5 中的一个重要组成部分，已经被很多主流浏览器所支持，也有不少基于 WebSocket 开发的应用。正如名称所表示的一样，WebSocket 使用的是套接字连接，基于 TCP 协议。使用 WebSocket 之后，实际上在服务器端和浏览器之间建立一个套接字连接，可以进行双向的数据传输。WebSocket 的功能是很强大的，使用起来也灵活，可以适用于不同的场景。不过 WebSocket 技术也比较复杂，包括服务器端和浏览器端的实现都不同于一般的 Web 应用。轮询
除了 WebSocket 之外，其他的实现方式是基于 HTTP 协议来达到实时推送的效果。第一种做法是简易轮询，即浏览器端定时向服务器端发出请求，来查询是否有数据更新。这种做法比较简单，可以在一定程度上解决问题。不过对于轮询的时间间隔需要进行仔细考虑。轮询的间隔过长，会导致用户不能及时接收到更新的数据；轮询的间隔过短，会导致查询请求过多，增加服务器端的负担。
缺点：
1：轮询是由客户端发起的，那么在服务端就不能判别我要推送的内容是否已经过期，因为我很难判断某个信息是否已经推送给全部的客户端，那么服务端就需要缓存大量的数据。如果数据保存在数据库，那么还要每次请求都需要查询数据库，这对数据库和系统设计都是一个很大的挑战。
2：请求的频率太高，每次的请求包中含有同样的数据，这对pc来说也许算不得什么，但是对于移动客户端来讲，这应该不是最佳的方案。尤其是遇到还要做权限判断的时候，那么服务端的逻辑和效率也会造成用户体验的降低。
COMET
COMET 技术改进了简易轮询的缺点，使用的是长轮询。长轮询的方式在每次请求时，服务器端会保持该连接在一段时间内处于打开状态，而不是在响应完成之后就立即关闭。这样做的好处是在连接处于打开状态的时间段内，服务器端产生的数据更新可以被及时地返回给浏览器。当上一个长连接关闭之后，浏览器会立即打开一个新的长连接来继续请求。不过 COMET 技术的实现在服务器端和浏览器端都需要第三方库的支持。
现在Web App中，大都有Ajax，是这样子：
综合比较上面提到的 4 种不同的技术，简易轮询由于其本身的缺陷，并不推荐使用。COMET 技术并不是 HTML 5 标准的一部分，从兼容标准的角度出发，也不推荐使用。WebSocket 规范和服务器推送技术都是 HTML 5 标准的组成部分，在主流浏览器上都提供了原生的支持，是推荐使用的。不过 WebSocket 规范更加复杂一些，适用于需要进行复杂双向数据通讯的场景。对于简单的服务器数据推送的场景，使用服务器推送事件就足够了。
基于数据推送是这样的，当数据源有新数据，它马上发送到客户端，不需要等待客户端请求。这些新数据可能是最新闻，最新股票行情，来自朋友的聊天信息，天气预报等。
数据拉与推的功能是一样的，用户拿到新数据。但数据推送有一些优势。 你可能听说过Comet, Ajax推送, 反向Ajax, HTTP流，WebSockets与SSE是不同的技术。可能最大的优势是低延迟。SSE用于web应用程序刷新数据，不需要用户做任何动作。
WebSockets ist eine komplexere Technologie zur Implementierung des Servers, aber es handelt sich um einen echten Vollduplex-Socket. Der Server kann Daten an den Client senden, und der Client kann auch Daten zurück an den Server senden. SSE arbeitet mit dem HTTP/HTTPS-Protokoll und unterstützt Proxyserver und Authentifizierungstechnologien. SSE ist ein Textprotokoll und Sie können es problemlos debuggen. Wenn Sie hauptsächlich Binärdaten vom Server zum Client senden müssen, ist WebSocket die bessere Wahl.
Glücklicherweise bietet uns Html5 eine Möglichkeit: Server-Sent Events enthält das neue HTML-Element EventSource und den neuen MIME-Typ text/event-stream, um meine Anforderungen zu erfüllen.
Die vom Server gesendete Ereignis-API ist die EventSource-Schnittstelle. Wenn Sie ein neues EventSource-Objekt erstellen, können Sie einen URI angeben, der Ereignisse akzeptiert 🎜>
var evtSource = new EventSource("ssedemo.php");Setzen Sie den Header „Content-Type“ auf „text/event-stream“ <!DOCTYPE html><html><head>
<title>sever Sent Event实例1</title></head><body>
<h2>sever Sent Event实例1</h2>
<p id="result"></p>
<script type="text/javascript">
var result = document.getElementById('result'); if (typeof (EventSource) !== 'undefined') { //创建事件源
var source = new EventSource('test.php'); //监听事件源发送过来的数据
source.onmessage = function(event){
result.innerHTML +=event.data +'<br>';
}
}else{
result.innerHTML += "您的浏览器不支持server sent Event";
} </script></body></html><?php
//指定发送事件流的MIME为text/event-stream
header('Content-Type:text/event-stream'); //不缓存服务端发送的数据
header('Cache-Control:no-cache'); //指定服务器发送的事件名
echo "event:test\n\n"; // 定义服务器向客户端发送的数据
echo "data:服务器当前时间为：".date('Y-m-d H:i:s')."\n\n"; //向客户端发送数据流
flush(); ?>- Geben Sie an, dass die Seite nicht zwischengespeichert wird
- Sendedatum der Ausgabe (beginnt immer mit „Daten:“)
- Ausgabedaten auf der Webseite aktualisieren
- Vielleicht Jeder sollte beachten, dass die von PHP übertragenen Informationen „nn“ als Endmarkierung verwenden. Wenn nach dem Testen „nn“ nicht als Endmarkierung verwendet wird, kann der Client den übertragenen Wert nicht empfangen. Es muss auch eine besondere Aussage gemacht werden: Das übertragene Informationsformat muss andernfalls
"data:contentnn"
sein. . .
Ereignisstromformat
Der Ereignisstrom ist nur ein einfacher Textdatenstrom. Der Text sollte im UTF-8-Format codiert werden Zeilen dienen als Trennzeichen. Zeilenkommentarzeilen, die mit einem Doppelpunkt beginnen, werden ignoriert.
Feld
Ereignis
- Ereignistyp wird auf dem Client empfangen, wenn eine Nachricht vorliegt Wenn die Nachricht empfangen wird, wird ein Ereignis für das aktuelle EventSource-Objekt ausgelöst Verfügt über kein Ereignisfeld, wird die Ereignisverarbeitungsfunktion für das Attribut „onmessage“ ausgelöst.
-
Daten Das Datenfeld der Nachricht Die Nachricht enthält mehrere Datenfelder. Der Client verwendet dann Zeilenumbrüche, um sie zu einer Zeichenfolge zu verketten, da der Feldwert -
id Ereignis-ID wird interner Teil des aktuellen EventSource-Objekts Der Attributwert des Attributs „Letzte Ereignis-ID“. -
retry Ein ganzzahliger Wert, der die Wiederverbindungszeit angibt ( in Millisekunden), wenn der Feldwert keine Ganzzahl ist, wird er ignoriert. Mit Ausnahme der oben angegebenen Feldnamen werden alle anderen Feldnamen ignoriert, während FF alle 3 Sekunden pusht alle 5 Sekunden. -
Hinweis: Wenn eine Textzeile keinen Doppelpunkt enthält, wird die gesamte Textzeile in einen Feldnamen analysiert und der Feldwert ist leer.
EventSource-Objekt Standardereignisse werden bereitgestellt
<!DOCTYPE html><html><head>
<title>sever Sent Event实例1</title></head><body>
<h2>sever Sent Event实例1</h2>
<button onclick="closeCnt()">断开连接</button>
<p id="result"></p>
<script type="text/javascript">
var result = document.getElementById('result'); if (typeof (EventSource) !== 'undefined') { //创建事件源
var source = new EventSource('test.php'); //监听事件源发送过来的数据
source.onmessage = function(event){
result.innerHTML +=event.data +'<br>';
}
source.onopen = connectionOpen;
source.onclose = connectionClose; function connectionOpen(){
if (source.readyState == 0) {
result.innerHTML +='未建立连接<br>';
} if (source.readyState == 1) {
result.innerHTML +='连接成功<br>';
}
} function connectionClose(){
result.innerHTML += "关闭连接，readyState属性值为：" + source.readyState + '<br>';
} function closeCnt(){
source.close();
result.innerHTML += "断开连接，readyState属性值为：" + source.readyState + '<br>';
}
}else{
result.innerHTML += "您的浏览器不支持server sent Event";
} </script></body></html>
在指定 URL 创建出 EventSource 对象之后，可以通过 onmessage 和 addEventListener 方法来添加事件处理方法。当服务器端有新的事件产生，相应的事件处理方法会被调用。EventSource 对象的 onmessage 属性的作用类似于 addEventListener( ‘ message ’ )，不过 onmessage 属性只支持一个事件处理方法。
<!DOCTYPE html><html><head>
<title>sever Sent Event实例1</title></head><body>
<h2>sever Sent Event实例1</h2>
<p id="result"></p>
<script type="text/javascript">
var result = document.getElementById('result'); if (typeof (EventSource) !== 'undefined') { //创建事件源
var source = new EventSource('test.php'); //自定义事件源发送过来的数据,事件名和php中事件名对应
source.addEventListener('myevent', 'updateRequests', false); // source.onmessage = function() {
// result.innerHTML = event.data + '<br>';
// }
function updateRequests(event){
result.innerHTML = event.data + '<br>';
}
}else{
result.innerHTML += "您的浏览器不支持server sent Event";
} </script></body></html><?php
//指定发送事件流的MIME为text/event-stream
header('Content-Type:text/event-stream'); //不缓存服务端发送的数据
header('Cache-Control:no-cache'); //指定服务器发送的事件名
echo "event:myevent\n\n"; // 定义服务器向客户端发送的数据
echo "data:服务器当前时间为：".date('Y-m-d H:i:s')."\n\n"; //向客户端发送数据流
flush(); ?>前端是HTML5，后端可以是PHP, JSP, Node.js, Asp.net等应用。
以上就是Html5 服务端推送 Server-Sent Event的内容，更多相关内容请关注PHP中文网（www.php.cn）！
In Verbindung stehende Artikel
Mehr sehen- Das Vollbild-Bildlauf-Plug-in AlloyTouch erstellt in 30 Sekunden eine flüssige H5-Seite
- Tatsächlicher HTML5-Kampf und Analyse von Touch-Ereignissen (Touchstart, Touchmove und Touchend)
- Ausführliche Erläuterung der Beispiele für Bildzeichnungen in HTML5 Canvas 9
- Reguläre Ausdrücke und neue HTML5-Elemente
- So kombinieren Sie NodeJS und HTML5, um mehrere Dateien per Drag-and-Drop auf den Server hochzuladen