Der domänenübergreifende Schwellenwert der HTML5-Kommunikations-API ist nicht mehr hoch und der Daten-Push ist kein Traum mehr._HTML5-Tutorial-Fähigkeiten-H5-Tutorial-php.cn

Der domänenübergreifende Schwellenwert der HTML5-Kommunikations-API ist nicht mehr hoch und der Daten-Push ist kein Traum mehr._HTML5-Tutorial-Fähigkeiten

WBOY

Freigeben： 2016-05-16 15:49:40

Original

1793 Leute haben es durchsucht

Vorwort

HTML5 fügt zwei neue APIs für Kommunikation, dokumentübergreifende Nachrichtenübertragung und WEB-Sockets-API hinzu,

Die dokumentübergreifende Nachrichtenübertragungsfunktion kann Nachrichten in verschiedenen Webdokumenten und verschiedenen Ports (in domänenübergreifenden Situationen) übertragen.

Durch die Verwendung der Web-Sockets-API können Client und Server Daten über den Socket-Port übertragen, sodass die Daten-Push-Technologie verwendet werden kann.

Dokumentenübergreifende Nachrichtenübermittlung

Wenn wir früher Informationen domänenübergreifend erhalten wollten, wäre das sehr aufwändig gewesen. Jetzt können wir miteinander kommunizieren, solange wir die Instanz des Fensterobjekts erhalten, in dem sich die Webseite befindet.

Wenn Sie Nachrichten von anderen Fenstern empfangen möchten, müssen Sie zunächst deren Fensterobjekte überwachen:

window.addevntListener(<span style="COLOR: #800000">'</span><span style="COLOR: #800000">message</span><span style="COLOR: #800000">'</span>, function () {}, <span style="COLOR: #0000ff">false</span>)

Nach dem Login kopieren

Verwenden Sie die postMessage-Methode des Windows-Objekts, um Nachrichten an andere Fenster zu senden:

<span style="COLOR: #000000">otherWindow.postMessage(message, targetOrigin)第一个参数为发送文本，也可以是js对象（json）第二个参数为接收消息对象窗口的URL，可以使用通配符</span>

Nach dem Login kopieren

Einfaches Beispiel:

Code kopieren

Der Code lautet wie folgt:

Beitragsinformationen

