HTML5 通信 API のクロスドメインしきい値はもう高くなくなり、データプッシュはもはや夢ではありません

HTML5 通信 API のクロスドメインしきい値はもう高くなくなり、データプッシュはもはや夢ではありません_html5 チュートリアルスキル

WBOY

リリース： 2016-05-16 15:49:40

オリジナル

1821 人が閲覧しました

はじめに

HTML5 は、コミュニケーション、クロスドキュメントメッセージ送信、および WEB ソケット API に関連する 2 つの新しい API を追加します。

クロスドキュメントメッセージ送信機能は、異なる Web ドキュメントおよび異なるポート (クロスドメインの状況) でメッセージを送信できます。

Web ソケット API を使用すると、クライアントとサーバーがソケットポートを介してデータを転送できるため、データプッシュテクノロジを使用できます。

ドキュメント間メッセージング

以前は、ドメインを越えて情報を取得したい場合、多大な労力が必要でした。今では、Web ページが配置されているウィンドウオブジェクトのインスタンスを取得すれば、相互に通信できるようになりました。

まず、他のウィンドウからメッセージを受信したい場合は、そのウィンドウオブジェクトを監視する必要があります。

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>)

ログイン後にコピー

Windows オブジェクトの postMessage メソッドを使用して、他のウィンドウにメッセージを送信します。

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

ログイン後にコピー

簡単な例:

コードをコピーします

コードは次のとおりです:

投稿情報

</ 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> //メッセージのソースを確認する必要があります<br> $('#msg_box' ).html(ev.origin '送信メッセージ:' ev.data);<br> }, false);<br> <br> $('#send').click(function () {<br> var Frame = window.frames[0];<br> Frame.postMessage($('#msg').val(), 'http://localhost:3317/html5 および css3/06 通信 API/ 02.htm') ;<br> });<br> });<br> <br> </script><br> </head><br> <body><br> <input type="text" id="msg" /><br> <button id="send"><br> メッセージを送信</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>上記に基づいて、親ウィンドウに iframe の高さと幅を変更する方法を指示するために、サブページに高さと幅のボタンを追加します。<br><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode48'));"><u>コードをコピー</u></span></div>コードは次のとおりです。</div> <div class="msgborder" id="phpcode48"> <br>親レイヤーコード<br> <!DOCTYPE html><br> < html xmlns="http://www .w3.org/1999/xhtml"><br> <head><br> <title>

コードをコピーします

コードは次のとおりです:

サブレイヤーコード

< ;script type="text/javascript">
$(document).ready(function () {
var url = '';
var source = '';
window.addEventListener ( 'message', function (ev) {
//ここではソースの検証が必要です
if (ev.origin) { }
$('#msg').html(ev.origin ' メッセージを送信: 'ev.data);
url = ev.origin;
source = ev.source;
//ev.source.postMessage('Here is:' this.location, ev.origin) ;
});

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

< ;/div>

< ;/body>

最後に、電子メールのスクリーンショットを撮ります:

より柔軟に使用するには、API をより強力に使用できます。とにかく、さまざまなことができます。

Web ソケット通信

Web ソケットは、Web アプリケーションのクライアントとサーバー間で HTML5 によって提供される非 HTTP 通信メカニズムです

httpでは実現が難しいサーバーへのデータプッシュなどのインテリジェントな通信技術を実現し、注目を集めています。

Web Socks API を使用すると、サーバーとクライアントの間に非 HTTP 双方向接続を確立できます。この接続は、明示的に閉じられない限り、リアルタイムかつ永続的です。

これは、サーバーがクライアントにデータを送信したいときに、接続を再確立することなく、データをクライアントのブラウザーに即座にプッシュできることを意味します。

クライアントが開いたソケットを持ち、サーバーとの接続を確立している限り、サーバーはリクエストのためにクライアントをポーリングする必要がなくなり、パッシブからアクティブに変わります。

Web ソケット API

コードをコピー

コードは次のとおりです:

var webSocket = new WebSocket('ws://localhost:8005/socket');
URL は、ヘッダーとして ws または wss (暗号化) を使用する必要があります。この URL を設定した後、使用できます。 JavaScriptスクリプト内で渡されるWebSocketオブジェクトのURLにアクセスし、
通信を再取得します。接続確立後、WebSocketオブジェクトのsendメソッドを使用し、任意の形式でJSONデータを追加することで双方向通信が可能です。サーバーへのデータ:

webSocket.send(msg);
onmessage イベントを通じてサーバーから送信されたデータを受信します:
webSocket.onmessage = function (e) {
var data = e.data;
} ;
onopern イベントを通じてソケットオープンイベントをリッスンします:
webSocket.onopen = function (e) { };
onclose を通じてソケットクローズイベントをリッスンします:
webSocket.onclose = function (e) {};
webSocket.close() メソッドを通じてソケット接続を閉じます;

readyState 属性を通じて WebSocket オブジェクトのステータスを取得します:
CONNECTION 0 接続中
OPEN 1 接続済み
CLOSING 2 閉じる
CLOSE 2 クローズ済み

PS: サーバーブロック関連のソケットの設定方法がわからないため、当面はテストできません。この問題は二次学習中に解決されます。

コード全体はまだ非常に単純です:

コードをコピーします

コードは次のとおりです:

// ソケットインスタンスを作成します
varソケット = new WebSocket('ws://localhost:8080');

//ソケットをオープン
socket.onopen = function(event) {

//初期化メッセージを送信します
ソケット.send('私はクライアントであり、聞いています!');

// メッセージをリッスンする
ソケット.onmessage = function(event) {
console.log('クライアントがメッセージを受信しました',event)
};

// ソケットのクローズを監視します
ソケット.onclose = function(event) {
console.log('クライアントはソケットが閉じたことを通知しました',
}; ;

// ソケットを閉じます....
//socket.close()
};