【HTML5初探之通訊API】跨域門檻不再高、資料推送不是夢

範大腳腳發表於2017-12-20
HTMLAPI跨域
導航
【初探HTML5之使用新標籤佈局】用html5佈局我的部落格頁！
【HTML5初探之form標籤】解放表單驗證、增加檔案上傳、整合拖放
【HTML5初探之繪製影像（上）】看我canvas元素引領下一代web頁面
【HTML5初探之繪製影像（下）】看我canvas元素引領下一代web頁面
【HTML5初探之多媒體元素】視訊播放HTML5、Flash誰才是王道？
【HTML5初探之本地儲存】如果沒有資料庫。。。
【HTML5初探之離線應用】如何打造零請求、無流量的網站？
【HTML5初探之通訊API】跨域門檻不再高、資料推送不是夢
【HTML5初探之Web Workers】網頁也能多執行緒
【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資訊
在以上基礎上我們做一點修改，我們在子頁面給出高寬按鈕，用於告訴父視窗怎麼改變iframe高寬：
父層程式碼
子層程式碼
最後為我們的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() 
};
複製程式碼
 
結語
這章東西其實還是非常有用的，但真要問我有什麼用，我還確實說不出來。。。。。。
 
本文轉自葉小釵部落格園部落格，原文連結http://www.cnblogs.com/yexiaochai/archive/2013/04/20/3032548.html如需轉載請自行聯絡原作者


相關文章