</ title><br> <script src="../jquery-1.7.1.js" type="text/javascript"></script><br> <script type="text/ javascript"> ;<br> $(document).ready(function () {<br> window.addEventListener('message', function (ev) {<br> //Die Quelle der Nachricht sollte überprüft werden<br> $('#msg_box' ).html(ev.origin 'Sent message:' ev.data);<br> }, false);<br> <br> $('#send').click(function () {<br> var frame = window.frames[0];<br> frame.postMessage($('#msg').val(), 'http://localhost:3317/html5 and css3/06 communication api/ 02.htm') ;<br> });<br> });<br> <br> </script><br> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><br> <body><br> <input type="text" id="msg" /><br> <button id="send"><br> Nachricht senden</button><br> <iframe src="02.htm" width= "400"> ;</iframe><br> <div id="msg_box"><br> </div><br> </body><br> </html><br> </div> <br> <p><img alt="" src="http://files.jb51.net/file_images/article/201304/2013042510291116.jpg"></p> <p>Basierend auf dem oben Gesagten nehmen wir eine kleine Änderung vor. Wir stellen auf der Unterseite Schaltflächen für Höhe und Breite bereit, um dem übergeordneten Fenster mitzuteilen, wie die Iframe-Höhe und -Breite geändert werden soll: <br><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode48'));"><u>Code kopieren</u></span></div>Der Code lautet wie folgt:</div> <div class="msgborder" id="phpcode48"> <br>Code der übergeordneten Ebene<br> <!DOCTYPE html><br> < html xmlns="http://www .w3.org/1999/xhtml"><br> <head><br> <title>

Kopieren Sie den Code

Der Code lautet wie folgt:

Sub-Layer-Code

< ;script type="text/javascript">
$(document).ready(function () {
var url = '';
var source = '';
window.addEventListener ( 'message', function (ev) {
//Hier ist eine Quellenüberprüfung erforderlich
if (ev.origin) { }
$('#msg').html(ev.origin ' Nachricht senden : 'ev.data);
url = ev.origin;
source = ev.source;
//ev.source.postMessage('Hier ist:' this.location, ev.origin) ;
});

$('#send').click(function () {
source.postMessage($('#w_h').val(), url);
});
});

< ;/div>

< ;/body>

Machen Sie zum Schluss einen Screenshot von unserem E:

Für eine flexiblere Nutzung kann die API leistungsfähiger genutzt werden. Wir können jedoch viele Dinge tun.

Web-Sockets-Kommunikation

Web-Sockets sind ein Nicht-HTTP-Kommunikationsmechanismus, der von HTML5 zwischen dem Client und dem Server in Webanwendungen bereitgestellt wird

Er hat intelligente Kommunikationstechnologien wie Daten-Push auf den Server erkannt, die mit http nicht einfach zu implementieren sind, und hat daher viel Aufmerksamkeit erhalten.

Mithilfe der Web-Socks-API können Sie eine bidirektionale Nicht-HTTP-Verbindung zwischen dem Server und dem Client herstellen. Diese Verbindung erfolgt in Echtzeit und ist dauerhaft, sofern sie nicht explizit geschlossen wird

Das bedeutet, dass der Server, wenn er Daten an den Client senden möchte, die Daten sofort an den Browser des Clients übertragen kann, ohne die Verbindung erneut herzustellen.

Solange der Client über einen offenen Socket verfügt und eine Verbindung mit dem Server herstellt, kann der Server Daten an den Socket senden. Der Server muss den Client nicht mehr nach Anfragen fragen, wodurch passiv zu aktiv wird.

Web Sockets API

Code kopieren

Der Code lautet wie folgt:

var webSocket = new WebSocket('ws://localhost:8005/socket');
Die URL muss ws oder wss (verschlüsselt) als Header verwenden. Nachdem diese URL festgelegt wurde, ist dies möglich im Javascript-Skript übergeben werden. Greifen Sie auf die URL des Websocket-Objekts zu, um die
-Kommunikation erneut zu erhalten. Verwenden Sie die Sendemethode des Websocket-Objekts und fügen Sie JSON-Daten hinzu, um eine beliebige Form zu übertragen der Daten an den Server:

webSocket.send(msg);
Empfangen Sie Daten, die vom Server über das onmessage-Ereignis gesendet wurden:
webSocket.onmessage = function (e) {
　var data = e.data;
} ;
Überwachen Sie das Socket-Open-Ereignis über das onopern-Ereignis:
webSocket.onopen = function (e) { };
Überwachen Sie das Socket-Close-Ereignis über onclose:
webSocket.onclose = function (e) {};
Schließen Sie die Socket-Verbindung über die webSocket.close()-Methode;

Rufen Sie den Status des Websocket-Objekts über das Attribut „readyState“ ab:
VERBINDUNG 0 wird verbunden
ÖFFNEN 1 verbunden
SCHLIESSEN 2 wird geschlossen
SCHLIEßEN 2 geschlossen

PS: Da ich nicht weiß, wie ich den Socket für den Serverblock konfigurieren soll, kann ich ihn vorerst nicht testen. Dieses Problem wird während des sekundären Lernens gelöst.

Der gesamte Code ist immer noch sehr einfach:

Kopieren Sie den Code

Der Code lautet wie folgt:

// Eine Socket-Instanz erstellen
var socket = new WebSocket('ws://localhost:8080'

//Socket öffnen
socket.onopen = function(event) {

//Eine Initialisierungsnachricht senden
socket.send('Ich bin der Kunde und ich höre zu!');

// Auf Nachrichten warten
socket.onmessage = function(event) {
console.log('Client got a message',event };

// Überwachen Sie das Schließen von Socket
socket.onclose = function(event) {
console.log('Client notified socket has close', event}; ;

// Socket schließen....
//socket.close()
};