導航
【初探HTML5之使用新標簽布局】用html5布局我的博客頁！
【HTML5初探之form標簽】解放表單驗證、增加文件上傳、集成拖放
【HTML5初探之繪制圖像（上）】看我canvas元素引領下一代web頁面
【HTML5初探之繪制圖像（下）】看我canvas元素引領下一代web頁面
【HTML5初探之多媒體元素】視頻播放HTML5、Flash誰才是王道？
【HTML5初探之通信API】跨域門檻不再高、數據推送不是夢
【HTML5初探之Geolocation API】讓我們來回去地理信息
前言
HTML5新增通信相關兩個API，跨文檔消息傳輸與WEB Sockets API，
跨文檔消息傳輸功能，可以在不同網頁文檔，不同端口（跨域情況下）進行消息傳遞。
使用web sockets api 可以讓客戶端與服務器端通過socket端口傳遞數據，這樣便可以使用數據推送技術。
跨文檔消息傳輸
在之前我們若想跨域獲取信息會花很多功夫，現在只要獲取網頁所在窗口對象實例變可以實現互相通信。
首先要想從其他窗口接受發過來的消息需要對其窗口對象進行監聽：
window.addevntListener('message', function () {}, false)
使用windows對象的postMessage方法向其他窗口發生信息：
otherWindow.postMessage(message, targetOrigin)
第一個參數為發送文本，也可以是js對象（json）
第二個參數為接收消息對象窗口的URL，可以使用通配符
簡單示例：
post信息
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script src="../jquery-1.7.1.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(document).ready(function () { 8 window.addEventListener('message', function (ev) { 9 //應該要檢查消息來源 10 $('#msg_box').html(ev.origin + ' 發來消息：' + ev.data); 11 }, false); 12 13 $('#send').click(function () { 14 var frame = window.frames[0]; 15 frame.postMessage($('#msg').val(), 'http://localhost:3317/html5%E4%B8%8Ecss3/06%E9%80%9A%E8%AE%AFapi/02.htm'); 16 }); 17 }); 18 19 </script> 20 </head> 21 <body> 22 <input type="text" id="msg" /> 23 <button id="send"> 24 發送信息</button> 25 <iframe src="02.htm" width="400"></iframe> 26 <div id="msg_box"> 27 </div> 28 </body> 29 </html>
在以上基礎上我們做一點修改，我們在子頁面給出高寬按鈕，用於告訴父窗口怎么改變iframe高寬：
父層代碼
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script src="../jquery-1.7.1.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(document).ready(function () { 8 window.addEventListener('message', function (ev) { 9 //應該要檢查消息來源 10 $('#msg_box').html(ev.origin + ' 發來消息：' + ev.data); 11 12 var w_h = ev.data; 13 //未做格式檢查 14 $('#f').css('width', w_h.split(',')[0] + 'px'); 15 $('#f').css('height', w_h.split(',')[1] + 'px'); 16 17 }, false); 18 19 function p() { 20 var frame = window.frames[0]; 21 frame.postMessage($('#msg').val(), 'http://localhost:3317/html5%E4%B8%8Ecss3/06%E9%80%9A%E8%AE%AFapi/02.htm'); 22 } 23 $('#send').click(function () { 24 p(); 25 }); 26 setTimeout(p, 200); 27 28 }); 29 30 </script> 31 </head> 32 <body> 33 <input type="text" id="msg" /> 34 <button id="send"> 35 發送信息</button><br /> 36 <iframe src="02.htm" width="400" id="f"></iframe> 37 <div id="msg_box"> 38 </div> 39 </body> 40 </html>
子層代碼
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script src="../jquery-1.7.1.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(document).ready(function () { 8 var url = ''; 9 var source = ''; 10 window.addEventListener('message', function (ev) { 11 //此處需要做來源驗證 12 if (ev.origin) { } 13 $('#msg').html(ev.origin + ' 發來消息：' + ev.data); 14 url = ev.origin; 15 source = ev.source; 16 //ev.source.postMessage('這里是：' + this.location, ev.origin); 17 }); 18 19 $('#send').click(function () { 20 source.postMessage($('#w_h').val(), url); 21 }); 22 }); 23 </script> 24 </head> 25 <body> 26 <div id='msg'> 27 </div> 28 <input type="text" id="w_h" /> 29 <button id="send"> 30 改變外層高度</button><br /> 31 </body> 32 </html>
最后為我們的e截個圖：
更加靈活的運用，該api還可以更厲害的運用，我們可以傳遞函數名什么的，反正可做很多事情了。
web sockets 通信
web sockets 是HTML5提供的在web應用程序中客戶端與服務器端之間進行非HTTP的通信機制
他實現了http不容易實現的服務器的數據推送等智能通信技術，因此受到了很高的關注。
使用web sockes api 可以在服務器端與客戶端建立非HTTP的雙向連接，這個連接是實時的也是永久的，除非顯式關閉
這意味着當服務器想向客戶端發送數據時，可以立即將數據推送到客戶瀏覽器中，無需重新建立連接。
只要客戶端有一個被打開的socket並且與服務器建立了連接，服務器就可以將數據推送到這個socket上，服務器不再需要輪詢客戶端請求，化被動為主動。
web sockets api
web sockets api 本身非常簡單，將url作為參數，然后調用websocket對象的構造器來建立於服務器的通信：
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事件監聽socket打開事件：
webSocket.onopen = function (e) { };
通過onclose監聽socket關閉事件：
webSocket.onclose = function (e) {};
通過webSocket.close()方法關閉socket連接；
通過readyState屬性獲取websocket對象狀態：
CONNECTION 0 正在連接
OPEN 1 已經連接
CLOSING 2 正在關閉
CLOSE 2 已經關閉
PS：，因為我不會配置服務器塊的socket相關，所以暫時不能進行測試，該問題留待二次學習時解決。
整個代碼還是很簡單的:
// 創建一個Socket實例
var socket = new WebSocket('ws://localhost:8080');
// 打開Socket
socket.onopen = function(event) {
// 發送一個初始化消息
socket.send('I am the client and I\'m listening!');
// 監聽消息
socket.onmessage = function(event) {
console.log('Client received a message',event);
};
// 監聽Socket的關閉
socket.onclose = function(event) {
console.log('Client notified socket has closed',event);
};
// 關閉Socket....
//socket.close()
};
結語
這章東西其實還是非常有用的，但真要問我有什么用，我還確實說不出來。。。。。。